Header image

Hi !

I'm using Social Theme.
Anybody would have a clue on replacing the gradient of the top-header by a background image ???
I'm using a child template...

I've searched in past topics of this forum... But didn't find out ! :slight_frown:

Thank you.........

  • DavidM
    • DEV MAN’s Mascot

    Hi Zocalox,

    Yes, there's a gradient png image called bg-transparent.png in the /images/ folder and the styles are set in base.css with a background color of #bcc7dd as follows:
    #top-header { background: #bcc7dd url(../images/bg-transparent.png) repeat-x left top; }

    You could perhaps override that in your child theme, which is probably the best option to keep relatively upgrade safe.

    Let us know how that goes!


  • Zocalox
    • Flash Drive

    Hi David,

    I worked very hard to try to fix that.... Unfortunately... Got some trouble !
    But I think I found out the solution...

    See my screen shot. When I disable that line in Firebug... The changes I've made in the #top-header shows up. If not... Nothing shows up ! :slight_frown:

    what can I do for this line not to be used ????
    background: -moz-linear-gradient(center top , #E6E6E6 0%, #B3B3B3 99%) repeat scroll 0 0 transparent;

    Cannot find that line in any of the CSS !!! :slight_frown:

    Thanks a lot !


  • DavidM
    • DEV MAN’s Mascot

    Hi Alex,

    I didn't notice this before but it seems the background gradient is hard-coded in the options with this theme. You'll notice the background gradients coded on lines 79 and 109 of theme-options.php.

    You could potentially just remove all those styles from that area to remove any gradients.

    How would that work for you?


  • Zocalox
    • Flash Drive

    Thanks David !

    I finaly made it ! :wink:
    Not too bad for a non programer...

    1) Line 77, I've deleted #top-bar, in theme-options.php in my main theme folder. (Hope will think about it after the next Theme update...)

    2) I've added in my child theme css :

    #top-bar {
        background: none repeat scroll 0 0 #666666;
        background-image: url('image.png');
        background-repeat: no-repeat;
        background-position: center top;
        border-bottom: 1px solid #FF0080;
        float: left;
        margin: 0;
        padding: 0;
        position: relative;
        width: 100%;
        z-index: 999;

    See the result at http://zocalox.com (PS : the image will change...)

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.