Page 1 of 1

Need help getting head around menu

Posted: Fri Oct 10, 2008 10:33 am
by Mowen
I am not designer, but Im trying to make a website from cmsms.

I've figured a lot of stuff out on my own and using the documentation but I just can't seem to grip the menu.

What I want is just the simple horizontal menu across the top of the page under the site logo. I don't want the feature that opening up sub menus when I hover over them and I don't want them changing colour. What I do want is to have new content pages be added to the menu automatically and instead of plain text, use a gif image of the word.

So lets say I make a new page called 'example', on the menu which already has 'home' on it, it adds 'example' to it (the menu seems to do this already).

What I would usually do in this situation is find the code that pulls the conentent page names and puts them into the menu, and instead of just the page name write img src="/images/{page name}gif" and make sure I make a gif called home.gif and example.gif into a folder somewhere so instead of just printing the word 'home' it would display my home image.

I can't find where the cms pulls the names of pages and lays them out though. I found one bit of code that changes the font colour in Navigation: CSSMenu - Horizontal

I'm sorry if I haven't explained what I mean very well, but to sum up I just want to make a menu that runs horizontally, has 1 simple background colour and instead of page names in text, pulls pre made images from somewhere.

What I'm at it, where can I change what variables are? In the news templates Im trying to change things around and I wrote:

"By: {$author_label}{$entry->author}" which obviously gave me the result on the webpage "By: Posted by: Mowen"

Is there a place to change what certain things say? Like, change what will appear when I put {$author_label}

Re: Need help getting head around menu

Posted: Sat Oct 11, 2008 10:51 am
by SideshowBob
Hi Mowen,

Welcome to the world of CMSMS...

I think I understand what you are asking for here, it's pretty common to replace text links with images.

However I believe the best way to do this is to set a unique class on each link and use css image replacement techniques. This keeps nice semantic code and deals with accessibility issues.

The below menu template add the page alias (pagename) as a class to each link:

Code: Select all

{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *} 

{if $count > 0}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->current == true}
<li class="currentpage {$node->alias}"><h3><dfn>Current page is {$node->hierarchy}: </dfn>{$node->menutext}</h3>

{elseif $node->parent == true}
<li class="activeparent {$node->alias}"><a class="activeparent" href="{$node->url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}

{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />

{else}
<li class="{$node->alias}"><a href="{$node->url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}{if $node->target != ''} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>

{/if}

{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}


I've only tested it for one level menus so I don't know what will happen when more levels get added.

As to your news question: If you want to change labels or other non variable type things in CMSMS then it's usually in a language file. News language (Eng) file is : /modules/News/lang/en_US.php.

Hope that helps,
Bob

Re: Need help getting head around menu

Posted: Sat Oct 11, 2008 11:12 am
by Dee
Menus in CMS Made Simple are generated with the Menu Manager module.
It has an extended help page: in the admin console menu Layout -> Menu Manager (click the help link for the module help).
I'd suggest experimenting with the possible module parameters and the menu templates.
It's possible to have the images dynamically generated using the Image Text or TruetypeText modules.

Regards,
D

Re: Need help getting head around menu

Posted: Wed Oct 15, 2008 1:18 pm
by SideshowBob
Hey Dee,

Thanks for the links to the image modules, I didn't know about them. Love it when I find something new!

Cheers,
Bob