Default Menu styling

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
User avatar
mcktj
Forum Members
Forum Members
Posts: 31
Joined: Thu Dec 07, 2006 3:34 pm

Default Menu styling

Post by mcktj »

Hi,

Im a noobie, love cmsms its my first experience with cms and i like the results.....

.....however i am have issues around the styling of my menu system the code is below

Image

when using the cssmenu.tpl it basically looks crap http://mcktj.awardspace.com

i dont know where to/ or how to edit these, below is a picture from the admin panel showing my options

Image

also how where do i start to skin the admin login and panel?

Please can anyone give advice?

thanks in advance

CMS Made Simple 1.0.2 "Maui"
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Default Menu styling

Post by Dr.CSS »

Hello and Welcome to CMSMS

If you want to make a custom menu template you click the icon to the right of those menu templates, the thing with the arrow on it, then it will show up in the database templates, click on the name you gave it and you can edit it from there...

Did you attach any of the default menu CSS style sheets, one is for horizontal the other vertical, the cssmenu.tpl is for flyout/dropdown style menus, the menu templates just take your page structure and turn it into ul li that have calls in them for targeting the page structure as in menu parents, menu active, section headers, current page etc. the CSS is for the styling of these ul li...

In the newer ver. of CMSMS, "Maui" in your case, the tag is {menu template="cssmenu.tpl"} no need to call the menumanager, for file templates you need the .tpl for database templates you just need the name of the template without the .tpl...

PS. the link gives a 404 page not found error, if you can fix it, click the modify button, I'll take a look to see if I may be able to help further...
User avatar
mcktj
Forum Members
Forum Members
Posts: 31
Joined: Thu Dec 07, 2006 3:34 pm

Re: Default Menu styling

Post by mcktj »

Hi Mark,
Thanks for the advice,

I actually had to reinstall the site i was getting

Error Connecting to Database

but i put that down to Awardspace.com, im running the cms from there.

i actually found out where i was going wrong before i read this, always the way i guess, i am however trying to render a template that i got from oswd.org, if you can would you have a look at it for me if i run into any problems, i had the rest of the system working pretty well the only thing that was messed up was the nav,

I am adding the template at the moment so maybe ten or fifteen minutes to get both xhtml and css sorted. 

Cheers
Terry
User avatar
mcktj
Forum Members
Forum Members
Posts: 31
Joined: Thu Dec 07, 2006 3:34 pm

Re: Default Menu styling

Post by mcktj »

Hi mark,

I have the site uploaded, and the template installed
including the following stylesheet attached

Accessibility and cross-browser tools
Navigation: CSSMenu - Horizontal
Module: News
Print
wardstyle.css - style sheet i attached


if you follow the link below you will see how the menu has reacted.  should i remove the styling in the sheet i created and allow the Navigation: CSSMenu - Horizontal stylesheet to handle the style of the nav menu? or change the tags?

Thanks in advance
Terry

http://mcktj.awardspace.com/
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Default Menu styling

Post by Dr.CSS »

How bout this...

Delete all this...

#menuwrapper {
  /* Fix for Opera 8 */
  /*  overflow: hidden;  */
  background-color: #FF9933;
  border-bottom: 1px solid #C0C0C0;
  width: 100%;
}

#primary-nav a {
  display: block;
  margin: 0px;
  padding: 5px 10px;
  text-decoration: none;
  color: #006699;
}
#primary-nav li a {
  border-right: 1px solid #C0C0C0;
  border-left: 1px solid #C0C0C0;
}
#primary-nav li li a {
  border: 1px solid #C0C0C0;
}
#primary-nav li, #primary-nav li.menuparent {
  background-color: #ececec;
}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive {
  background-color: #C7C7C7;
}
User avatar
mcktj
Forum Members
Forum Members
Posts: 31
Joined: Thu Dec 07, 2006 3:34 pm

Re: Default Menu styling

Post by mcktj »

Hey Mark,

Tried what you suggested, however there where some strange behaviours from the menu, :-\

just follow the link again and you will see what i mean it looks good but hover it, ::)

http://mcktj.awardspace.com/


[edit]

the menu does not drop down in IE6

the menu exspan strangely in FF and Opera

[/edit]
cheers for the help

Terry
Last edited by mcktj on Fri Dec 08, 2006 5:27 pm, edited 1 time in total.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Default Menu styling

Post by Dr.CSS »

You removed too much and left this / in there which makes it act real weird...

The below info should be all you have in the menu CSS, complete replace of your existing menu CSS with this should give the desired results...

#menu_vert {
  margin-left: 1px;
  margin-right: 1px;
}

/* The wrapper clears the floating elements of the menu */

/* Fix for Opera 8 */
.clearb { clear: both; }


#primary-nav li li {
  width: 200px;
}


/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
#primary-nav ul {
  position: absolute;
  top: auto;
  display: none;
}
#primary-nav ul li{
  positon: absolute;
  top: 5px; 
}
#primary-nav ul ul {
  margin-top: 1px;
  margin-left: -1px;
  left: 100%;
  top: 0px;
}

#primary-nav li {
  margin-left: -1px;
  float: left;
}
#primary-nav li li {
  margin-left: 0px;
  margin-top: -1px;
  float: none;
  position: relative;
}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent,
#primary-nav ul li.menuparent:hover,
#primary-nav ul li.menuparenth {
/* arrow for menuparents */
  background-image: url(images/cms/arrow.gif);
  background-position: center right;
  background-repeat: no-repeat;
}


/* Styling the apperance of menu items on hover */

#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
  background-color: #E7AB0B;
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

/*
just add
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul ul ul,
for fourth level
*/
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
  display: none;
}

/* add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
  display: block;
}


/* IE Hacks */
#primary-nav li li {
  float: left;
  clear: both;
}
#primary-nav li li a {
  height: 1%;
}
User avatar
mcktj
Forum Members
Forum Members
Posts: 31
Joined: Thu Dec 07, 2006 3:34 pm

Re: Default Menu styling

Post by mcktj »

Hi Mark,

There is still some issues with IE, there is no on float action also the menu position in opera floats over the parent button seems to work pretty well in Fire Fox

Terry
Last edited by mcktj on Sat Dec 09, 2006 6:18 pm, edited 1 time in total.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Default Menu styling

Post by Dr.CSS »

IE needs this...





and for opera, guess I left this out...

#menuwrapper {
  /* Fix for Opera 8 */
  /*  overflow: hidden;  */

}
User avatar
mcktj
Forum Members
Forum Members
Posts: 31
Joined: Thu Dec 07, 2006 3:34 pm

Re: Default Menu styling

Post by mcktj »

Hi Mark,

the fix for IE6 working, it now drops but does not float to the left the IE hack is in the CSS???, but the Opera Fix is not work still, maybe i have put the code in the wrong place so i included it below.

Fire Fox it work perfectly, maybe that says something about the browsers.

Thanks for all your help Mark relay appreciate it

Terry

http://mcktj.awardsace.com

CSSMENU Tester code:

Code: Select all

#menu_vert {
   margin-left: 1px;
   margin-right: 1px;
}

/* The wrapper clears the floating elements of the menu */


/* Fix for Opera 8 */
.clearb { clear: both; }


#primary-nav li li { 
   width: 200px; 
}


/* Unless you know what you do, do not touch this */ 

#menuwrapper { 
   /* Fix for Opera 8 */ 
  /* overflow: hidden; */
}
#primary-nav, #primary-nav ul { 
   list-style: none; 
   margin: 0px; 
   padding: 0px; 
}
#primary-nav ul { 
   position: absolute; 
   top: auto; 
   display: none; 
}
#primary-nav ul li{ 
   positon: absolute; 
   top: 5px;  
}
#primary-nav ul ul { 
   margin-top: 1px;
   margin-left: -1px;
   left: 100%; 
   top: 0px; 
}
   
#primary-nav li { 
   margin-left: -1px;
   float: left; 
}
#primary-nav li li { 
   margin-left: 0px;
   margin-top: -1px;
   float: none; 
   position: relative; 
}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent, 
#primary-nav ul li.menuparent:hover, 
#primary-nav ul li.menuparenth { 
/* arrow for menuparents */
   background-image: url(images/cms/arrow.gif); 
   background-position: center right; 
   background-repeat: no-repeat; 
}


/* Styling the apperance of menu items on hover */

#primary-nav li:hover, 
#primary-nav li.menuh, 
#primary-nav li.menuparenth, 
#primary-nav li.menuactiveh { 
   background-color: #E7AB0B; 
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

/* 
just add 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul ul ul,
for fourth level 
*/
#primary-nav ul, 
#primary-nav li:hover ul, 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul, 
#primary-nav li.menuparenth ul ul { 
   display: none; 
}

/* add 
#primary-nav ul ul ul li:hover ul, 
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul, 
#primary-nav ul li:hover ul, 
#primary-nav ul ul li:hover ul, 
#primary-nav li.menuparenth ul, 
#primary-nav ul li.menuparenth ul, 
#primary-nav ul ul li.menuparenth ul { 
   display: block; 
}


/* IE Hacks */
#primary-nav li li { 
   float: left; 
   clear: both; 
}
#primary-nav li li a { 
   height: 1%; 
}
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Default Menu styling

Post by Dr.CSS »

When I convert a template from other sources I try and incorporate there menu styling with the one from a default menu that is closest to theirs...

Mostly the primary-nav stuff I've given you is just for the placing of the ul li and the colors are coming from the .bar calls...

Try putting the color calls into a copy of the CSS menu sheets primary-nav calls where you see the borders and color calls, like background, if you start with the default it should fix any IE/Opera problems...

I would start with a copy of the Menu CSS and use Firefox with the Web Dev. toolbar to add the CSS calls to see what works with this template...
User avatar
mcktj
Forum Members
Forum Members
Posts: 31
Joined: Thu Dec 07, 2006 3:34 pm

Re: Default Menu styling

Post by mcktj »

Thanks Mark you've been a real help

Terry
Post Reply

Return to “Layout and Design (CSS & HTML)”