How to edit the menu stlye

[mut]

Hi All,

Kindly show me how i can edit the menu style. Like which files to edit, etc.

I am using and01 theme which i downloaded from this webite.

thanks

[donnut]

Try http://wiki.cmsmadesimple.org/index.php ... nu_Manager

[mut]

thanks.

But am a newbie. any simpler tutorials. please advice. thanks

[lollipop27]

Did you find the stylesheet which changes the look of the Menu?

How good are you in CSS?

Where is the problem, you don't find where, or you don't know how...

[mut]

am average in CSS. please find below the stlyesheet

body {
margin: 0 auto;
padding: 0;
font: 76% Verdana,Tahoma,Arial,sans-serif;
background: #f4f4f4 url(uploads/images/templates/and01/bg.gif) top center repeat-y;
}

#wrap {
background: #ffffff;
color: #303030;
margin: 0 auto;
width: 760px;
}

#header {
clear: both;
margin: 20px 0 0 0;
padding: 0;
height: 45px;
}

#header h1 {
width: 250px;
margin: 0 0 10px 0;
float: left;
}

#header p {
width: 500px;
float: right;
text-align: center;
color: #a0a0a0;
margin: 0 0 10px 0;
font-size: 0.8em;
line-height: 1.2em;
}

#frontphoto {
margin: 0 0 10px 0;
border: 0;
}

#avmenu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.7em;
}

#avmenu ul {
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 1.1em;
}

#avmenu li {
margin-bottom: 4px;
}

#avmenu li a {
font-weight: bold;
height: 20px;
text-decoration: none;
color: #505050;
display: block;
padding: 6px 0 0 10px;
background: #f4f4f4;
border-left: 4px solid #cccccc;
}

#avmenu li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}

.announce {
margin: 10px 0 10px 0;
padding: 10px;
width: 130px;
color: #505050;
background-color: #f4f4f4;
line-height: 1.3em;
}

#extras {
float: right;
width: 100px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
line-height: 1.5em;
}

#extras p {
margin: 0 0 1.5em 0;
}

#content {
margin: 0 110px 20px 160px;
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
padding: 0 10px 0 10px;
line-height: 1.6em;
text-align: left;
}

#content h2 {
font-size: 1.5em;
margin: 0 0 0.5em 0;
}

#content img {
padding: 1px;
display:inline;
background: #cccccc;
border: 4px solid #f0f0f0;
}

h3 {
font-size: 1.3em;
margin: 0 0 10px 0;
}

a {
text-decoration: none;
color: #286ea0;
}

a:hover {
text-decoration: underline;
color: #286ea0;
}

a img {
border: 0;
}

#footer {
clear: both;
margin: 0 auto;
padding: 10px 0 20px 0;
border-top: 4px solid #f0f0f0;
width: 760px;
text-align: center;
color: #808080;
font-size: 0.9em;
}

#footer a {
color: #808080;
text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
}

.left {
margin: 10px 10px 5px 0;
float: left;
}

.right {
margin: 10px 0 5px 10px;
float: right;
}

.textright {
text-align: right;
}

.center {
text-align: center;
}

.small {
font-size: 0.8em;
}

.bold {
font-weight: bold;
}

.hide {
display: none;
}

[lollipop27]

ya, this is yours, but is the menus name as well "#avmenu "??

did you integrate an cmsms standard menu (I dont know the theme you mentioned)...


The best is to check if there are any stylesheets that change the looks of your menu atached to your template
(you go to you template, click on css on the right, and then all stylesheets are listet that are linked to your template)
becuase perhaps another one is changing something so your things don't work


the best option though is to have the webdeveloper toolbar for firefox, ress ctrl/apple+shift+f and look at the classes, because these cms standard menues use fancy classnames.

[mut]

yes the menus name "#avmenu ".

Now, the menu has numbers in front. E.g. 1. Home, 2. About Us, 3. Profile, etc. How do i remove the numbering so that i can have Home, About, Profile, etc.

Thanks

[lollipop27]

list-style-item: none;

normally

[mut]

the numbering are still there. Any advice. thanks

[animaye]

i think those numbers are coming from the tags, if i remember right. i strippped all tags from my templates, but you could easily style them in css if you wanted.

[Dr.CSS]

In a default install find CSS called Accessibility and *** in it is a call for dfn, dfn has to do with screen readers etc. iirc....