August 17, 2007
Horizontal Label Display:SOS!
I have always wanted a horizontal label display.
UPDATED:
Whenever I tried to implement it something never seemed to work. Either the display was not exactly linear but zigzag or the labels blinked when i hovered on them. So for a while i gave up this dream. but now i got rid of the bugs and here is the updated , works-in all browsers (including IE) -horizontal label display.
It was only when I saw on a couple of blogs that Ramani had achieved this, the yesterday i saw Belajimez had a similar function but using LinkList.
I figured this was easier to blogopsy and what i have come up with you can see here in the different browsers. THE DISPLAY WORKS FINE IN ALL THESE BROWSERS
Iceweasel.....Firefox....Konqueror......Firefox.....and now IE too!
Here is what I did after the blogopsy:
<b:section class='header' id='header' maxwidgets='1 showaddelement='no'>
changed it to:
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
Save.
Move this
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
from under this section:
<b:section class='sidebar' id='sidebar' preferred='yes'>
To under this section:
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
NOTE: You can change the function if you like to a linkList. Just replace all the Label1 with LinkList1 or Label# with any LinkList# if you have multipe linklists or labellists.
CSS body:
#Label1 h2 {display:none;}
#Label1 ul {
margin: 0px; padding: 0px; float: left; width: 98%;
font--family: Tahoma; font-size:13px; font-weight: bold; border-bottom: 1px solid #50575F;
background: black url(http://kundaistreet.googlepages.com/iddle.gif) center center repeat-x;
padding: 7px;
}
#Label1 li {
display: inline;
list-style:none;
padding: 7px
}
#Label1 a:hover {
color: #FFFFFF !important;
background: transparent url(http://kundaistreet.googlepages.com/active.gif) center center repeat-x;outline:none;
padding:7px;
}
Then paste this code (or your edited version) in the CSS body and save...







No comments yet