I've not dug into the code for that stuff, but perhaps checking out a skin that uses that method and copying what they do is in order? One file you'll find to be your friend in this will be skins/yourskin/_bloglist.php - in conjunction with your style sheet. AFAIK the trick is done using an unordered list and a couple of images.

Anyway you can wrap your bloglist items in span tags using the various items you get to define in the top section of your _bloglist.php file. $blog_item_start and $blog_item_end are probably where you want to tinker.

I had a quick look at the nautica-Gold skin http://skins.b2evolution.net/a.php?skin=nautica2lgold

The SPAN element they're using in the blog-list is basically a technique that allows one to use TWO background images in the same space (as CSS only allows for one).

Actually, at first blush, I don't see why it needs to be that complicated. One could do away with the SPAN and provide just a single CSS rollover, I would think.

Anyway ... the trick would be to configure your bloglist parameters so that it spits out a similar HTML for your own tabs (starting out from whatever skin you wanted).

For the nautica-gold CSS, you'd need to have the bloglist HTML end up looking like:

<div id="menu-top">
<ul>
<li><a href="http://yoursite.com/dir/stub1.php" class="" title="whatever"><span>Blog Name #1</span></a></li>
<li><a href="http://yoursite.com/dir/stub2.php" class="" title="whatever"><span><strong>Blog Name #2 (for the blog yer on)</strong></span></a></li>
.
.
.
<li><a href="http://yoursite/dir/stubN.php" class="" title="whatever"><span>Blog Name #N</span></a></li>

</ul>
</div>

You would need to download the Nautica-Gold skin and use the images that make up the tab CSS rollovers (img/menuright.png and img/menuleft.png).

Then just jam in the CSS that Nautica-Gold uses to generate up the effect.

#menu-top {
	overflow: hidden;
}

#menu-top ul {
	margin:0;
	padding: 1em 0 0 0;
	list-style: none;
	font-size: 85%;
	float: left;
	padding-left: 20px;
}

#menu-top li {
	display: inline;
	float: left;
}

#menu-top a {
	float: left;
	background:url(img/menuleft.png) no-repeat left top;
	margin:0;
	padding:0 0 0 4px;
	text-decoration:none;
	line-height: 1.5em;
}

#menu-top a span {
	background: transparent url(img/menuright.png) no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#5b8fbe;
	display: block;
	float: left;
	cursor: pointer; 
}
#menu-top a span strong {
	color: #444;
	color: #1B4F7E
}
 #menu-to a:hover { background-position:0% -42px; }
 #menu-top a:hover span { background-position:100% -42px; }

(modified slightly to get rid of some of the other stuff used for Nautica-Gold.)

Should work ... then you can play from there. (Probably need to push/move the UL element around a bit to get the bunch to line up where you want)

Hope this helps.

Hi guys,

I have been trying to add this great nav-bar to a blog I'm working on here: http://www.tophealthspot.com. I've played with the custom.css file and the _bloglist.php file for the last 5 hours and I'm useless (I tried to follow the instructions above to no avail). Basically, I can't get this nav-bar to work... (I know I suck).

This is my .css file:

/* Designed by François PLANQUE - http://fplanque.net/ */

@import url(../../rsc/css/basic.css);	/* Import basic styles */
@import url(../../rsc/css/img.css);	/* Import standard image styles */
@import url(../../rsc/css/blog_elements.css);	/* Import standard blog elements styles */
@import url(../../rsc/css/forms.css);	/* Import default form styles */
@import url(../../rsc/css/comments.css);	/* Import default comment styles */

body {
	background: #fff url(img/bg.png) repeat-y 50% 0;
	padding: 0px;
	margin: 0px;
	color: #000;
	font: 84% Arial, Helvetica, sans-serif;
}

a {
	color: #569;
}
a:visited {
	color: #000;
}
a:hover {
	color: #9ae;
}

h1#pageTitle a {
	color: #fff;
	text-decoration: none;
}
h1#pageTitle a:hover {
	text-decoration: underline;
}

h2 {
	color: #78a;
	font-size: 180%;
	margin: 0;
}
h3 {
	color: #78a;
	font-size: 120%;
}
h4 {
	color: #78a;
	font-size: 110%;
}

table.invisible
{
	margin: 1ex;
	border-collapse: collapse
}
table.invisible td
{
	padding: 0ex 1ex;
}
td.right
{
	text-align: right;
}
div#pageFooter {
	clear: both;
	background-color: #fff;
	width: 738px;
	margin: 0 auto;
	padding: 0 0 1ex 0;
}
p.baseline {
	border-top: 1px solid #ddd;
	text-align: center;
	font-size: 74%;
	color: #999;
	padding: 1ex;
	margin: 0;
}
hr {
	height: 0;
	border: 0;
	border-top: 1px solid #78a;
}

div#wrapper {
	background: #fff url(img/bg_content.gif) repeat-y 0 0;
	width: 740px;
	margin: 0 auto;
	padding: 0;
}

div.pageHeader {
	padding: 1ex;
	margin: 0 1px 1ex 1px;
	border-bottom: 1px solid #ddd;
	text-align: center;
	background: #78a;
}

h1#pageTitle {
	font-size: 270%;
	font-weight: bold;
	margin: 0;
	padding: 0;
}

ul#bloglist {
	background-color: #fff;
	border-bottom: 1px solid #000;
	margin: 0 1px;
	padding: 0;
	list-style-type:none;
	padding: .5ex 0;
}
ul#bloglist li {
	border-right: 1px solid #000;
	display: inline;
	padding: .5ex 1em;
}

a.BlogButton,
a.BlogButtonCurr {
	font-weight: bold;
	text-decoration: none;
}
a.BlogButton {
	color: #000;
}
a.BlogButton:hover {
	text-decoration: underline;
	color: #9ae;
}
a.BlogButtonCurr,
a.BlogButtonCurr:visited {
	color: #78a;
}
a.BlogButtonCurr:hover {
	text-decoration: underline;
	color: #9ae;
}


.pageSubTitle {
	color: #fff;
	letter-spacing: 4px;
	text-align: center;
	vertical-align: middle;
	border: 0px;
	padding-right: 6px;
	padding-top: 6px;
	padding-bottom: 4px;
	padding-left: 6px;
	font: 109% Arial, Helvetica, sans-serif;

}
div.stats{
	float: right;
	padding-right: 1px;
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 0px;
}

/* Styles for main area (left) */
h2 {
	margin: 1ex;
	border-bottom: 1px solid #78a;
}

/* Styles for posts */
.bPosts {
	float: left;
	width: 480px;
	overflow: hidden;
	/* background: #090;*/
}
div.action_messages {
	margin: 0 2ex;
}
.bPost, .bPostpublished
{
	clear: both;
	margin: 0 2.5ex;
	padding: 0;
	border-bottom: 1px solid #ddd;
	/* border: 1px solid #78a; */
}
.bSmallHead {
	font-size: 80%;
	color: #999;
	margin: 2ex 0 1ex 0;
}
.bTitle {
	color: #78a;
	margin: 1ex 0;
}
.bText {
	margin-top: 0px;
	margin-bottom: 0px;
}
.bSmallPrint
{
	clear: both;
	color: #999;
	font-size: 80%;
	margin: 1ex 0 2ex 0;
}

input.bComment,
textarea.bComment
{
	background-color: #eee;
	border: 1px solid #ccc;
	width: 97%;
	padding: 2px;
	margin: 0ex;
}
select.bComment  /* Used by the profile form */
{
	background-color: #eee;
	border: 1px solid #ccc;
	padding: 1px;
	margin: 0ex;
}


/* Styles for stats */
div.statbloc
{
	float: left;
	width: 44%;
	margin: 0 0 2ex 1.5ex;
	border: 1px solid #78a;
}
div.statbloc h3
{
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	color: #FFFFFF;
	text-align: center;
	background: #78a;
	padding: 1ex;
}

input.submit,
input.preview,
input.reset {
	background-color: #ddd;
	color: #78a;
	border: 1px solid #000;
	font-weight: bold;
	padding: 1px;
}

input.submit:hover,
input.preview:hover {
	color: #000;
}

/* Styles for sidebar (right) */
.bSideBar {
	width: 259px;
	float: right;
	overflow: hidden;
	/* background: #900; */
}
.bSideItem {
	margin: 2ex;
	padding: 0 0 2ex 0;
	border-bottom: 1px solid #ddd;
}
.bSideItem ul {
	margin-left: 8px;
	padding-left: 8px;
	margin-top: 8px;
	margin-bottom: 8px;
	list-style-type:square;
}
.bSideItem ul ul{
	margin-left: 8px;
	padding-left: 8px;
	margin-top: 0px;
	margin-bottom: 0px;
}
.bSideItem form {
	margin-top: 0px;
	margin-bottom: 0px;
}
.dimmed
{
	color: #aaa;
	font-size: 84%;
}
input.SearchField
{
	background-color: #eee;
	border: 1px solid #ccc;
	padding: .5ex;
	width: 96%;
	margin: 0ex;
}

/* Calendar: */
caption.bCalendarCaption {
	border: 1px solid #ccc;
	background-color: #eee;
	border-bottom: 0;
}
table.bCalendarTable {
	border: solid 1px #ccc;
	border-collapse: separate;
}
table.bCalendarTable tfoot td {
	background-color: #eee;
	border-top: 1px solid #ccc;
}
table.bCalendarTable tfoot a {
	text-decoration: none;
}
table.bCalendarTable tfoot a:hover {
	background-color: #78a;
	color: #fff;
}
th.bCalendarHeaderCell {
	color: #abc;
}
#bCalendarToday {
	background-color: #bce;
}

and this is my _bloglist.php file:

<?php  
    /**  
     * This is the template that displays the links to the available blogs  
     *  
     * This file is not meant to be called directly.  
     * It is meant to be called by an include in the _main.php template.  
     *  
     * b2evolution - {@link http://b2evolution.net/}  
     * Released under GNU GPL License - {@link http://b2evolution.net/about/license.html}  
     * @copyright (c)2003-2006 by Francois PLANQUE - {@link http://fplanque.net/}  
     *  
     * @package evoskins  
     */  
    if( !defined('EVO_MAIN_INIT') ) die( 'Please, do not access this page directly.' );  

if( ! $display_blog_list )  
{ // We do *not* want the blog list to be displayed  
    return;  
}  

# this is what will start and end your blog links  
if(!isset($blog_list_start)) $blog_list_start = '<ul id="bloglist">';  
if(!isset($blog_list_end)) $blog_list_end = '</ul>';  
# This is what will separate items in the list  
if(!isset($blog_list_separator)) $blog_list_separator = '';  
# this is what will separate your blog links  
if(!isset($blog_item_start)) $blog_item_start = '<li>';  
if(!isset($blog_item_end)) $blog_item_end = '</li>';  
# This is the class of for the selected blog link:  
if(!isset($blog_selected_link_class)) $blog_selected_link_class = 'BlogButtonCurr';  
# This is the class of for the other blog links:  
if(!isset($blog_other_link_class)) $blog_other_link_class = 'BlogButton';  
# This is additionnal markup before and after the selected blog name  
if(!isset($blog_selected_name_before)) $blog_selected_name_before = '';  
if(!isset($blog_selected_name_after)) $blog_selected_name_after = '';  
# This is additionnal markup before and after the other blog names  
if(!isset($blog_other_name_before)) $blog_other_name_before = '';  
if(!isset($blog_other_name_after)) $blog_other_name_after = '';  
# This is the blogparam that will be displayed as the name:  
if(!isset($blog_name_param)) $blog_name_param = 'shortname';  
# This is the blogparam that will be displayed as the link title:  
if(!isset($blog_title_param)) $blog_title_param = 'name';  


$blog_links = array(); // we collect all links first, to easily implode them  

for( $curr_blog_ID = blog_list_start();  
            $curr_blog_ID != false;  
             $curr_blog_ID = blog_list_next() )  
{  
    if( !blog_list_iteminfo( 'in_bloglist', false ) )  
    { // don't show  
        continue;  
    }  
    $blog_link = $blog_item_start;  
    if( $curr_blog_ID == $blog )  
    { // This is the blog being displayed on this page:  
        $blog_link .= '<a href="';  
        $blog_link .= blog_list_iteminfo('blogurl', false);  
        $blog_link .= '" class="'.$blog_selected_link_class.'" title="';  
        $blog_link .= format_to_output( blog_list_iteminfo($blog_title_param, false), 'htmlattr' );  
        $blog_link .= '">';  
        $blog_link .= $blog_selected_name_before;  
        $blog_link .= format_to_output( blog_list_iteminfo($blog_name_param, false ), 'htmlbody' );  
        $blog_link .= $blog_selected_name_after;  
        $blog_link .= '</a>';  
    }  
    else  
    { // This is another blog:  
        $blog_link .= '<a href="';  
        $blog_link .= blog_list_iteminfo('blogurl', false);  
        $blog_link .= '" class="'.$blog_other_link_class.'" title="';  
        $blog_link .= format_to_output( blog_list_iteminfo($blog_title_param, false), 'htmlattr' );  
        $blog_link .= '">';  
        $blog_link .= $blog_other_name_before;  
        $blog_link .= format_to_output( blog_list_iteminfo($blog_name_param, false), 'htmlbody' );  
        $blog_link .= $blog_other_name_after;  
        $blog_link .= '</a>';  
    } // End of testing which blog is being displayed  
    $blog_link .= $blog_item_end;  

    //use blog_ID as a numeric key for custom sorting later on.  
    //  We could also use $blog_name_param in place of 'blog_ID' but the ID is a  
    //  safer value as the name of a blog is more likely to change over time.  
    $blog_links[blog_list_iteminfo('ID', false )] = $blog_link;  
}  

//Custom blog sorting  
//  Create new array to work with  
$sorted_blog_links = array();  

//  Add a few blogs in custom order based on the key used above (use isset to prevent errors in case a   
//    blog is not available. We also want to unset/remove the sorted blog from the original array.  
if (isset($blog_links['2'])) { $sorted_blog_links[] = $blog_links['2']; unset($blog_links['2']); }  
if (isset($blog_links['6'])) { $sorted_blog_links[] = $blog_links['3']; unset($blog_links['3']); }  
if (isset($blog_links['6'])) { $sorted_blog_links[] = $blog_links['6']; unset($blog_links['6']); }  
if (isset($blog_links['8'])) { $sorted_blog_links[] = $blog_links['8']; unset($blog_links['8']); }  
if (isset($blog_links['11'])) { $sorted_blog_links[] = $blog_links['11']; unset($blog_links['11']); }  
if (isset($blog_links['7'])) { $sorted_blog_links[] = $blog_links['7']; unset($blog_links['7']); }  
if (isset($blog_links['10'])) { $sorted_blog_links[] = $blog_links['10']; unset($blog_links['10']); }
if (isset($blog_links['5'])) { $sorted_blog_links[] = $blog_links['5']; unset($blog_links['5']); }  
if (isset($blog_links['9'])) { $sorted_blog_links[] = $blog_links['9']; unset($blog_links['9']); }  

//  If there are any blogs remaining in $blog_links then add them to the end off the sorted blog list  
//    This prevents new blogs from going missing if they haven't been added to the above list yet.  
if (sizeof($blog_links)) {  
    $sorted_blog_links = $sorted_blog_links + $blog_links;  
    //clean up old blog_links  
    unset($blog_links);  
}  

// Output:  
echo $blog_list_start;  
echo implode( $blog_list_separator, $sorted_blog_links );  
echo $blog_list_end;  


/*  
 nolog */  
?> 

Does anyone have any idea what I need to add where? Feel free to abuse me for being a cretin...

Bump...

9 minutes isn't a huge amount of time to wait for a reply :|

¥

Sorry