header background color matches site background

  • lateatlantean

    #4906

    Hello! 🙂

    If I set a background color, it applies also to the header background.

    I was hoping that I could have the header background, say…white, so that if I upload a small image (that usually has a white background) to the header it blends with the header background color.

    As it is now, my site background color is a pale texture type grey. Since it applies to the header also…when I add a small picture there is a picture with a white square background and the rest of the header is texture grey as my site background.

    Any way to separate the two background settings?

    Mod

    Kenneth John Odle

    #29787

    Custom CSS:

    #header {
    background: #fff;
    }

    But the best way is to integrate the background color you want into your header image.

    lateatlantean

    #29788

    You are awesome. All of you are. 🙂

    You are right…I did try to integrate using the same backgrounds in both places, but it didn’t work out. I want to be able to upload logo images and small pics (some with text) etc, into the header area.

    Is there a code I will need to align these types? Small images seem to default to the left.

    Thanks again!

    Donna

    Mod

    Kenneth John Odle

    #29789

    Here’s another approach:

    Create a header image that has the background color you want and use that.

    Use Graphene’s header widget (or an action hook widget area) to place logo images, and control their placement via CSS. Then use Widget Logic plugin to control which pages they appear on.

    lateatlantean

    #29790
    Quote:

    Use Graphene’s header widget (or an action hook widget area) to place logo images, and control their placement via CSS. Then use Widget Logic plugin to control which pages they appear on.

    Kinda new to this kind of thing. I am not familiar with how to us action hook widget and css placement although it this seems as though it would be the best way (can this also be done on top of a created header image?). Can you suggest where I can find “easy” instructions for action hook method?

    Oh…Graphene says header widget area is “unstyled”. But if I enable it…I can then use Widget Logic Plugin to place/style them? Is that right?

    I’ll go ahead and install the Widget Logic Plugin in the meantime.

    Please forgive me, I’m getting a bit of brain spin at this point. 🙂

    Thanks again!

    Donna

    Mod

    Kenneth John Odle

    #29791
    Quote:
    can this also be done on top of a created header image

    Yes, if you use the proper action hook.

    A basic tutorial:

    http://blog.kjodle.net/2011/11/04/graphene-action-hook-widgets-an-easy-way-to-modify-your-blog/

    Also, this will help with placement:

    http://forum.khairul-syahir.com/graphene-support/how-can-i-add-adsense-to-the-background-image-1#post-5040

    Mod

    Kenneth John Odle

    #29792
    Quote:
    But if I enable it…I can then use Widget Logic Plugin to place/style them? Is that right?

    Nope–that plugin allows you to control which posts/pages a widget will appear on.

    lateatlantean

    #29793

    Thank you! I will get on these tutorials and do my best. 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.
Do NOT follow this link or you will be banned from the site!