Page 1 of 1
[Solved] Help with menu styling issue
Posted: Mon Mar 23, 2009 4:20 am
by Doug
I am currently working on this site...
http://www.dl.net.au/index.php?
I am setting up a "Quick Access Menu" in the right column. It shows level 1 and level 2 of the main menu.
I want level 1 links to be in bold text and level 2 to remain in normal text to allow for easier navigation and I can't figure out what I need to do to allow me to style the different menu levels seperately.
I am using a copy of 'simple_navigation.tpl' called it 'sitemap', I edited the template so that it doesn't display the parent, otherwise it is the same as the standard template.
I have the following code in the main stylesheet to style it...
div#sitemap{
margin-bottom: 0px;
display:block;
background: transparent;
padding:10px;
}
div#sitemap li{
margin:5px 0 0 0;
display:block;
background: #cad1b0;
padding:5px;
border: #2b301c 1px dotted;
font-weight: bold;
}
div#sitemap a{
font-size: 90%;
font-weight: normal;
}
Any help would be appreciated.
I am using CMS ver.1.5.3
Cheers,
Doug
Re: Help with menu styling issue
Posted: Mon Mar 23, 2009 7:44 am
by KO
It usually goes like this...
#sitemap li a {
font-weight: bold;
}
#sitemap li li a {
font-weight: normal;
}
Re: Help with menu styling issue
Posted: Mon Mar 23, 2009 3:37 pm
by iskanje
I have a similar problem, but with the active menu item.
I would like to have the active menu item either bold or underlined, and it works,
almost. Because on the second level menu
all the items are underlined, as well as the parent (example page:
https://test.yhteisokyla.info/index.php?page=koirani).
I used the minimal menu template, and now I can't figure out how to differentiate the active second level items from the active parents...
Any ideas?
Re: Help with menu styling issue
Posted: Mon Mar 23, 2009 4:13 pm
by KO
Moi,
Link did not work but you could try...
#yournavi li.activeparent li a {text-dedocation:none,font-weight:normal;}
#yournavi li.activeparent li.currentpage a {font-weight:bold;}
or something....
Re: Help with menu styling issue
Posted: Mon Mar 23, 2009 5:04 pm
by iskanje
Kiitti
Couldn't get it working with what you proposed. I don't think the minimal menu template uses this activeparent at all?
Not sure why you can't see the page on server, but here are the essentials.
This is the part of the template:
Code: Select all
<div id="sidebar">
<ul>
<li>
<h2>valikko</h2>
{menu template='minimal' collapse=1}
</li>
<li>
<h2>viimeksi päivitetty</h2>
{recently_updated number='5' leadin=' ' dateformat='d.m.Y'}
</li>
</ul>
</div>
And this is how it comes out as source with that minimal template:
Code: Select all
<!-- start sidebar -->
<div id="sidebar">
<ul>
<li>
<h2>valikko</h2>
<ul class="clearfix">
<li><a href="https://test.yhteisokyla.info/"> Etusivu </a>
</li>
<li><a href="https://test.yhteisokyla.info/index.php?page=villakoirat"> Villakoirat </a>
</li>
<li class="active"> <a href="https://test.yhteisokyla.info/index.php?page=venaejaenvinttikoirat" class="active"> Venäjänvinttikoirat </a>
<ul>
<li><a href="https://test.yhteisokyla.info/index.php?page=koirani-2"> Koirani </a>
</li>
<li><a href="https://test.yhteisokyla.info/index.php?page=naeyttelyt-2"> Näyttelyt </a>
</li>
<li><a href="https://test.yhteisokyla.info/index.php?page=pentuja-2"> Pentuja </a>
</li>
<li><a href="https://test.yhteisokyla.info/index.php?page=muistoissa-2"> Muistoissa </a>
</li>
<li><a href="https://test.yhteisokyla.info/index.php?page=juoksutuloksia" class="active"> Juoksutuloksia </a>
</li></ul>
</li>
<li><a href="https://test.yhteisokyla.info/index.php?page=linkit"> Linkit </a>
</li>
<li><a href="https://test.yhteisokyla.info/index.php?page=yhteystiedot"> Yhteystiedot </a>
</li>
</ul>
</li>
<li>
<h2>viimeksi päivitetty</h2>
<ul><li><a href="https://test.yhteisokyla.info/index.php?page=juoksutuloksia">Juoksutuloksia</a><br /> 23.03.2009</li><li><a href="https://test.yhteisokyla.info/index.php?page=villakoirat">Villakoirat</a><br /> 23.03.2009</li><li><a href="https://test.yhteisokyla.info/index.php?page=venaejaenvinttikoirat">Venäjänvinttikoirat</a><br /> 23.03.2009</li><li><a href="https://test.yhteisokyla.info/index.php?page=yhteystiedot">Yhteystiedot</a><br /> 23.03.2009</li><li><a href="https://test.yhteisokyla.info/index.php?page=linkit">Linkit</a><br /> 23.03.2009</li></ul>
</li>
</ul>
</div>
<!-- end sidebar -->
And this is the CSS for that troubling part:
Code: Select all
#sidebar a {color: #B22222; text-decoration: none;}
#sidebar a:hover {color: #B22222; text-decoration: underline;}
#sidebar .active {color: #B22222; text-decoration: underline;}
This amont of and tags is just too much for me....... I have done a few sites, and all the rest usually goes quite easily but the menu is always causing trouble.
Re: Help with menu styling issue
Posted: Mon Mar 23, 2009 11:16 pm
by Doug
KO wrote:
It usually goes like this...
#sitemap li a {
font-weight: bold;
}
#sitemap li li a {
font-weight: normal;
}
Thank you, that put me on the right track and it's all working now.
Re: [Solved] Help with menu styling issue
Posted: Thu Mar 26, 2009 4:05 pm
by iskanje
Still didn't figure out how to get a simple menu working... Found this tutorial:
http://wiki.cmsmadesimple.org/index.php ... nu_Styling but it seems too advanced for my use. What I would like to accomplish is this
Parent 1
Parent 2
Parent 3
- Child 1
-
Child 2 <-- active
Very simple, but how to get there? I tried to use all three of the file templates and modify the css, but somehow I don't get it right with the child-page, that only it would be underlined when active.
Any advices?
Re: [Solved] Help with menu styling issue
Posted: Thu Mar 26, 2009 8:51 pm
by KO
Try #sidebar a.active {color: #B22222; text-decoration: underline;}
It will also put the parent link underlined but maybe that's ok. Othervise you might need to use other menu template.
Minimal menu_template.tpl should have activeparent so check that you have unmodified version of it.