PDA

View Full Version : Link Colours


KingCreole
08-07-2007, 12:59 PM
I posted on this in past and never really got it sorted out, just a workaround. My problem is that I can't make different text have different colors --if they are links. They all follow one a:link rule.

Here's the page. Specific comments are there: http://www.mattelmore.org/test_newsite.htm

This has been driving me kind of nuts, as you'll see. If someone could help me out with a good explanation, it would save me from smashing my own head with a ball-peen hammer. Cheers.

domedia
08-10-2007, 02:50 PM
This is easy and has been asked a couple of times I think. Just create a separate class for links you want as other colors:

<style type="text/css">
<!--
a.nav:link {color: red;}
a.nav:visited {color: orange;}
a.nav:hover {color: black;}
a.nav:active {color: red;}
-->
</style>
<a href="file.html" class="nav">Link</a>

And even better way that I use more often, is to apply CSS to the links based on their parent element ID like this:
<style type="text/css">
<!--
#nav a:link {color: red;}
#nav a:visited {color: orange;}
#nav a:hover {color: black;}
#nav a:active {color: red;}
-->
</style>
<div id="nav">
<a href="file.html">Link</a>
</div>

Ricky55
08-10-2007, 02:52 PM
This is really easy to change.

If you just want to setup the colour of all links just click on the page properties button from within the properties bar at the bottom of the dreamweaver.

From here choose links and set the colour you want and also link behavour like what happens when you roll over etc.

If you want more than one colour from your links then you'll need to setup two CSS styles for every variant.

To do this just click on the new css rule button from within the CSS panel.

Enter in a name for your first rule in the selector box

such as .one (use the .)

Leave on advanced selected. Select this doc if you want this rule just for this document or define a new style sheet if you want to use the rules throughout you site. You can then link the style sheet to other pages so you can use the same rules and update quickly.

Once you've named your style click ok, now select your new colour etc font or whatever and click ok.

Now just select your link and change it to the new style. This is as easy as making something bold in word. Drag a selection over the text and choose the style from the style drop down menu in the properties window.

Hope this helps you.

Ricky55

domedia
08-10-2007, 02:58 PM
Ricky thanks for giving the DW version of this. You should write a tutorial on it, it seems to be a popular topic.

Ricky55
08-10-2007, 03:00 PM
No worries mate.

I have some time on my hands at the moment so I might just do that.

I think to beginers using dreamweaver icons makes more sense intially.

Ricky55

domedia
08-10-2007, 03:07 PM
Absolutely more easy, many choose DW based on not having to write code alone. I'll PM you about tut

Ricky55
08-10-2007, 03:20 PM
ok mate thanks

KingCreole
08-10-2007, 03:33 PM
Ricky, I'd already tried that solution and it didn't work. What happens is DW follows the lowest rule in the list (or highest?). So, all links ended up the same color.

A really nice guy half-way around the world has been helping me by writing code and explaining things, telling me what to tweak and whatnot. Basically, he created parent ID's with properties nested in each one. My mind is still reeling from the idea, but there's a sample below if you want to have a look.

The only downside is that DW is basically obsolete for this project, being used simply to write code and publish. Some of the features are still useful, but I can't jump back and forth between DW and Fireworks, for example. Tables are out too. The good news is I'm learning something.

If you'd like to check out the results: http://mattelmore.org/test_newsite02.htm

Any thoughts/critiques/suggestions would be warmly welcomed.

Here's a sample of the code for nesting:

#header{
margin:1em 0 0 0;
height:94px;
font-size:200%;
background: #517396 url(../images/header.png) no-repeat left;
}

#header h1 {text-align:right;
padding: 0.7em 5em;
}

#header a {color:#000;
text-decoration:none;
font-weight:bold;
}

#header a:hover {color:#013567;
}

KingCreole
08-10-2007, 03:42 PM
Just re-read domedia's suggestion. It looks basically to be the same idea, from what I can tell. Three days ago, I wouldn't have understood that. But now, I can see myself on the threshold of making sense of it. Quite a leap. Thanks, do.

domedia
08-10-2007, 03:45 PM
yes, once you start understanding CSS logic, you can move all your styling into stylesheets :)

Ricky55
08-10-2007, 11:51 PM
my method worked for me but anyway at least you have what you want now.

the site looks fibe btw, from a design stand point it could do with some work but its functional.