Hi, my website is at http://www.clickarug.com/dru/

I have been trying to change the font type and font-weight for the menus on left hand side sidebar. I changed it in system.css in modules/system folder, but haven't been able to achieve the results. I want the menus to look same as in the top navigation bar.

Thanks in advance.

Comments

anthonylicari’s picture

<div id="menu">
	  <ul class="links-menu">
<li><a href="/dru/?q=node/9" title="Our Link Partners">LINKS</a></li>

<li><a href="/dru/?q=node/8" title="Our Views">BLOG</a></li>
<li><a href="/dru/?q=node/7" title="Contact">CONTACT US</a></li>
<li><a href="/dru/?q=node/6" title="Forms &amp; Files">FORMS</a></li>
<li><a href="/dru/?q=node/5" title="cases">CASE STUDIES</a></li>
<li><a href="/dru/?q=node/4" title="Start Policy Review">REVIEW YOUR POLICY</a></li>
<li><a href="/dru/?q=node/3" title="What We Insure">PRODUCTS</a></li>
<li><a href="/dru/?q=node/1" title="The Silver Oak Insurance">ABOUT US</a></li>
<li class="active"><a href="/dru/?q=node/2" title="HOME" class="active">HOME</a></li>
</ul> 

There's your division id and unordered list id, just call it in style.css

tjay12’s picture

But if you scroll down in the source you will see that menu for sidebar is like this:
Which class should I call in style.css?

<!-- Sidebar -->
		  <div id="sidebar">
	  	      <div class="block block-user" id="block-user-1">
    
    <div class="content">
<ul class="menu">
<li class="leaf"><a href="/dru/?q=node/9" title="Our Link Partners">LINKS</a></li>
<li class="leaf"><a href="/dru/?q=node/8" title="Our Views">BLOG</a></li>
<li class="leaf"><a href="/dru/?q=node/7" title="Contact">CONTACT US</a></li>
<li class="leaf"><a href="/dru/?q=node/6" title="Forms &amp; Files">FORMS</a></li>
<li class="leaf"><a href="/dru/?q=node/5" title="cases">CASE STUDIES</a></li>
<li class="leaf"><a href="/dru/?q=node/4" title="Start Policy Review">REVIEW YOUR POLICY</a></li>
<li class="leaf"><a href="/dru/?q=node/3" title="What We Insure">PRODUCTS</a></li>
<li class="leaf"><a href="/dru/?q=node/1" title="The Silver Oak Insurance">ABOUT US</a></li>
<li class="leaf"><a href="/dru/?q=node/2" title="HOME" class="active">HOME</a></li>

</ul>
</div>
 </div>
 
	  </div><!-- End of Sidebar -->
anthonylicari’s picture

I got eager and posted the wrong thing. Good thing you caught it. :) So you just need to go down calling the hierarchy, starting with the sidebar then the block then the unordered list. What you were doing in system.css is customizing all unordered lists on the page. You want to be more specific so you need to make sure you are calling the specific division and classes. I've been on a kick recommending firebug today but if you use firefox I would recommend it, it will tell you everything you need to know about that element on the page.

anthonylicari’s picture


#sidebar {
background-color:#E0D2B9;
border-bottom:1px solid #404040;
border-right:1px solid #404040;
float:left;
margin:0pt;
padding:0pt;
width:18%;
}
#sidebar p {
padding-bottom:10px;
}
#sidebar h2 {
border-bottom:1px solid #DDDDDD;
color:#003167;
font-size:130%;
font-weight:bold;
margin-bottom:0.3em;
}
#sidebar menu {
font-family:Arial Narrow;
font-size:15pt;
font-weight:bold;
}

If you were trying there with the "menu" just change that to the block and the ul li.

nancydru’s picture

  /* Navigation */  
#block-user-1 {border:1px outset #000000;  background: #601010; color:#FFFFFF;}
#block-user-1 .menu {font-size:1.00em; color:#FFFFFF;}
#block-user-1 .leaf a {font-size:1.00em; color:#FFFFFF;}
#block-user-1 .collapsed a {font-size:1.00em; color:#FFFFFF;}
#block-user-1 .expanded {font-size:1.00em; color:#FFFFFF; background: maroon;}
#block-user-1 .expanded a {font-size:1.00em; color:#FFFFFF; background: maroon;}
#block-user-1 .active {border:2px double #FFAAFF; color:#FFFFFF;}  /* */

Nancy W.
Drupal Cookbook (for New Drupallers)
Adding Hidden Design or How To notes in your database

davemybes’s picture

Two bits of code in style.css will get this done. You should never edit system.css or any other Drupal stylesheet, because when you upgrade Drupal those stylesheets get overwritten. Always put CSS declarations in your theme's style.css file.

Change #1:

In style.css look for the following:

/*----------menu bar - primary links----------*/
#menu
{ 
...etc...

and change #menu to #menu, #block-user-1

Change #2:

Add this bit of code somewhere in style.css (maybe at the end):

#block-user-1 ul.menu li a {
	color:#404040;
	font-weight:600;
}

That should work nicely for you.

______________________________________________________________________________________________________
Need help? Check the FAQ and the Handbooks first.

______________________________________________________________________________________________________

tjay12’s picture

It worked!

Yes, I will try not to modify system files in future.

davemybes’s picture

Glad to help :)
______________________________________________________________________________________________________
Need help? Check the FAQ and the Handbooks first.

______________________________________________________________________________________________________

anthonylicari’s picture

It's always best to try and override something in Drupal before you edit the core files.

tjay12’s picture

Now if anyone can help me in reversing the order of my links in the left sidebar. As you can see my links on top are in different order but links for sidebar are in reverse order.

http://www.clickarug.com/dru/

wesleyw’s picture

I have a Menu Item/Block that I want to have highlighted in Red all the other items I want default is this actually possible? If so how would I do this? The menu item I want to change is News Items?

Wes

nancydru’s picture