Support » Themes and Templates » 2012 theme:make header image background merge with page background

  • Resolved JohnsonL1

    (@johnsonl1)


    hi everyone–the background of my header image and the background of the entire site are the same color. I want to make the header image background blend seamlessly with the site background–in short, i do not want my header sitting in that big white box, i want it to be part of the larger page. can anyone point out the CSS i would need to change? I would like to get this site up in the next few days. everything has been managed but that one sticking point. thank you so much.

Viewing 15 replies - 1 through 15 (of 20 total)
  • Hi JohnsonL,

    To help us help you, please provide a link to your site.

    Thanks!

    Christi

    Thread Starter JohnsonL1

    (@johnsonl1)

    hi christi–the site is not even up yet…i am not sure how best to do this, you would have to have a link to the admin panel and i do not think my client would be cool with that. i appreciate your wanting to help, please tell me best how to do this: is there somewhere i can post what i would LIKE to do–the photoshop mockup– and what the 2012 theme is CURRENTLY letting me do? with a screen shot or something? again, many thanks.

    Thread Starter JohnsonL1

    (@johnsonl1)

    christi–i ‘published’ the site so you can access it. again, i need to eliminate the white content are that separates the header from the background do that it looks somehwat seamless. and again, many, many thanks.

    seventeengormanadvisors.com

    Hi JohnsonL,

    Thanks for posting the link. My best suggestion is to make yourself a Child Theme. Once you’ve done that, copy the header.php file to your child theme, make a separate container above the #page div and move your hgroup and header image into that new container. Give that new container a unique id and a class of “site” so it will be given the necessary styles. Then, in your child theme style sheet, you can override the styles you do not want (e.g. the white background color).

    Hope this helps!

    Christi

    Thread Starter JohnsonL1

    (@johnsonl1)

    Christi– i actually do have a child theme, i will create a new div above the #page div in the header.php. i will try this out in the next week, and then try it out on the client. right now, because he wants to launch, he is okay with the present look, even though it does not look quite like the mock-up. but i know he would be happier IF it could be made to look like the mock-up. more important, i would be happier. thank you so much for taking the time to help. i am a professional photographer just getting into web design. if you ever need any Photoshop help, please let me know!

    Thread Starter JohnsonL1

    (@johnsonl1)

    Christi–one more question, and I understand if you do not have time for an answer. there is a double horizontal rule at the bottom of each page, between the main content and the footer. i have looked through the code many times and cannot figure out why it is there. any help would be very much appreciated. I will get to the header fix as soon as i can after the Thanksgiving holiday. Thank you again for all your help.

    Thread Starter JohnsonL1

    (@johnsonl1)

    greetings again, christi. And THANK YOU. i could not wait till after the holilday, it was bothering me too much. after working on this for a bit, i was able–following your instructions–to create a new DIV ID for the header and move it out of the white box. Thank you so much. and removed the box shadow around the image. a happy thanksgiving to you.

    Hi JohnsonL,

    The new header looks great! Here’s the css to add to your child theme style sheet to remove that bothersome double border at the bottom of each page:

    .site-content article {
    border:none;
    }

    I’m glad I was able to help and things are progressing well with your site. A Happy Thanksgiving to you as well.

    Thanks!

    Christi

    Thread Starter JohnsonL1

    (@johnsonl1)

    Christi–THANK YOU for everything. I will place this code in…i looked at everything I could think of to figure out WHERE to remove the border. I am sorry to ask you ONE MORE THING…but after the holiday, if you have a moment, the MENU is not showing up on the iPhone. Rather, it shows up, but it says ‘menu’ and is not clickable. If you have an idea what I am doing wrong (again) I will donate to your favorite charity in your honor. really.

    Thread Starter JohnsonL1

    (@johnsonl1)

    Christi–just added your fix to the .site-content article class. worked like a charm. many thanks.

    Thread Starter JohnsonL1

    (@johnsonl1)

    Christi–i recopied header.php menu info into the child theme folder. for whatever reason, the new copy of menu worked. thanks again for all your help!

    Hi JohnsonL,

    Sorry I was out of pocket for a few days for Thanksgiving. I’m glad to see that you resolved the issue with the navigation menu! If this wraps everything up for your request, please be sure to mark it as resolved.

    Thanks!

    Christi

    Thread Starter JohnsonL1

    (@johnsonl1)

    Christi–

    thank you again for all your help. serious about the charity, too….!

    Hi JohnsonL,

    I appreciate the offer to donate to a charity of my choice. I’m not sure what the forum rules might be regarding that, so I will simply say, my favorite charities are any Food Bank or Children’s Cancer charity. Please feel free to make a donation to a charity of your choice 🙂

    Thanks!

    Christi

    Thread Starter JohnsonL1

    (@johnsonl1)

    just made a donation to Philabundance, a food bank in Philadelphia. Thanks again, Christi!

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘2012 theme:make header image background merge with page background’ is closed to new replies.