Page 1 of 1

[SOLVED]How to style the menu text?

Posted: Sun Mar 01, 2009 1:32 pm
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

Re: How to style the menu text?

Posted: Fri Mar 06, 2009 3:34 am
by huyimin
?? :'(

Re: How to style the menu text?

Posted: Fri Mar 06, 2009 6:42 am
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...

Re: How to style the menu text?

Posted: Sun Mar 08, 2009 12:49 pm
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

Re: How to style the menu text?

Posted: Sun Mar 08, 2009 3:01 pm
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

Re: How to style the menu text?

Posted: Mon Mar 09, 2009 5:04 am
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.

Re: How to style the menu text?

Posted: Tue Mar 10, 2009 3:19 pm
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

Re: How to style the menu text?

Posted: Wed Mar 11, 2009 4:21 pm
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]?

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

Posted: Tue Mar 24, 2009 6:56 pm
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...