Forums

WordPress › Support » How-To and Troubleshooting

Customization of CSS in Sidebar Problem (6 posts)

  1. jasonbarnettephotography
    Member
    Posted 1 year ago #

    I have been trying for a few days now to customize the CSS in my sidebar. I am using the Modularity theme. When I first installed WordPress and began using plugins, everything was a horrible mess. Formatting, line spacing, especially the links in the sidebar were in complete disarray. You can find a sample of this problem at http://blog.jasonbarnettephotography.com/2010/12/an-afternoon-at-booths-christmas-tree-farm/

    I have managed to get everything except one issue under control:

    I cannot seem to remove a bottom border from my links.

    If you visit my site, you'll notice in the sidebars that each link has a span or div around it with a bottom border. Also, when you hover over the links a white background appears.

    I would love nothing more than a friendly person out there to tell me how I missed something super simple and point out what I can do. I want to remove the bottom border and do away with the white background on the hover.

    Thanks in advance for any help anyone is willing to give.

  2. tnoguchi
    Member
    Posted 1 year ago #

    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; }

    `

  3. tnoguchi
    Member
    Posted 1 year ago #

    Okay, dug around a little more in your code, appears that the extra styles are being generated by a navigation plugin, perhaps this one:

    http://wordpress.org/extend/plugins/multi-level-navigation-plugin/

    or this one:

    http://wordpress.org/extend/plugins/pixopoint-menu/

    Perhaps you changed the style in your stylesheet, but need to change the styles set through the plugin in the admin interface?

  4. MegaToon TV
    Member
    Posted 1 year ago #

    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.

  5. tnoguchi
    Member
    Posted 1 year ago #

    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

  6. alchymyth
    The Sweeper
    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags