Movable Type Community Forum > Duplicate Style Sheets

Movable Type Community Forum > Additional Resources > Tips and Tricks

Orbhead

Oct 27 2002, 02:37 PM

I am wanting to know if it is possible to add a second a:link stylesheet to my site. My navagation panel has a reversed colour set than the body of the site, therefore making the links in the navigation almost invisible. Is it possible to have additional specifications for a new link style within the same stylesheet?

medic119

Oct 27 2002, 02:48 PM

You can only have one a:link pers stylesheet as far as I know.

Howevere you can have a:links pers class or id in the stylesheet as many as you want. I use several different a:links within my stylesheet that way.

ie You can only have one a: link
but it is possible to have
.class1 a:link
#id1 a:link
.class2 a:link
etc etc

girlie

Oct 27 2002, 02:49 PM

You could follow the #banner example in the default stylesheets and add a new ID for your navigation panel to your current stylesheet:

CODE

#banner a,
#banner a:link,
#banner a:visited,
#banner a:active,
#banner a:hover {
font-family: palatino, georgia, verdana, arial, sans-serif;
font-size: xx-large;
color: #333;
text-decoration: none;
}

Just change #banner to #navigation or whatever you want, then make sure you use <div id="navigation"> and a closing div tag to surround your navigation panel. Update the styles to match what how you want your links to appear in the navigation panel.

Orbhead

Oct 27 2002, 06:51 PM

Thanks for the advice. I have tried what you both have mentioned, but the links I wanted different just ended up using the main a:link, :hover, etc...

I will mess around with it some more, and if I still can't get it to work, I will just use some javascript rollovers instead.

tamaracks

Oct 27 2002, 07:41 PM

If you don't have areas named like those in the example, it won't work. Check your html/css to see what kind of IDs are set up if you are using a template.

Becky

Oct 28 2002, 11:47 AM

The method above works if you have div's or span's with the specified class or id. For example, the following would work

CODE

#banner { background: black; color: white; }
#banner a:link { color: red; }

only if your html looks something like this:

CODE

<div id="banner">
<a href="something.html">click me</a>
</div>

If that method doesn't fit the logic of your layout, another alternative is this:

CODE

a:link { color: blue; }
a:link.banner {color: red; }

with the html looking like

CODE

<a href="something.html" class="banner">click me</a>

Repeat as necessary for visited, hover, active, etc.

Hope this helps!

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.