Hi Jason,
I looked at the underlying page source for the page linked. The modularity site’s “style.css” file is not what’s causing the links to have the white background on hover. It appears to be some styles that are appended to the document perhaps as part of a plugin?
Without looking at the theme’s files, I can’t really say where this is coming from. However, it’s being added to the themes’ header, located between the <head> </head> tags.
Snippet of source code from your site’s head copied below.
<meta name="ps_configurator" content="thmNm=Modularity;thmVsn=2.9;thmFmly=;hd_bgn=BeginHeader;hd_end=EndHeader;ft_bgn=BeginFooter;ft_end=EndFooter;scptInc=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js;scptInc=http://blog.jasonbarnettephotography.com/wp-content/themes/modularity/includes/js/nav/superfish.js;scptInc=http://blog.jasonbarnettephotography.com/wp-content/themes/modularity/includes/js/nav/suckerfish.init.js;scptInc=http://blog.jasonbarnettephotography.com/wp-content/themes/modularity/includes/js/nav/supersubs.js;lnkInc=http://blog.jasonbarnettephotography.com/wp-content/themes/modularity/style.css" />
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("ul.sf-menu").supersubs({
minWidth: 12,
maxWidth: 27,
extraWidth: 1
}).superfish({
delay: 500,
animation: {opacity:"show",height:"show"},
speed: "fast",
autoArrows: true,
dropShadows: true
});});
</script>
<style type="text/css">
body { background-color: #222222; background-repeat: no-repeat; }
.container,
.sliderGallery { background-color: #181818; }
div.colborder,
div.border { border-right: 1px solid #ffffff; }
.box,
.postmetadata,
.nav,
#sidebar ul li a:hover,
ul.txt li:hover { background-color: #ffffff; }
#sidebar ul li a,
ul.txt li { border-bottom: 1px solid #ffffff; }
`
MJ
(@mardie)
Hi,
I checked your code. It seems that in header.php there is an additional style added manually. Find this line (as also pointed out by tnoguchi):
<style type="text/css">
I am not sure if its generated by plugin or you put it there. But inside you will find this:
#sidebar ul li a:hover, ul.txt li:hover { background-color: #ffffff; }
#sidebar ul li a, ul.txt li { border-bottom: 1px solid #ffffff; }
You can remove that line of code since your sidebar’s css is already declared in your theme’s style.css.
Like I said before, the code is probably being generated by a nav plugin that comes with the theme. The plugin is adding additional style declarations to the head via an action hook.
As per CSS specs, locally declared styles on pages override those that are declared in external style sheets–that’s why the OP wasn’t able to override the style by tweaking his theme’s style sheet.
The OP will most likely need to look at the plugin settings to change the colors.
~t
there is always force:
#sidebar ul li a {border:none!important;}
#sidebar ul li a:hover {background:none!important;
color:#888; /*optional hover color*/
text-decoration:underline;}
these can be added anywhere into style.css or screen.css
