March 25, 2008

Horizontal Label Bar Solved!

I have been working on a horizontal label bar for sometime now

I always hit a snag when it came to the display properties but that is now all sorted

To have a similar kind of label bar or navigation bar as the one above first you must modify the header-wrapper id so that it looks like below.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE(Header)' type='Header'/>
</b:section>
<div id='header-right'>
<b:section class='header' id='header-right' showaddelement='yes'>
</b:section>
</div>
</div>
After this then find the header-wrapper code and header code and replace them (red) with the ones below and add the new header-right code as shown below(black)

#header-wrapper {
width: 950px;
border: 1px solid #000000;
margin:0 auto 10px;
border:1px solid $bordercolor;
clear: both;
word-wrap: break-word;
overflow: hidden;
}

#header {
width: 180px;
float: left;
margin: 5px;
border: 1px solid #;
color:$pagetitlecolor;
padding: 5px 5px 5px;
}

#header-right {
width: 700px;
float: right
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header-right ul {
background-position: center;
background: black url(http://kundaistreet.googlepages.com/iddle.gif) center center repeat-x;
padding:7px;
}
#header-right ul li {
display: inline;
padding:2px;
}
#header-right a {
color: #e6e6e6 !important;
}
#header-right a:hover {
color: #FFFFFF !important;
background: transparent url(http://kundaistreet.googlepages.com/active.gif) center center repeat-x;outline:none;
padding:7px;
}

Save the template after inserting the second block of code (!important) and navigate to page elements. Move the labellist widget or your linklist widget to the header bar and save.

Your chosen widget list will now show inline as a horizontal bar

3 comments:

VampireXxX said...

Hi, not working for me. Tried several times but the label bar didn't work so i install neo 2 and work like a charm.
Anyway i compare the one in the post and the xml, seems a bit different. Maybe that's why it didn't work on my blog, no ?

Thanks

diddy47 said...

hi...i think i know why it might have not worked, the way the post appears. There is more code below the first block, the way the 5th paragraph concludes may be misleading, if that was not the case tell me

VampireXxX said...

I think so too, i compared the code with your page source and also with ebo neo2, seems a bit different. I still curious about that and will test it again in my test blog.