[SOLVED]How to style the menu text?

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"
Post Reply
huyimin
Forum Members
Forum Members
Posts: 17
Joined: Sat May 17, 2008 11:38 pm

[SOLVED]How to style the menu text?

Post by huyimin »

i have a menu on the top,i knew how to attach a template but don't know how to change the text  style(it's actually a link),
i viewed the page source this link is like this:
Skip to navigation
so how could i change the link's style(color or spacing for instance), the training in this case. you can refer this link, many thanks!
http://www.huyimin.com/cms_cn/index.php?page=training
Last edited by huyimin on Sun Mar 15, 2009 5:51 pm, edited 1 time in total.
huyimin
Forum Members
Forum Members
Posts: 17
Joined: Sat May 17, 2008 11:38 pm

Re: How to style the menu text?

Post by huyimin »

?? :'(
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: How to style the menu text?

Post by Dr.CSS »

Look in the source and compare it to the style sheets used for the menus, note the ul id and div id li classes etc. and from there you may want to use Firefox with the web developers toolbar addon it will let you change the styling on the fly then you can copy/paste it into the style sheet...
huyimin
Forum Members
Forum Members
Posts: 17
Joined: Sat May 17, 2008 11:38 pm

Re: How to style the menu text?

Post by huyimin »

mark wrote: Look in the source and compare it to the style sheets used for the menus, note the ul id and div id li classes etc. and from there you may want to use Firefox with the web developers toolbar addon it will let you change the styling on the fly then you can copy/paste it into the style sheet...
thanks for you reply but i still can't fix this myself, before i post here ive tried everything i can including what mentioned above
The menu text(link) style is defined in the stylesheet Navigation-Simple - Horizontal with this piece of code below:

/* the links, that is each list item */
div#menu_horiz a {
padding: .6em 1em .6em 1.4em; /* padding inside the list item box */
  margin: 0; /* margin outside each list item box */
  text-decoration: none; /* no underline for links */
  color:#18507C; /*original #18507C*/
  background: url(images/cms/arrow-right.gif) no-repeat 0.5em center; ;
  display: block; /* IE has problems with this, fixed above */

}

I can change all of the menu texts properties in whole but can't do it individually, and from the page source view all of the anchor link(menu text) is wrapped in followed  by ul and then li and for every link,the system can differentiate each link with the ordering number..
I am more confused when writing this, if you know what i mean can you just give me a step by step solution like how to make changes in the tpl file and the css file, thank you very much
pedes
Power Poster
Power Poster
Posts: 840
Joined: Tue Jan 27, 2009 11:47 am

Re: How to style the menu text?

Post by pedes »

if you want to style your menu's you need to use css
you can do it with the template, but i prefer the global css stylesheet, think you have more direct controle there.
Just style your ul and li in your div and your done.

if you want you can style everything with your css

Kind regards
Peter
huyimin
Forum Members
Forum Members
Posts: 17
Joined: Sat May 17, 2008 11:38 pm

Re: How to style the menu text?

Post by huyimin »

pedes wrote: if you want to style your menu's you need to use css
you can do it with the template, but i prefer the global css stylesheet, think you have more direct controle there.
Just style your ul and li in your div and your done.

if you want you can style everything with your css

Kind regards
Peter
thanks, can you give me an example how to do this? i just want to change an individual anchor link,for me the only way i can access this link is by css attribute value and i tried but didn't work. i think those ul and li are generated from the tpl file, if i want to change the fifth menu link color to red  which has its page property(alias)"somelink" how could i do it with css.
pedes
Power Poster
Power Poster
Posts: 840
Joined: Tue Jan 27, 2009 11:47 am

Re: How to style the menu text?

Post by pedes »

you could use different class for every li

i use the menutext (for example "page5") as a class, so then you can say in your css that the li with the class for menulink 5 need to have a color red

menu template would have:
menutext}">......ect.....

css would be:
li.page5 a { color: red; }

hope you understand how i do it

Kind regards
Peter
richart
Forum Members
Forum Members
Posts: 17
Joined: Wed Sep 03, 2008 4:12 pm

Re: How to style the menu text?

Post by richart »

a full example of what i think you are looking for can be found here:

http://wiki.cmsmadesimple.org/index.php ... nu_Styling

[SOLVED]?
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: [SOLVED]How to style the menu text?

Post by Dr.CSS »

Personally I think that solution is way too convoluted, it seems that it would be easier to just use the menu text or page alias then some simple CSS...
Post Reply

Return to “Layout and Design (CSS & HTML)”