Font size & colour - header links

Hi,

I want to change the font size and colour of the category links that automatically appear in the header.

Can someone let me know where I can do this?

Thanks

flatlander:

Hi,

I want to change the font size and colour of the category links that automatically appear in the header.

Can someone let me know where I can do this?

Thanks

Fl,
Did you take a look above on this page on the Tutorials/Faq and search for the question.

You will find the answer in your stylesheet.css

1. #navMain

A helpful tool is downloading the browser Moxilla firefox with the add on called Web Developer and Firebug

1. A killer tools to quick find the declarations in the stylesheet make changes then upload to your site
2. :smile:

Thanks, I'll check those tutorials. I did search forum but forgot to look there, though I"ve been on FAQ a few times and not noticed something on this.

Will have a look again though.

flatlander:

Thanks, I'll check those tutorials. I did search forum but forgot to look there, though I"ve been on FAQ a few times and not noticed something on this.

Will have a look again though.

Fl,
If you need any future assistance just post back.
You need to edit your_template/ stylesheet.css

Look for:
#navMain ul {font-size: ?}

#navMain ul li a {color: ?}

1. just change the ? to as needed
2. notice the #navMain ul li a, has other declaration associated with her, you will half to delete her and add below a seperate declaration to control the color so that all do not change...

I tried to find the above, but only found this which doesn't appear to refer to font size or colour:

#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
text-align: center;
line-height: 1.5em;
}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #ffffff;
white-space: nowrap;

Am I at the right place?

Thanks

flatlander:

I tried to find the above, but only found this which doesn't appear to refer to font size or colour:

Am I at the right place?

Thanks

Fl,
#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #ffffff;
white-space: nowrap;

1. The highlighted red font above will be the declaration in the elements to change.
2. Without a link to your site remember the override file to edit please.

Hi again,

I tried this, but it changes the 'home' and 'log in' links at the top of the page.

I'm trying to change the size and colour of the 'categories' links that appear just below the header. I think I said 'in' the header in my first post, when I should have said 'below' the header.

Thanks

flatlander:

Hi again,

I tried this, but it changes the 'home' and 'log in' links at the top of the page.

I'm trying to change the size and colour of the 'categories' links that appear just below the header. I think I said 'in' the header in my first post, when I should have said 'below' the header.

Thanks

Fl,
Now we are on the right page..

Look for this in the stylesheet.css

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #ffffff;
white-space: nowrap;

Change to this:

#navMain ul li a, #navSupp ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #ffffff;
white-space: nowrap;

#navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #ffffff;
white-space: nowrap;

1. notice we half to separate out the element from the other two to control this alone...
2. change the ffffff to whatever you like

Hi,

Thanks, though just tried that, and it decimated the site. Ended up with two tiles at the top, links bunched together, side box borders dissapeared, plus a few other things.

Sure I got it right as I copied your text into word pad then pasted it over the top of the one you said to replace it with in CSS.

Probably turn out something I did wrong...

I had a similar problem after editing my stylesheet... I had missed a closing bracket '}'

In fact, looking at the code above, none of it has the closing brackets after each style statement and if you copied and pasted then you would be missing the closing brackets...

ie. (add the red bracket to the end of each style statement)

#stylesettings {
setting1:xxxxx;
setting2:xxxxx;
}

with regards to the 'home' and 'login' links. how do I get them to change to a certain colour on hover?

At present they disappear on hover because that is set to the same colour as my background however I dont know how to change.

https://www.digitalinx.co.uk/store

taylorosso:

with regards to the 'home' and 'login' links. how do I get them to change to a certain colour on hover?

At present they disappear on hover because that is set to the same colour as my background however I dont know how to change.

www.digitalinx.co.uk/store

Ta,
Find this:
includes/templates/digitalinx/css/stylesheet.css

Find this:
a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
color:#333366;
}

1. the highlighted red font above is your fix..
2. you might want to separate of the following and make it separate from all the rest.
3. just change the color to #000000;

I have searched through posts as well as using the mozilla tools and can't seem to find where to change the font size for both the Home & Log in at the top and the "home" at the bottom. I'm trying to make it the same size as the sidebox titles.

My site: zenwinedesign.com/catalog

Thanks

taylorosso:

with regards to the 'home' and 'login' links. how do I get them to change to a certain colour on hover?

At present they disappear on hover because that is set to the same colour as my background however I dont know how to change.

https://www.digitalinx.co.uk/store

add the following to your stylesheet.css

#navMain ul li a:hover {
color:green;
}

change color value to what you need .