Page 1 of 1
How to edit the menu stlye
Posted: Tue Oct 16, 2007 12:41 pm
by 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
Re: How to edit the menu stlye
Posted: Tue Oct 16, 2007 12:43 pm
by donnut
Re: How to edit the menu stlye
Posted: Tue Oct 16, 2007 1:05 pm
by mut
thanks.
But am a newbie. any simpler tutorials. please advice. thanks
Re: How to edit the menu stlye
Posted: Tue Oct 16, 2007 1:10 pm
by 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...
Re: How to edit the menu stlye
Posted: Tue Oct 16, 2007 1:12 pm
by 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;
}
Re: How to edit the menu stlye
Posted: Tue Oct 16, 2007 1:19 pm
by 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.
Re: How to edit the menu stlye
Posted: Tue Oct 16, 2007 1:44 pm
by 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
Re: How to edit the menu stlye
Posted: Tue Oct 16, 2007 2:30 pm
by lollipop27
list-style-item: none;
normally
Re: How to edit the menu stlye
Posted: Tue Oct 16, 2007 3:12 pm
by mut
the numbering are still there. Any advice. thanks
Re: How to edit the menu stlye
Posted: Tue Oct 16, 2007 3:17 pm
by 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.
Re: How to edit the menu stlye
Posted: Tue Oct 16, 2007 4:25 pm
by 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....