WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
I'm using the Able theme. It allows 2 menus and I have put the navigation as both the primary and footer menu. The primary bar navigation appears with a nice grey background but the footer navigation does not have this background. How do I give it the same grey background as in the primary navigation (eg with some CSS code)?
Thanks for your help.
The blog I need help with is lexiconlimited.wordpress.com.
This is the CSS used to give your primary navigation bar that background:
.main-navigation, .menu-toggle {<br />
background-color: #F0F0F0;<br />
background-image: linear-gradient(rgba(240, 240, 240, 0.8), rgba(210, 210, 210, 0.8));<br />
border-radius: 3px 3px 0 0;<br />
box-shadow: 0 1px 0 rgba(230, 230, 230, 0.8) inset, 0 2px 0 rgba(250, 250, 250, 0.8) inset, 0 -1px 0 rgba(200, 200, 200, 0.6) inset, 0 0 1px rgba(0, 0, 0, 0.1);<br />
}
You can use the same code for the footer, but replace the class name:
.site-footer {<br />
background-color: #F0F0F0;<br />
background-image: linear-gradient(rgba(240, 240, 240, 0.8), rgba(210, 210, 210, 0.8));<br />
border-radius: 3px 3px 0 0;<br />
box-shadow: 0 1px 0 rgba(230, 230, 230, 0.8) inset, 0 2px 0 rgba(250, 250, 250, 0.8) inset, 0 -1px 0 rgba(200, 200, 200, 0.6) inset, 0 0 1px rgba(0, 0, 0, 0.1);<br />
}
That should give you the same grey background in the footer.
Just FYI, you could theoretically just add the site-footer class to the list of classes already using that CSS definition:
.main-navigation, .menu-toggle, .site-footer { ... }
However, there are some other things defined for the primary navigation that I don't think work in the same way for the footer, so it's probably safer to define them separately unless you want to play around with those definitions.
Thank you. That's helpful although it doesn't quite achieve the effect I'd hoped for. I was hoping to reproduce exactly the primary navigation bar but the grey shading in the footer extends also over the WordPress and theme acknowledgement (perhaps that's unavoidable) and, unlike the primary, the individual page names do not darken when the cursor hovers over them.
But if that's the best that can be achieved, so be it.
It is certainly possible to achieve your desired effect, I just didn't understand that's what you were going for, based on your initial description. I encourage you to explore tools like Firebug, which is incredible useful for understanding what CSS properties control what elements of your site. If you are new to CSS, WordPress also offers some excellent CSS tips and links to additional resources.
Thank you for this. You are quite right - I am new to CSS and I will study it in more detail using the sources you identify. But as a "wordpress.com" user (with the custom design update) I don't have access to the .php files for the header and footer and surely that makes it difficult to develop stylesheets that produce the appearance I want. Perhaps I would have been better to go down the "wordpress.org" route.
With the custom design upgrade, you have really a lot of control over the look. CSS stylesheets are much more important to that end than having access to the PHP files. (If you want to see some examples, the CSS Zen Garden demonstrates just how much you can change about a site's design by only changing the CSS.) It can take a little time to get oriented, but with tutorials and tools like Firebug you can start to play around to get just the look you want.
I understand that CSS is a powerful tool with which to customise the appearance of pages on my site, where I can compose the HTML code myself. However, with respect to the header and footer (which is where this started), as I can't see the HTML, I don't know the class and id names to use in the CSS. As I understand it, this would not be a problem if I was just using wordpress.org.
I encourage you to carefully read through the support pages I linked to above before giving up on WordPress.com, and I cannot emphasize how much I recommend trying out the Firebug tool.
You only need access to HTML or PHP from behind the scenes if you want to make changes to it. If all you want to change is the CSS, you can do that without accessing the pages from the back end. To view the HTML code for your page, most browsers have an option to right click and select "View page source" or a similar option. This allows you to view the code and see what CSS selectors are being used and where. Alternately, add-ons like Firebug (for Firefox) or Developer Toolbar (IE) or even just the "inspect element" option (native in Chrome and Firefox when you right click) allow you to see the code and see how changing the code would change the look of the site. (That's how I identified the changes I suggested in my first couple of posts. I didn't have any prior knowledge about the CSS used in your blog theme.)
If any of this is unclear, let me know and I am happy to explain further. However, again, I think the best place to start is to read through the support documentation and check out the links in the "CSS Help" section on this support page.
Thank you again for explaining all this. I will follow your advice and work with the tools you suggest before giving up on wordpress.com.
This thread is tagged and will be moved to the CSS Forum for you.
I can't see the HTML, I don't know the class and id names to use in the CSS. As I understand it, this would not be a problem if I was just using wordpress.org.
Just to clarify, that statement is not true. You can see the HTML and CSS for any site on the internet regardless of whether it is setup as a WordPress.org site or a WordPress.com site, however, WordPress.com does not offer the option to modify theme HTML which is probably what you're thinking of.
To match the footer navigation styling in the Able theme to the top navigation on the same page, I would start by copying the =Navigation Menu section of the theme's CSS and then adjusting the selectors so they apply to the footer instead of the header.
Here is a direct link to your site's CSS which I got from the Appearance → Custom Design → CSS → Mode: Add-on section of your dashboard:
https://s1.wp.com/wp-content/themes/pub/able/style.css?m=1359464150g&minify=false
Here is an example. To get the following, I copied the =Navigation Menu section from your theme's CSS, stripped out anything that applied to submenus since you don't have those, replaced ".main-navigation" with "#colophon .footer-navigation", and added two rules to the top to make the footer area full width just like it is for the top navigation;
designsimply#colophon {
padding: 0;
}
.site-info {
padding: 0 26px;
}
#colophon .footer-navigation {
background-color: rgb( 240, 240, 240 ); /* #f0f0f0 */
background-image: -webkit-gradient( linear, left top, left bottom, from( rgba( 240, 240, 240, 0.8 ) ), to( rgba( 210, 210, 210, 0.8 ) ) );
background-image: -webkit-linear-gradient( rgba( 240, 240, 240, 0.8 ), rgba( 210, 210, 210, 0.8 ) );
background-image: -moz-linear-gradient( rgba( 240, 240, 240, 0.8 ), rgba( 210, 210, 210, 0.8 ) );
background-image: -ms-linear-gradient( rgba( 240, 240, 240, 0.8 ), rgba( 210, 210, 210, 0.8 ) );
background-image: -o-linear-gradient( rgba( 240, 240, 240, 0.8 ), rgba( 210, 210, 210, 0.8 ) );
background-image: linear-gradient( rgba( 240, 240, 240, 0.8 ), rgba( 210, 210, 210, 0.8 ) );
filter: progid:DXImageTransform.Microsoft.gradient( GradientType=0, startColorstr='#f0f0f0', endColorstr='#d2d2d2' );
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
/* box-shadow values: #e6e6e6, #fafafa, #c8c8c8, #000 */
-webkit-box-shadow: inset 0 1px 0 rgba( 230, 230, 230, 0.8 ), inset 0 2px 0 rgba( 250, 250, 250, 0.8 ), inset 0 -1px 0 rgba( 200, 200, 200, 0.6 ), 0 0 1px rgba( 0, 0, 0, .1 );
-moz-box-shadow: inset 0 1px 0 rgba( 230, 230, 230, 0.8 ), inset 0 2px 0 rgba( 250, 250, 250, 0.8 ), inset 0 -1px 0 rgba( 200, 200, 200, 0.6 ), 0 0 1px rgba( 0, 0, 0, .1 );
-ms-box-shadow: inset 0 1px 0 rgba( 230, 230, 230, 0.8 ), inset 0 2px 0 rgba( 250, 250, 250, 0.8 ), inset 0 -1px 0 rgba( 200, 200, 200, 0.6 ), 0 0 1px rgba( 0, 0, 0, .1 );
-o-box-shadow: inset 0 1px 0 rgba( 230, 230, 230, 0.8 ), inset 0 2px 0 rgba( 250, 250, 250, 0.8 ), inset 0 -1px 0 rgba( 200, 200, 200, 0.6 ), 0 0 1px rgba( 0, 0, 0, .1 );
box-shadow: inset 0 1px 0 rgba( 230, 230, 230, 0.8 ), inset 0 2px 0 rgba( 250, 250, 250, 0.8 ), inset 0 -1px 0 rgba( 200, 200, 200, 0.6 ), 0 0 1px rgba( 0, 0, 0, .1 );
float: left;
font-size: 13px;
font-size: 1.3rem;
margin: 0;
}
#colophon .footer-navigation ul {
list-style: none;
margin: 0;
padding: 0 26px;
}
#colophon .footer-navigation a {
display: block;
padding: 6px 13px 7px;
text-decoration: none;
word-wrap: break-word;
border: 0;
}
#colophon .footer-navigation a:focus,
#colophon .footer-navigation li:hover > a,
#colophon .footer-navigation .current-menu-item > a,
#colophon .footer-navigation .current_page_item > a {
background-color: rgb( 215, 215, 215 ); /* #d7d7d7 */
background-image: -webkit-gradient( linear, left top, left bottom, from( rgba( 215, 215, 215, 0.8 ) ), to( rgba( 180, 180, 180, 0.8 ) ) );
background-image: -webkit-linear-gradient( rgba( 215, 215, 215, 0.8 ), rgba( 180, 180, 180, 0.8 ) );
background-image: -moz-linear-gradient( rgba( 215, 215, 215, 0.8 ), rgba( 180, 180, 180, 0.8 ) );
background-image: -ms-linear-gradient( rgba( 215, 215, 215, 0.8 ), rgba( 180, 180, 180, 0.8 ) );
background-image: -o-linear-gradient( rgba( 215, 215, 215, 0.8 ), rgba( 180, 180, 180, 0.8 ) );
background-image: linear-gradient( rgba( 215, 215, 215, 0.8 ), rgba( 180, 180, 180, 0.8 ) );
filter: progid:DXImageTransform.Microsoft.gradient( GradientType=0, startColorstr='#d7d7d7', endColorstr='#b4b4b4' );
/* box-shadow values: #c8c8c8, #f0f0f0, #a5a5a5, #000 */
-webkit-box-shadow: inset 0 1px 0 rgba( 200, 200, 200, 0.8 ), inset 0 2px 0 rgba( 240, 240, 240, 0.8 ), inset 0 -1px 0 rgba( 165, 165, 165, 0.6 ), 0 0 1px rgba( 0, 0, 0, 0.19 );
-moz-box-shadow: inset 0 1px 0 rgba( 200, 200, 200, 0.8 ), inset 0 2px 0 rgba( 240, 240, 240, 0.8 ), inset 0 -1px 0 rgba( 165, 165, 165, 0.6 ), 0 0 1px rgba( 0, 0, 0, 0.19 );
-ms-box-shadow: inset 0 1px 0 rgba( 200, 200, 200, 0.8 ), inset 0 2px 0 rgba( 240, 240, 240, 0.8 ), inset 0 -1px 0 rgba( 165, 165, 165, 0.6 ), 0 0 1px rgba( 0, 0, 0, 0.19 );
-o-box-shadow: inset 0 1px 0 rgba( 200, 200, 200, 0.8 ), inset 0 2px 0 rgba( 240, 240, 240, 0.8 ), inset 0 -1px 0 rgba( 165, 165, 165, 0.6 ), 0 0 1px rgba( 0, 0, 0, 0.19 );
box-shadow: inset 0 1px 0 rgba( 200, 200, 200, 0.8 ), inset 0 2px 0 rgba( 240, 240, 240, 0.8 ), inset 0 -1px 0 rgba( 165, 165, 165, 0.6 ), 0 0 1px rgba( 0, 0, 0, 0.19 );
}
#colophon .footer-navigation li .current-menu-item > a,
#colophon .footer-navigation li .current_page_item > a {
background: rgb( 230, 230, 230 ); /* #e6e6e6 */
background: rgba( 230, 230, 230, 0.9 );
box-shadow: none;
color: rgb( 13, 61, 155 ); /* #0d3d9b */
color: rgba( 13, 61, 155, 1 );
}I used "#colophon" in front of ".footer-navigation" to make the rules more specific so I wouldn't have to use an !important tag on anything.
It looks scary because it's using soe nifty CSS3 stuff, but it's mostly a matter of cut/paste in this case.
This topic has been closed to new replies.
