Support » Themes and Templates » Changing Button Background
Changing Button Background
-
Well I have been kind of hacking away at thisthe CSS in this template for this blog and have run into a problem I can not get fixed.
I want the nav buttons up top to have a hover effect [which they do] but I want the default state to be clear. Such that there is only text until hover when it loads the gradient. I have tinkered with just about everything it seems and the CSS code for the buttons where it looks to set that color has no effect. I have gone so far as to do a word search for the color of the button and change all of the matches to #FFF and it is still orange.
Here is a snippet of the CSS:
/** -- Navigations -- **/ #branding #main-menu { margin-right: 0em; margin-top: 0.6em; max-width: 70%; float:right; word-wrap: break-word; padding-top:8.9em; /*padding-bottom:2em;*/ } #branding #main-menu ul li { float: left; list-style: none; position: relative; } #branding #main-menu ul li a { display:inline; font-size: 1.5em; color:#FFF!important; margin-left: 0em; margin-bottom: 0.8em; padding: 0.75em 1.75em 1em 1.75em; /*padding: 1.5em;*/ } #branding #main-menu ul li:first-child a { margin-left: 0em; } #branding #main-menu ul li ul li:first-child a { margin-left: 0.3em; } #branding #main-menu ul li a:hover { color:#FFF!important; background:url(../../../../images/menuActivems.jpg); background-repeat:repeat-x; background-position: top; background-attachment: left; text-decoration: none; } #branding #main-menu ul ul { display: none; float: left; position: absolute; top: 3em; left: 0.3em; z-index: 500; background-color:#FFF; } #branding #main-menu ul ul ul { left: 100%; top: 0; } #branding #main-menu ul ul li a, #branding #main-menu ul ul ul li a { font-size: 0.9em; color:#0F0!important; background-color:#FFF!important; width: 9em; height: auto; text-transform: none; padding:0.2em 0.2em 0.2em 0.5em; border: none; margin: 0.2em 0 0.3em 0.2em; } #branding #main-menu ul li:hover > ul { display: block; } #branding #main-menu ul ul a:hover, #branding #main-menu ul ul ul a:hover { color:#FF841F!important; background-color: #EEE!important; }
-
Unless I’m misunderstanding what you are trying to do — your site looks like it IS doing what you want.
If it’s still not showing up right on your machine, try clearing your browser cache – as stylesheets are cached by some browsers.
If it’s not right, can you explain a bit more about what you want.
- The topic ‘Changing Button Background’ is closed to new replies.