CMS Made Simple Forums

Hi there,

I've been 'customizing' CMSMS for a few weeks now, and I'm very happy with the results sofar.. But there's one problem though: I want to change the menu, but don't know how I should do this.. And I can't find it in the manual or forums..  I've inserted the menu into my template like this:


  {bulletmenu collapse='1'}


Via CSS, i've customized it a little, through using the following code:

#menu a { margin: 10px 0px 0px 35px; color: #0E9A3B; text-decoration: none; border-bottom: 0px dotted #0E9A3B; }
#menu a:hover {  margin: 10px 0px 0px 40px; color: #069; border-bottom: 0px solid #0E9A3B; }
#menu ul { display: inline; list-style: none; padding: 0; }
#menu li { float: left; height: 33px; width: 144px; padding-bottom: 0px;
  background-image : url(images/menubg.jpg);}
 
But now, when a subitem appears in the menu, it is messing up my entire menu.. Example: http://www.realtones.cc/doelstellingen.html (Link that is wrong: 'Fietsen verkopen', especially in Firefox!)

My question is; how can i fix/prevent this? I just can't understand how the menu-manager works, or how i can customize it (besides through CSS)...  And I can't find a tutorial or something that tells me what to do.. So, can anyone help me? Thanks in advance!

there isn't enuf room for 'Fietsen verkopen' you have 35px of space on the left if you drop that down to 4px or something it works if you make the menu bigger it will work too but you have to change the content size, you also have
#menustrook {
float: left;
width:170px;
        background-color: #FDF7E2;
        background-image: url(img/menubg.gif); background-repeat: repeat-y; background-position: top left;
        height: 100%;
#content {
float: left;  might want to change to float:right
width:582px;
background-color: #FDF7E2;
padding: 10px;
        height: 100%;

  mark

Thanks for your help Mark.. I do realize that the size of the font is part of the problem, but what would be great is if you could tell me how to change the font-size of sub-list items (like 'Fietsen verkopen').. Is this where the menu-manager comes in? I simply can't find a decent tutorial, or something which tells me how to work with or implement the menu manager..

Thanks again, Thijs

The menu manager on a fresh install has file templates called things like 'bulletmenu.tpl' which are preset javascript, it looks like so,,

{* CSS classes used in this template:
.currentpage - The active/current page
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *}
{if $count > 0}

{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="" times=$node->depth-$node->prevdepth}
{elseif $node->depth prevdepth}
{repeat string="" times=$node->prevdepth-$node->depth}

{elseif $node->index > 0}
{/if}

{if $node->current == true}
url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}
{elseif $node->type == 'sectionheader'}
{$node->menutext}
{elseif $node->type == 'separator'}

{else}
url}"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}{/if}
{/foreach}

{repeat string="" times=$node->depth-1}

{/if}

nothing here to play with unless you need to put something in the list to mark it for later use,, that is another story,,
what you need to look at is the CSS,, in your CSS you have,,

#menustrook {
float: left;
width:170px;
        background-color: #FDF7E2;
        background-image: url(img/menubg.gif); background-repeat: repeat-y; background-position: top left;
        height: 100%;
}

#menu {width: 170px;
  background-image: url(img/menubgtop.jpg);
  background-position: top;
  background-repeat: no-repeat;
  font: normal 13pt 'Trebuchet MS', sans-serif; this is the size for font
  color: #0E9A3B;
  font-variant: none;
    text-align: left;
  padding: 8px 0px 0px 0px;
                  height: 100%;
  }
 
#hoogte{height: 100%;}

#menu a { margin: 10px 0px 0px 35px; color: #0E9A3B; text-decoration: none; border-bottom: 0px dotted #0E9A3B; }
#menu a:hover {  margin: 10px 0px 0px 40px; color: #069; border-bottom: 0px solid #0E9A3B; }
#menu ul { display: inline; list-style: none; padding: 0; }
#menu li { float: left; height: 33px; width: 144px; padding-bottom: 0px;
  background-image : url(images/menubg.jpg);}
 
#content {
float: left;
width:582px;
background-color: #FDF7E2;
padding: 10px;
        height: 100%;

this 35px is where i think you can make a change and get what you want, that pushes the text itself to the right, it's margin, in order it's 'top' 'right' 'bottom' 'left' so you have pushed your text '10px' down from the 'top' '0px' from the 'right' '0px' from the 'bottom' and finally '35px' from the 'left' pushing it so far from the left is cramming all your text against the right 'wall' so it 'wraps' back and ends up under the next word if you change it to,,


#menu a {margin: 10px 0px 0px 15px; color: #0E9A3B; text-decoration: none; border-bottom: 0px dotted #0E9A3B; }
#menu a:hover {margin: 10px 0px 0px 20px; color: #069; border-bottom: 0px solid #0E9A3B; }
#menu ul {display: inline; list-style: none; padding: 0; }
#menu li {height: 33px; width: 144px; padding-bottom: 0px; i dont think you need this, if you just take it out the words line up, but when you :hover it moves the text enuf to shove it against the 'wall' to make it wrap again
  background-image : url(images/menubg.jpg);} usually it's (uploads/images/menubg.jpg) in the main interface for your site if you look at 'content' you will see 'Image Manager' with it you can upload images to use.

i believe you will get what you want, if the attached img. is what you are looking for.

    mark

[attachment deleted by admin]