Need help with home page image to be different than other pages

  • Unknown's avatar
    deekapadiya · Member ·

    Found this topic in forum

    https://en.forums.wordpress.com/topic/background-image-having-on-the-welcome-page-only-is-this-doable?replies=10#post-2514714

    and did the step, it worked perfectly, but I am aiming for all other pages to be with white background and the home page to be with an image. If I select background as white, it is creating this white shadow on my homepage. I love the Obsidian theme home page with colour overlay, but since I select white for other pages, my image for home page does not look good with white overlay. Is there a way to completely disconnect the home page with other pages?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, give the following a try. I’ve used the “not” pseudo selector to tell the browsers to not apply certain things to the home page, so it remains the same. When we take the background of other pages to white, the current menu item on those pages disappears bacause it is white also, so the third rule changes the color of that current menu item. You can edit the color as desired. Replace what you have now with the following and let me know what you think. 

    body.custom-background {
    background-color: #fff;
    background-image: none !important;
}
body.home.custom-background {
    background-image: url("https://deepalikapadiyadotcom.files.wordpress.com/2016/08/test-2.jpg") !important;
}
body:not(.home) .obsidian-background-overlay::before {
    background-color: transparent !important;
}
body:not(.home) .site-navigation .menu > .current-menu-item > a, body:not(.home) .site-navigation .menu > .current-menu-parent > a, body:not(.home) .site-navigation .menu > .current-menu-ancester > a {
	color: #000 !important;
}
  • Unknown's avatar
    deekapadiya · Member ·

    it worked perfectly, thank you so much!!

  • Unknown's avatar
    thesacredpath · Member ·

    Hooray and you are welcome!

  • The topic ‘Need help with home page image to be different than other pages’ is closed to new replies.