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"
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...
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.
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?
/* 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 */
/* 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%;
}
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.
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.
#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%;
}
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...