Background Sub Page Color & Font Color
-
1) I want to keep the white font color on my home page.
2) I want a white background for all of my sub pages so that I can use gray or blue font colors when I create my pages.
3) The problem I encounter: When I change my background color to white, it changes the font color on my homepage to gray. How can I 1) change my background color to white for my subpages, 2) keep my font color in white on my homepage, 3) put the font color in gray on my sub pages for the menu items, page title, and company name?
4) Also, the background color on my drop down menus on my homepage is in Black, how can I also change that color to gray?
The blog I need help with is: (visible only to logged in users)
-
Hi there!
To change the background color on your sub-menu add the following in Customize > CSS:
.site-navigation .sub-menu { background-color: #c0c0c0; }(Change the color hex code to any one you want to get the right shade of gray there.)
The specific page background adjustments you’re wanting to do look quite tricky and I haven’t come across a solution that works without causing other issues on your site yet while checking into it.
However, the Obsidian theme has special forum where the theme creator answers questions, so I’d recommend asking there to see if they have a suggestion that works properly: https://premium-themes.forums.wordpress.com/forum/obsidian. They made the theme, so will know if it’s possible and can likely suggest how to get it done correctly. :)
-
Hi!
Your question is a bit tricky, as there are many kinds of elements we have to consider when changing the whole color scheme. In my sample source code I have added some comments to help you understand what is going on (and possibly add your own modifications):
/** 1. STYLES FOR SUBPAGES **/ /** 1.1. Change the subpages background color to white and base font color to gray **/ body.custom-background:not(.home) { color: #757575; background-color: #fff; } /** 1.2 Hide background overlay **/ body:not(.home) .obsidian-background-overlay { display: none; } /** 1.3. Change the style of all text inputs to gray on white **/ body:not(.home) input[type="email"], body:not(.home) input[type="password"], body:not(.home) input[type="search"], body:not(.home) input[type="text"], body:not(.home) input[type="url"], body:not(.home) textarea { border-color: #ccc; color: #757575; background-color: #fff; } /** 1.4. Change the style of all buttons to white on gray **/ body:not(.home) button, body:not(.home) input[type="button"], body:not(.home) input[type="reset"], body:not(.home) input[type="submit"], body:not(.home) .button { color: #fff; background-color: #757575; } /** 1.5. Change the menu toggle button on mobile devices to gray on white **/ body:not(.home) .site-navigation-toggle, body:not(.home) .site-navigation-toggle:hover, body:not(.home) .site-navigation-toggle:focus { color: #757575; background-color: #fff; } /** 1.6. Change the style of menu links to gray on white **/ body:not(.home) .site-navigation .menu a, body:not(.home) .site-navigation .sub-menu a { color: #757575 !important; background-color: #fff; } /** 1.7. Make borders more delicate (light gray) **/ body:not(.home) .site-navigation li, body:not(.home) .page-title, body:not(.home) .footer-widgets { border-color: #ccc !important; } /** 1.8. Make submenu arrow more delicate (light gray) **/ body:not(.home) .site-navigation .sub-menu:after { border-bottom-color: #ccc; } /** 2. STYLES FOR THE HOME PAGE **/ /** 2.1. Set submenu background to gray **/ .home .site-navigation .sub-menu, .home .site-navigation .sub-menu a, .home .site-navigation .sub-menu a:hover, .home .site-navigation .sub-menu a:focus { background-color: #757575 !important; }Note that the subpages you’ll add in the future may contain some elements I haven’t considered for now. If you see anything looking odd, let me know and I’ll try to add a new rule for such things.
-
-
-
-
Hi there, give the following a try, pasting it in at the end of your custom CSS. All of the following specifically excluded the “home” page using a :not() pseudo selector.
body:not(.home) { background-color: #fff; } body:not(.home) .obsidian-background-overlay::before { background-color: #fff; opacity: 1; } body:not(.home) .site-navigation a { color: #cc0000; } 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: #11ff00; } body:not(.home) .credits, body:not(.home) .credits a { color: #808080; } body:not(.home) .site-navigation .sub-menu { background-color: #848482 !important; } -
-
Lol!
The only thing I’m missing is the page titles in gray. They must be still in white because I can’t see them…
-
Here you go on he page title.
body:not(.home) .page-header .entry-title { color: #848482; } -
-
Maybe one of you can help me on the below forum:
https://en.forums.wordpress.com/topic/slideshow-size-2?replies=9#post-2582757
I think Sarah stepped out.
I just need to adjust the height of my slideshow, and change the caption color to gray.
- The topic ‘Background Sub Page Color & Font Color’ is closed to new replies.
WordPress.com Forums 