To insert code use <code>...</code>.
How to change Feature Header Background bar Thickeness / Height?
  • Vote Up0Vote Down liquid2gliquid2g
    Hi,

    Love the theme!
    How do I change Feature Header Background bar height?

    I'm using the 3D flash slider, but want the feature header background bar to be thinner than the slider.

    I've attached an photoshop mockup image to show you what I mean.

    Please let me know.

    thanks in advance!
    red-bar-thinner.jpg
    1875 x 743 - 83K
  • 10 Comments sorted by
  • Vote Up0Vote Down KaptinLinKaptinLin
    Hi,

    You may employ someone that is familiar with html & css to help you do this customization work.

    If you need, i can give you some suggestions about how to achieve this.

    Regards,
    KaptinLin
  • Vote Up0Vote Down Elky1967Elky1967
    I was able to get the look you want with the attached file (example that fits my test site, your slider may be a different size) and the following code was added in striking.. general.. custom css.

    .home #feature {
    background-color:transparent;
    background-image: url('url to your image');
    background-repeat:repeat-x;
    }

    .home #feature .bottom_shadow,
    .home #feature .top_shadow,
    .home #page {
    background:none;
    }

    I hope this helps.
    Tony
    feature_background_test.jpg
    5 x 377 - 1K
  • Vote Up0Vote Down liquid2gliquid2g
    Hi KaptinLin, I'm familiar with basic html and css and will be making the edits myself.

    Thanks Tony, I've tried your suggestion and it seems to do the trick - but I lose the 'gradient light' that gives the slideshow header more depth. Is there any way to do it and to keep the radial light gradient that sits on top?
  • Vote Up0Vote Down Elky1967Elky1967
    you can change the image to have a gradient.
  • Vote Up0Vote Down liquid2gliquid2g
    Thanks Tony, but I mean the radial-light-effect-gradient that makes the center brighter like in the original theme. In the original theme it's a seperate image layer that sits on top as a transparent png.
    I can't get it looking the way I want by integrating it into the backfround image, since that's a slice that repeates horizontally.

    Any ideas on how to get that back?

    KaptinLin, perhaps you know?
  • Vote Up0Vote Down KaptinLinKaptinLin
    Hi liquid2g,

    I think tony means you can use a full image with gradient also the image can contains any effects you want.

    Regards,
    KaptinLin
  • Vote Up0Vote Down Elky1967Elky1967
    Yes that is what I meant. Sorry if I wasn't clear.
  • Vote Up0Vote Down mckmck
    Great thread, and thanks for a great theme! I'm sure support is never-ending task..

    One more question for you though.
    Will this change affect the feature area site wide or just on the home page? Judging by the css I'm guessing just the home page. I'd like to reduce the height of the feature area site wide so it isn't so tall. Is there different css to use?

    As I dug through the css it looks like the css across the site calls out the id 'feature' and it looks like 'inner'. Can you point me to a sample of how I can swap out that inner image or will the css above for .home #feature do the trick?

    thanks for your help!
  • Vote Up0Vote Down KaptinLinKaptinLin
    The custom css code tony gave will only affect the home page.

    If you want reduce the height of the feature area,

    You can try

    #feature .inner {
    padding:0px 0;
    }

    I think you don't need the swap out the inner image.

    Regards,
    KaptinLiN
  • Vote Up0Vote Down mckmck
    Thanks. That actually helped to move the feature text up or down which I needed to do. I ended up removing the top and bottom shadows, changing the image and altering the .page #feature height to do the trick. Took some playing around but I'm happy with it.

    Much appreciated!
Add a Comment