Hi Jonathon,
Welcome to the world of CMSMS.
It would be more helpful if you could post a link or more details rather than such a broad question.
It is certainly possible to implement the Pro16 menu into CMSMS, although I'm not sure it would cope with child menus/dropdowns very well.
Here's what we are going to do:
1. Create a new menu template. This will give us the correct html to style.
2. Create a new page template and tell it to use the new menu template.
3. Add a new stylesheet.
4. Assign stylesheet to template.
5. Upload the images.
6. Assign template to a page.
This was tested on v 1.4.1
1. Create new menu template.
Go to Menu Manager and add a new template on the database templates tab.
Call the template
simple_css_menu
Copy the below code into the template and submit.
Code: Select all
{* 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}
<ul class="pro16">
{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><a href="{$node->url}" class="current"{if $node->target ne ""} target="{$node->target}"{/if}> <b>{$node->menutext} </b></a>
{elseif $node->parent == true && $node->depth == 1}
<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> <b>{$node->menutext} </b></a>
{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}
{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />
{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> <b>{$node->menutext} </b></a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}
Go to Templates and add new template.
Call the template
menu_test
Copy the below code into the template and submit.
nb. I've used
number_of_levels='1' to ensure that child pages aren't shown.
Code: Select all
{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
{* Change lang="en" to the language of your site *}
<head>
<title>{sitename} - {title}</title>
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}
{metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}
{stylesheet}
{* This is how all the stylesheets attached to this template are linked to *}
</head>
</__body>
{* Start Navigation *}
{menu template='simple_css_menu' number_of_levels='1'}
{* End Navigation *}
{* Start Content *}
<div>
<h2>{title}</h2>
{content}
</div>
{* End Content *}
<__body>
</__html>
Go to Stylesheets and add new stylesheet.
Call the stylesheet
pro16
Copy the below code into the stylesheet, tick the
screen tickbox and then submit.
Code: Select all
/*Credits: CSSpplay */
/*URL: http://www.cssplay.co.uk/menus/pro_five */
/*
.preload16 {background: url(pro16/pro16_2.gif);}
.preload16a {background: url(pro16/pro16_2a.gif);}
*/
.pro16 {padding:0 0 0 1em; margin:0; list-style:none; height:43px; position:relative; background:transparent url(uploads/images/pro16/pro16_back.gif) repeat-x left top; font-size:11px;}
.pro16 li {float:left; height:43px;}
.pro16 li a {display:block; float:left; height:40px; line-height:35px; color:#888; text-decoration:none; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 10px; cursor:pointer; background:url(uploads/images/pro16/pro16_0a.gif) no-repeat;}
.pro16 li a b {float:left; display:block; padding:0 60px 0 0; background:url(uploads/images/pro16/pro16_0.gif) no-repeat right top;}
.pro16 li.current a {color:#000; background:url(uploads/images/pro16/pro16_2a.gif) no-repeat;}
.pro16 li.current a b {color:#000; background:url(uploads/images/pro16/pro16_2.gif) no-repeat right top;}
.pro16 li a:hover {color:#000; background: url(uploads/images/pro16/pro16_2a.gif) no-repeat;}
.pro16 li a:hover b {color:#000; background:url(uploads/images/pro16/pro16_2.gif) no-repeat right top;}
.pro16 li.current a:hover {color:#000; cursor:default;}
Go to Templates and click the css speech bubble next to your template (menu_test)
Select and add your stylesheet (pro16) from the drop down.
5. Upload the images.
Upload the 5 images required images to uploads/images/pro16. I used file manager to do this.
6. Assign template to a page.
Go to Pages, open a page (e.g Home) and assign your new template(menu_test) to the page.
Submit and test!
Done.
Does that work?
Bob