Thursday, October 11, 2007

Link Colors

Hi everyone!

I have a remedial question...hopefully someone can help!

How do I make it so when I create a link, it is automatically in a particular color?

When I make a link, like this to Google it is automatically purple. How can I set it to automatically be a different color? (This color) Right now, I do that manually with each link.

Thanks!




6 comments:

sketchy said...

Are you using style sheets? if so, you can use this code

.styleName a:link {
color: #insert color here ;}

.styleName a:visited {
color: #insert color here;}

.styleName a:active {
color: #insert color here; }

.styleName a:hover {
color: #insert color here; }

Then call the link in html as style="styleName" in the anchor tag. IE: a href="url.php" style="styleName"

This will allow you to create multiple link presentation formats for your site (footers, headers, ingredients)

Otherwise, you can set the global settings in the body tag
link="color" vlink=color alink=color. This will format the links for everything on that page to look the same, but it needs to be done on every page

Alink is how it looks when you press down on it, vlink is the viewed color (purple is browser default)

what editor are you using? you might have to modify a template file to change the overall link appearance

Kalyn said...

Hi Rachael,
I believe you are still using classic blogger like me, right? If so, you can change this color by editing the template, somewhere in the beginning where the formatting information is, in a section called "links". You will need to find the html number that corresponds to the number you want; you can find that number online. Maybe someone who knows more than I do can give a link to a place where those numbers are located?

Here's how it looks in my template:

/* Links
----------------------------------------------- */
a:link {
color:#000000;
}
a:visited {
color:#000000;
}
a:hover {
color:#d06600;
}
a img {
border-width:0;
}

#main a:link {
color:#d06600;
}
#main a:visited {
color:#d06600;
}
#main a:hover {
color:#d06600;
}

I'm guessing it will be similar in your template. My brother helps me with this stuff, so I don't know all that much about it, but I think this is pretty easy to change.

Kalyn said...

Forgot to say that the "main" links are the ones you want to change, that changes the link color in your posts.

paul said...

Advanced note -

The order of the link and hover psuedo classes should be Link, Visited, Hover, Anchor so one state won't over write another unintentionally. You can remember this with the LoVeHAte mnemonic, or for you real geeks, Lord Vader Had been Anakin, there's a Harry Potter one - Lord Voldomort something, something, but I don't remember it.

In some cases, you may want your visited links to always look visited even when hovered - like if it's a checked off list. In this case you can use the order LAHV. Or "Let's All Have Vegetables".

Rachael said...

This is what I have now...it seems like it should be working! But it doesnt...

h1 a:link (text-decoration:none;color:#993300)

Kalyn said...

Rachael wish I knew more about it, but I don't know why that isn't giving you the color you want! (Add this to the long list of things I don't understand about html, sorry!)