Advanced II with Centered menu issue (getting vertical splitter on the left of Home)

[harley_m]

Hi guys,

I have only very recently purchased SD, and am very impressed thus far - except perhaps for the reskinning / skin design guide - which is making customisation pretty difficult! I run a very large non profit community website, and this cross over needs to come at the end of the month, so I am up against it time wise, and need your help!

I have centered the menu on the advanced II skin (i'm starting to get my head round things and it is far from impossible but I am still learning my way) and have hence hit upon a problem. There is no vertical 'splitter' (as there are on the right hand side of all menu items) on the left hand side... making the centered menu look wrong.

If someone could explain to me how these buttons are created (and where) and how I might be able to get such a vertical line (adv_navigation_2 is the image) on the left hand side of Home, as well as the right - I would be VERY grateful!


I very much hope to become a great deal more familiar with the system and come back to help others, but while I am still so fresh to this I need some backup! :)


Thanks so much in advance (no pun intended!)


Harley

[harley_m]

I've tried subdreamer support, but they simply told me to try here even though I told them I already had without any luck

I have to launch soon and this is a real problem - can anyone please help me?

Thanks so much


Harley

[abcohen]

post some code (or some links)

[harley_m]

Well - if I were to paste code in all you would have is a standard catagories.php, except that the menu is centered and if I were to provide a link all you would see if the menu as screenshot above.

This image might perhaps make it more clear. Above (in my first post) is the menu as it is now. This is what you get if you center the menu. notice the divider between home and forums is missing from the left hand side of the home 'button'. The image attached here is how I want it, it is photoshopped to show where I want another divider on the left hand side of home.

I have tried and tried to put in code, I have the right place in catagories.php but it keeps putting any image I try to place in there on a new line.

There must be some way of modifying the code to get a small divider image to sit to the left of the first menu item, but I am damned if I can find a way and would be so so grateful if someone could solve this.

In case it's useful here is the code snippet that builds the menu dynamically.

So yeah, in conclusion my first post shows how it is now, the image in this post shows how I need it.

Any ideas?


Thanks so much


Harley




<?php
// +---------------------------------------------+
// | Copyright © 2003 – 2005 Subdreamer |
// | http://www.subdreamer.com |
// | This file may not be redistributed. |
// +---------------------------------------------+

if(!defined('IN_SUBDREAMER'))
{
die("Hacking attempt!");
}

if($usehovermenu = $DB->query_first("SELECT categoryid FROM " . TABLE_PREFIX . "categories WHERE parentid != 0 LIMIT 1"))
{
echo "<script language=\"JavaScript\">
<!--
function wrap_root (text)
{
/*normal, hover, click*/
return ['<table cellpadding=0 cellspacing=0 border=0 class=width_100><tr><td class=width_100><table cellpadding=0 cellspacing=0 border=0 class=bullet_0><tr><td class=categorydefault>&nbsp; ' + text + ' &nbsp;</td></tr></table></td></tr></table>',
'<table cellpadding=0 cellspacing=0 border=0 class=width_100><tr><td class=bullet_1><table cellpadding=0 cellspacing=0 border=0 class=bullet_0><tr><td class=categoryhover>&nbsp; ' + text + ' &nbsp;</td></tr></table></td></tr></table>',
'<table cellpadding=0 cellspacing=0 border=0 class=width_100><tr><td class=width_100><table cellpadding=0 cellspacing=0 border=0 class=bullet_0><tr><td class=categorydefault>&nbsp; ' + text + ' &nbsp;</td></tr></table></td></tr></table>'
];
}

function wrap_parent (text, icon, hovericon)
{
/*normal, hover, click*/
return [['<table cellpadding=0 cellspacing=0 border=0 class=bullet_2><tr><td class=width_100><table cellpadding=0 cellspacing=0 border=0 class=bullet_6><tr><td class=a0>&nbsp; ' + text + ' &nbsp;</td></tr></table></td></tr></table>'].join(''),
['<table cellpadding=0 cellspacing=0 border=0 class=bullet_3><tr><td class=width_100><table cellpadding=0 cellspacing=0 border=0 class=bullet_7><tr><td class=a1>&nbsp; ' + text + ' &nbsp;</td></tr></table></td></tr></table>'].join(''),
['<table cellpadding=0 cellspacing=0 border=0 class=bullet_2><tr><td class=width_100><table cellpadding=0 cellspacing=0 border=0 class=bullet_6><tr><td class=a0>&nbsp; ' + text + ' &nbsp;</td></tr></table></td></tr></table>'].join('')
];
}

function wrap_child (text, icon, hovericon)
{
/*normal, hover, click*/
return [['<table cellpadding=0 cellspacing=0 border=0 class=bullet_2><tr><td class=a0>&nbsp; ' + text + ' &nbsp;</td></tr></table>'].join(''),
['<table cellpadding=0 cellspacing=0 border=0 class=bullet_3><tr><td class=a1>&nbsp; ' + text + ' &nbsp;</td></tr></table>'].join(''),
['<table cellpadding=0 cellspacing=0 border=0 class=bullet_2><tr><td class=a0>&nbsp; ' + text + ' &nbsp;</td></tr></table>'].join('')
];
}

[abcohen]

need to see the site... have snippets of code isnt helping, maybe it'll help someone else.

[Brent]

The advanced_2 skin is a complex skin, very hard to start learning with.




If you change your .bullet_0 to the below code in the menu.css file for advanced_2, you will sort of get what you are looking for but the inner items will have a bolder separator then the ending items. You could also remove the borders / separators all together if you wanted by taking out the border left/border right.


.bullet_0
{
width: 100%;
height: 27px;
border-left: 1px solid #485676;
border-right: 1px solid #485676;
white-space: nowrap;
}

There of course are better solutions out there.