Bakersville 2 Theme Color Overlay
-
I’m getting ready to switch my theme to the new Bakersville 2, but before I do I want to make sure that I can remove the gray overlay on the header, tagline bar, and footer. When I have played with the trial it tones down any bright color I choose. I have the premium package.
The blog I need help with is: (visible only to logged in users)
-
Hi @lhawkinsjackson!
You can use the following CSS to remove the overlay on the header of Baskerville 2:
.header .cover { background: none; }Can you tell me a little more of what you mean by the overlay you’re seeing on the tagline or footer? :)
-
Menu bar and footer might be better words. Both of these areas (the menu bar being just below the header, and the footer being where my footer widgets are after a post or page) remain darker than any lighter selected color I choose. I’m assuming it is to match the overlay on the header? There are only two color choices with one background color. I’m wanting to create a light, crisp and clean feel – but like the grid options on this theme. thanks for the help!
-
Got it :)
The nave menu has a few different parts to it – the background, the links, the dropdowns, and the hover color.
Here’s some CSS that should do all the things you’ve asked about, with the different sections labeled (there’s also footer colors in there)
/* navbar & footer background color */ .navigation, .footer, .bg-dark { background-color: #ddd; } /* dropdown menu background colors */ .main-navigation ul ul li { background-color: #ccc; } .main-navigation ul li>ul:before { border-bottom-color: #ccc } /* navigation link color */ .main-navigation li>a, .main-navigation ul ul a, .main-navigation ul ul ul a, .main-navigation ul ul ul ul a, .main-navigation ul ul ul ul ul a { color: #333; } /* navigation link hover/select color */ .main-navigation li:hover > a, .main-navigation li:focus > a { color: #fff; } /* footer credits links*/ .credits a { color: #333; }You can swap out any of the colors for your own HTML color codes as needed :)
-
Thank you! I’ve saved the changes to my blog choosingwisdom.org
I was hoping to acheive the look of the Dara theme. Which means white on the top with a blue navigation/menu bar. On the footer part of my text is not visible because of the font color, and if I’m able to get the top part of the header white as well that font color would need to change too. Is there a way to do that as well. I really appreciate the help as I no nothing about CSS. Always good to learn:)Also – just for additional information. I chose Baskerville 2 because of the grid layout. I considered Dara, but the mapping got a little to confusing to achieve the same type of grid look. If there is another Theme that would be easier to do that with I’m open. I also considered Dyad. Like the grid, but after adding my logo it pushes the gray header half way into the featured article image.
-
I was able to get the font color to change on the footer, but if I get the top header white – that font color will not show up.
-
These styles should help with the text color in the header. One for the title and social media icons, the other for the site’s tagline:
.site-title a, .jetpack-social-navigation a{ color: #307f76; } .site-description { color: #369f93; }If you like this style of grid for your posts, Baskerville is a good way to go. Try the above CSS and let me know what you think. (note: this doesn’t change the background color to white, you’ll want to do that as well!)
-
There still seems to be a gray overlay on the header, and when I change the background to white #ffffff it takes the color away from the navigation/menu bar.
Here is the code I’ve entered:
.navigation,
.footer,
.bg-dark {
background-color: #ffffff;
}.main-navigation ul ul li {
background-color: #369f93;
}.main-navigation ul li>ul:before {
border-bottom-color: #369f93;
}.main-navigation li>a,
.main-navigation ul ul a,
.main-navigation ul ul ul a,
.main-navigation ul ul ul ul a,
.main-navigation ul ul ul ul ul a {
color: #ffffff;
}/* navigation link hover/select color */
.main-navigation li:hover > a,
.main-navigation li:focus > a {
color: #e1ba0e;
}.site-title a,
.jetpack-social-navigation a {
color: #307f76;
}.site-description {
color: #369f93;
}I’ve saved these changes so you can see what they are doing.
-
There still seems to be a gray overlay on the header, and when I change the background to white #ffffff it takes the color away from the navigation/menu bar.
Here is the code I’ve entered:
.navigation,
.footer,
.bg-dark {
background-color: #ffffff;
}.main-navigation ul ul li {
background-color: #369f93;
}.main-navigation ul li>ul:before {
border-bottom-color: #369f93;
}.main-navigation li>a,
.main-navigation ul ul a,
.main-navigation ul ul ul a,
.main-navigation ul ul ul ul a,
.main-navigation ul ul ul ul ul a {
color: #ffffff;
}/* navigation link hover/select color */
.main-navigation li:hover > a,
.main-navigation li:focus > a {
color: #e1ba0e;
}.site-title a,
.jetpack-social-navigation a {
color: #307f76;
}.site-description {
color: #369f93;
}I’ve saved these changes so you can see what they are doing.
-
There still seems to be a gray overlay on the header
It looks like you’re missing the bit of CSS from the beginning of the thread:
.header .cover { background: none; }when I change the background to white #ffffff it takes the color away from the navigation/menu bar.
Ah, yes. I initially wrote that CSS before we talked about your wanting a different colored menu bar.
This style is setting the header, footer, and menu all to the same background:
.navigation, .footer, .bg-dark { background-color: #ffffff; }If we split the menu out for a separate color, it will look like this:
.footer, .bg-dark { background-color: #ffffff; } .navigation { background-color: #ccc; }That’s a gray – so you’ll want to swap in your teal color :)
-
It’s looking GREAT!! I really appreciate all of the help! Just a couple of more things that still seem to be off. The footer has text that is not visible. I changed the text color and only part of it shows. It seems like there is possibly different code for the different widgets I’m using?
Also I’m wondering if you know how to add categories to the bottom of each post in the grid. Right now it just shows comments. I can add the date, but would rather have the category showing. In the customizer I have display categories and tags clicked but that doesn’t appear to add them to the bottom of the post summary on the grid.
-
Looks like we’re getting close! :)
.footer .widget-content, .footer #wp-calendar, .footer #wp-calendar thead, .footer #wp-calendar tfoot a, .footer .widget-title { color: #333; } -
Got it!! Thanks so much for the help! I’m so happy with how it’s turned out!
Any ideas on adding the categories to the bottom of each post in the grid? I can open a new thread if that is better – since that isn’t color related. Again really appreciate the help!
-
Missed that part in my last reply, sorry!
Baskerville 2 displays the categories on the individual post pages, but on on the actual grid. That isn’t something CSS can add in for us I’m afraid.
-
-
-
Hi! I also am using the Bakersville 2 theme. Although I can’t find where to change the HTML of the page. Can I not change anything because I only have the premium plan? Should I have gone business? However I’m not selling anything
-
Hi @electriclinzyland!
The short answer is that you don’t directly edit the HTML of a theme on a WordPress.com site, but you can add Custom CSS. There is a different kind of WordPress site called self hosting, where you could make those kinds of changes.
If that doesn’t answer your question, please open a new thread with some details about what you’re hoping to do :)
- The topic ‘Bakersville 2 Theme Color Overlay’ is closed to new replies.
WordPress.com Forums 