Hi to all,
After some 2 weeks of frustration i am now lost moreso than when i started.
What i would like to do is use Stu Nichols Pro16 css menu on my website it can be found here http://www.cssplay.co.uk/menus/pro_horizontal.html its towards the bottom of the page.
Some help in how i can make this work would be greatly appreciated as i am now out of idea's and i am finding the whole menu thing very hard to get my head around.
I have read the forum posts and also menu themes tutorials but this has just confused me further in regard to menus.
Willing to make a small donation to SMSMS if some one can show me step by step how to include this menu into my site.
Thanking everyone in advance for any constructive help,
Jonathon
[Solved] Implimenting CSS Menu - Stu Nichols Pro16
[Solved] Implimenting CSS Menu - Stu Nichols Pro16
Last edited by Yazoo2000 on Wed Oct 29, 2008 6:15 pm, edited 1 time in total.
-
SideshowBob
- Forum Members
- Posts: 80
- Joined: Thu Sep 13, 2007 10:50 am
Re: Implimenting CSS Menu - Stu Nichols Pro16
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.
2. Create a new page template
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.
3. Add a new stylesheet.
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.
4. Assign stylesheet to template.
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
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
Last edited by SideshowBob on Fri Oct 24, 2008 1:34 pm, edited 1 time in total.
Re: [Solved] Implimenting CSS Menu - Stu Nichols Pro16
Many thanks Bob,
Not had chance to test as yet but will this week.
As promised i have made a donation via PayPal (2M1272168F7132525) confirmation number.
Kind regards
Jonathon
Not had chance to test as yet but will this week.
As promised i have made a donation via PayPal (2M1272168F7132525) confirmation number.
Kind regards
Jonathon
