Posted by cstalberg on March 22, 2012 at 12:06pm
using drupal 7.12 on fedora core ver 15 with apache 2.2. I am having trouble figuring out how to modify the font type, size and background color of the horizontal header main menu using the fusion starter theme. I have been trying to make the changes at ~/sites/all/themes/fusion/fusion_starter/css/local.css.
In just trying to determine if the code will be reponsive I have
.fusion-inline-menu .inner ul.menu li a {
background: #004f90;
border-right-style: solid;
border-right-width: 1px;
display: inline;
margin: 0;
padding: 0;
white-space: nowrap;
}
which is not working. yes I am clearing the cache and reloading. HELP! (thank you)
Comments
Few suggestions
First, best practices are not to work in the distribution fusion starter class. Instead you should create your own subtheme. E.g.:
Copy/rename the start fusion_starter directory to it's own directory. Standard practice is to put this is sites/default/themes/[my theme] (replace [my theme] with your theme name.
Then rename the fusion_starter.info to [my theme].info
Edit the [mytheme].info file and change the name and description.
Viola, a theme that will not be effected by Fusion updates.
Ok, that said, I'd suggest using Firebug or Chrome's inspect element to look at how CSS is deciding what rules get applied. I'm pretty sure it's a "specificity" problem. The css rule you are listing is the 'generic' rule for any menu marked as an "inline" menu.
Most likely Fusion has a region/main menu specific rule that is more "specific" than your rule. E.g. a rule that starts with .region-main-menu that applies to menus. You may need to duplicate this css selector or get more specific to make your style work.
A quick hack to test if this is happening is to add !important to each of the properties in your css. E.g. background: #004f90 !important;
The !important tag will "bump" the property to the top of the specificity chain and generally override any prior rules.
Be careful with this since using this tag can cause a lot of unintended side effects.... it's generally better to figure out the higher specificity selector than to use this.
Use the helper CSS
That's right, you should set this up as a sub-theme. And once you do that, you really don't need to use the local.css. Instead use the stylesheet fusion-starter-style.css (which you probably want to rename to something specific to your theme, and make the same change in the .info file). There is a ton of helper CSS set up with tips about how to use it. There is a whole section "Main Menu" where you should be able to style your main menu as needed.
DOM Explorer
Also, using a DOM explorer (built-in for Chrome ["Inspect Element"], or FireBug for Firefox) will let you quickly troubleshoot why your apparent CSS changes are not doing what you expect (e.g. whether it's bad CSS, some other style is taking precedence, or it's loading from a cached file.)
okay I still need help
I am running out of time as I have other work to do. Can I hire one of you gents to code this for me? I can learn from you by observing what you did. Please contact me using my personal contact form. Thank you.