[solved] CSS Menu conversion

[Propaganistas]

Hiya,

I'm converting TechMania, designed by Styleshout to CMSMS (for personal use). The only thing I can't figure out is how to set up the CSS Menu Stylesheet.

This is the original part:

Code: Select all

<div id="header-tabs">
				<ul>
					<li id="current"><a href="index.html"><span>Home</span></a></li>
					<li><a href="index.html"><span>Archives</span></a></li>
					<li><a href="index.html"><span>Downloads</span></a></li>
					<li><a href="index.html"><span>Services</span></a></li>
					<li><a href="index.html"><span>Support</span></a></li>
					<li><a href="index.html"><span>About</span></a></li>			
				</ul>
			</div>

Probably it has to be something like this:

Code: Select all

<div id="header-tabs">
				{menu}
			</div>

When using this, the menu gets displayed as text in the header image, not as buttons on top of the image.
Here's the menu's CSS:

Code: Select all

/* menu tabs */
#header #header-tabs {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 25px;
	background: #000;
   font: bold 1.1em Verdana, Tahoma, 'Trebuchet MS',  Sans-serif;  
} 
#header-tabs ul {		
	margin:0;
   padding:2px 0px 0px 7px;
   list-style:none;
}
#header-tabs li {
	display:inline;
   margin:0;
   padding:0;
}
#header-tabs a {
	float:left;
   background: url(tableft.gif) no-repeat left top;
   margin:0;
   padding:0 0 0 4px;
   text-decoration:none;
}
#header-tabs a span {
	float:left;
   display:block;
   background: url(tabright.gif) no-repeat right top;
   padding:7px 15px 4px 8px;
   color: #CCC;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header-tabs a span {float:none;}
/* End IE5-Mac hack */
#header-tabs a:hover span {
	color:#FFF;
}
#header-tabs a:hover {
	background-position:0% -42px;
}
#header-tabs a:hover span { background-position: 100% -42px;}
#header-tabs #current a { background-position:0% -42px; }
#header-tabs #current a span { background-position:100% -42px; color: #FFF;}

Any idea how to get this working? Thanks in advance

Propa

(I'm using CMSMS 1.5.4)

[Webmist]

2 questions.

Did you make sure that the images paths are correct? Your css shows they are in the base directory.


In menu manager did you remember to include the tags in the correct node? Is the menu node being called using the images?

Really 3 questions I guess. It would help to know what the menu template looks like. 

[Propaganistas]

I'm sorry, I guess I didn't specify my 'actual' question. The CSS above is the original sheet. I don't have any clue how to convert this to CMSMS using $node and so on.. So I'm asking for some basic menu 'starter' help (or if someone could convert this for me).

Image paths are adjusted in backend. So no need to worry about those

[Greg]

Here is a very basic menu template you could add as a new template in menu manager.
name the new template 'headertabs'

Code: Select all

{if $count > 0}
<div id="header-tabs">
<ul>
{foreach from=$nodelist item=node}
<li><a href="{$node->url}"><span>{$node->menutext}</span></a></li>
{/foreach}
</ul>
</div>
{/if}

Then call it in your template with

Code: Select all

{menu template='headertabs' number_of_levels='1'}

[Propaganistas]

Here is a very basic menu template you could add as a new template in menu manager.
name the new template 'headertabs'

Thanks, that worked out great. I guess I now understand the very basic of menu building in CMSMS

[Dr.CSS]

Something else you need to consider when using cmsms is to put all images in uploads, in a new folder or some such as the root/images folder is for the admin etc. use, I know this is not how a flat file html site works but it is the cmsms way ...

[Propaganistas]

Ofcourse! I've already done this at the very beginning. I just copied the original CSS, not my modified one

[Dr.CSS]

Cool, but yea if you have a menu that has around the menu text for image etc. you just need to make a copy of existing menu template and add       around the {menutext} tag...

[Propaganistas]

Anyway, problem solved =)

[Dr.CSS]

Glad to see you got it working/solved please to put [solced] in the subject line of first post...