Support » Themes and Templates » 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;
    }

Viewing 1 replies (of 1 total)
  • 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.

Viewing 1 replies (of 1 total)
  • The topic ‘Changing Button Background’ is closed to new replies.