PLEASE HELP !, Sidebar Block Link Icons TRIED almost all topics
werushka - March 27, 2008 - 01:04
I am sorry for shouting but I am seeing Drupal users being able to establish Block Menu link icons on the sidebar but each attempt I try I fail with a blank white page...
I have thried
http://www.nicklewis.org/node/843
and couple of more but even I follow the steps I I always get white page...
I would REALLY appreciate any help...
I also tried this one
I also tried this one http://drupal.org/node/77959
I don't understand why nobody helps??
You want icons next to your
You want icons next to your menu links in the sidebars? If so, this can be done in the style.css. If you use Firefox's Firebug add-on you can see the HTML version of your drupal site. In this HTML version you will see that all menu links have their own div id, like
<div id="menu-1" ...in your style.css, you would write:#menu-1{background: #0000ff url(icon.png) no-repeat scroll left center;
}
The # relates to the id part of the div id tag, a . would relate to a class. menu-1 is a call to every instance on the page called menu-1 to be styled using this style. so #menu-1 is every instance of
<div id="menu-1"...#0000ff is a hexadecimal code for the color blue, url(icon.png) is the url address of your picture you want to use as your icon (if the picture is in the same directory as the style.css you dont need any trails, if it is on another site you need a full URL:www.mysite.com/icon.png), no-repeat means that the image is not repeating, scroll dont worry about it, left means the image is aligned left on the x-axis, center means that the image is align center on the y-axis.or if there more than 1 instance of #menu-1 you can be more specific and use #sidebar-left #menu-1 {...
This would mean that you are styling #menu-1 within #sidebar-left and all other instances of #menu-1 will not be effected by this style.
to have a separate mouse over style simply add :hover (#menu-1:hover). to style an active menu link add .active (#menu-1.active).
Hope you find this helpful
-Nick
I truly appreciate you
I truly appreciate you answer and detailed explanation.
I control the look of sidebar block with the following code:
#block-menu-73 .block {
margin: 12px 0 10px 0;
width: 250px;
}
#block-menu-73 .block-top {
background: url('images/ActaBlockTopYorumlanan.gif') top center no-repeat;
height: 36px;
}
#block-menu-73 .block-top h2 {
margin-top: 0;
margin-right: 4px;
margin-bottom: 0;
margin-left: 4px;
padding-top: 7px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 10px;
color: #FFFFFF;
}
#block-menu-73 .block-content {
background: url('images/ActaBlockContent.gif') center repeat-y;
padding-top: 2px;
padding-right: 8px;
padding-bottom: 2px;
padding-left: 15px;
font-size: 18px;
color: #000000;
letter-spacing: 2px;
}
#block-menu-73 .block-bottom {
background: url('images/ActaBlockBottom.gif') bottom center no-repeat;
height: 9px;
line-height: 9px;
}
#block-menu-73 .item-list ul li { /* Standardize the display of menues */
margin: 0 0 0.25em 0.5em;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 17px;
line-height: 20px;
}
#block-menu-73 li.leaf {
list-style-image: none;
list-style-type: none;
}
#block-menu-73 .menu-1-1-73 {
margin-left: 30px;
background-attachment: scroll;
background-image: url(images/acil.png);
background-repeat: no-repeat;
background-position: left center;
}
and in the page source I see this part as
<div class='block-content'>
<div class="content">
<ul class="menu">
<li class="leaf"><a href="/category/1/6">Business</a></li>
<li class="leaf"><a href="/category/1/1">Media</a></li>
<li class="leaf"><a href="/category/1/2">Technology</a></li>
<li class="leaf"><a href="/category/1/5">Energy</a></li>
</ul>
</div>
As you can see there is no menu-1 etc instance on the code that I can edit, I tried menu-category-1-6 but it does not work?
please disregard the below
please disregard the below code on the previous code I was just trying variations.
#block-menu-73 .menu-1-1-73 {margin-left: 30px;
background-attachment: scroll;
background-image: url(images/acil.png);
background-repeat: no-repeat;
background-position: left center;
}
i solved it let me know if
i solved it let me know if you have problems...