adding a css horizontal navigation bar to a custom template

Overlander · Post by **Overlander** » Thu Nov 24, 2005 9:42 pm

hi
I am trying to add a css navigation bar to a custom template.
I've created the custom template by cut and pasteing the html from dreamweaver.
I've added the forms, layout, tools, typography, default cssmenu horizontal, layout css menu 1 col and I have the module EllNav installed.
Yet no navigation bar appears
below is the source code, any suggestions on what i am doing wrong?

Templates

CMS Administration Console

Main
ContentPagesFile ManagerImage ManagerNews
LayoutTemplatesStylesheetsHTML Blobs
Users & GroupsUsersGroupsGroup AssignmentsGroup Permissions
ExtensionsModulesTagsUser-defined TagsTinyMCE
Site AdminUser PreferencesGlobal SettingsManage BookmarksAdmin Log
View Site
Logout

Layout » Templates

Bookmarks

1. Add Bookmark

2. Manage Bookmarks

All Pages Modified!Current Templates
TemplateDefault
Active

Alternate

Set All Pages

Default

Set All Pages

Navtop CSSMenu.htm

Set All Pages

orange

Set All Pages

Add New Template

« Back to Menu

CMS Made Simple is free software released under the General Public Licence.

westis · Post by **westis** » Thu Nov 24, 2005 10:34 pm

Hi Overlander,

Could you post the code in your template? Which template are you using? You have attached the stylesheets for CSSMenu (layout cssmenu 1 col and default cssmenu horizontal), but not the nav-horizontal stylesheet that you should attach instead if you're using the EllNav menu. Is it CSSMenu or EllNav you want to use?

See examples of how CSSMenu (drop-down) and EllNav work here.

This is the template code used for the horizontal menu that will be included as one of the default templates with the 0.11 release, that is using EllNav (navtop + 2col, although it has been renamed):

Code: Select all

<!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">
<head>


<!-- Type the title of your site here -->

<title>Title of your page here</title>
{stylesheet}
</head>

</__body>

<div id="page">

   <div id="header" class="clearfix">
                     

   </div><!-- end header -->

      <div id="menu_horiz">
         <div id="wrapper">
         {cms_module module='EllNav' horizontal=1 toponly=1}
         </div>

      </div>

   <div class="breadcrumbs">
        {breadcrumbs delimiter='»' initial='1'}
    </div>

   <div id="content" class="clearfix">

      <div id="main">
         <h2>{title}</h2>
         {content}
      </div>

   </div><!-- end content -->


   <div id="footer" class="clearfix">
      <p>© Copyright 2005 Nobody</p>
   </div><!-- end footer -->

</div><!-- end page -->


<__body>
</__html>

The stylesheet for the menu (using EllNav 0.7) is nav-horizontal and looks like this:

Code: Select all

/* NAV */

    * html div#menu_horiz {
        /* hide ie/mac \*/
        height: 1%;
        /* end hide */
    }
    div#menu_horiz {
      background-color: #ECECEC;
      width: 100%;
      margin: 0;
      text-align: center;
    }
    div#menu_horiz ul {
        margin: 0;
        padding: 0;
        list-style: none;
        border-bottom: 1px solid #C0C0C0;
        border-left:  1px solid #C0C0C0;
    }
    div#menu_horiz li {
        float: left;
        display: inline;
        list-style: none;
        margin: 0 ;
        border-right: 1px solid #C0C0C0;
    }
    div#menu_horiz li a {
        border-right: none;
    }
    div#menu_horiz a,
    div#menu_horiz a:link,
    div#menu_horiz a:active,
    div#menu_horiz a:visited {
        display: inline-block;
        padding: 5px 10px 5px 10px; 

        /* hide from ie/mac \*/
        display: block;
        /* end hide */

        text-decoration: none;
        margin: 0;
        color: #18507C;
        background: #ECECEC;
    }
#menu_horiz li a:hover {
	background-color: #abb0b6;
}
    div#menu_horiz .active {
        display: inline-block;

        /* hide from ie/mac \*/
        display: block;
        /* end hide */
        
	background-color: #abb0b6;
    }

    div#menu_horiz .current a,
    div#menu_horiz .current a:link,
    div#menu_horiz .current a:active,
    div#menu_horiz .current a:visited,
    div#menu_horiz .current a:hover,
    div#menu_horiz .active a,
    div#menu_horiz .active a:link,
    div#menu_horiz .active a:active,
    div#menu_horiz .active a:visited,
    div#menu_horiz .active a:hover 
{
	background-color: #abb0b6;
    }
/* END NAV */

Also, attach layout-navtop-2col or layout-navtop-1col INSTEAD of layout-CSSMenu-1col.

If it's rather CSSMenu that you want to use, then you need to upgrade to CMSMS 0.11 beta5 if you are going to use these templates (as that's the version the stylesheets are designed for). Then the latest released CSSMenu version is also included. Let me know if it's CSSMenu that you're after and I can post those templates and stylesheets.

But hopefully v. 0.11 should be released any day now, just some translations that we're waiting for. Then these templates and stylesheets will be included with the default installation.

Overlander · Post by **Overlander** » Wed Nov 30, 2005 4:27 am

Thanks for your replies
I think I will just wait until Friday's .11 release as I want to use a CSS menu.
I still wish to use a custom template so will test such Friday...for now I will stick to my dreamweaver template

CMS Made Simple Forums

adding a css horizontal navigation bar to a custom template

adding a css horizontal navigation bar to a custom template

Re: adding a css horizontal navigation bar to a custom template

Re: adding a css horizontal navigation bar to a custom template