How do I add additional <a> tags to a css?

Posted: Sun Jan 04, 2004 10:04 am

Hey,

Take a look at my header links.

http://imwithdennis.com

See how you can barely see the link text? I want to change that.

The problem is that no matter what change I make (notice the divider dots are red now) the <a> tag always comes up as the same color.

Here the standard ccs text code.

Code:

A:link {color:#9DA6BB;FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica;text-decoration:none}


A:active {color:#9DA6BB;FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica;text-decoration:none}


A:visited {color:#9DA6BB;FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica;text-decoration:none}


A:hover {color:#f5f5f5;FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica;text-decoration:underline}


.title        {BACKGROUND: none; COLOR: #DFDFDF; FONT-SIZE: 14px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}


.content     {BACKGROUND: none; COLOR: #C8C8C8; FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica}


.block-title {BACKGROUND: none; COLOR: #FF0000; FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica}


.storytitle  {BACKGROUND: none; COLOR: #FF0000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}


.storycat    {BACKGROUND: none; COLOR: #DFDFDF; FONT-SIZE: 12px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}


.boxtitle     {BACKGROUND: none; COLOR: #C8C8C8; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}


.boxcontent  {BACKGROUND: none; COLOR: #C8C8C8; FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica}


.option     {BACKGROUND: none; COLOR: #C8C8C8; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}


.tiny       {BACKGROUND: none; COLOR: #C8C8C8; FONT-SIZE: 11px; FONT-WEIGHT: normal; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}


.small       {BACKGROUND: none; COLOR: #C8C8C8; FONT-SIZE: 11px; FONT-WEIGHT: normal; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}


.storycontent  {BACKGROUND: none; COLOR: #C8C8C8; FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica}


.headcontent     {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica}

I tried to mimic the copyright and added the folowing code (the copyright code is included).

Code:

/* Header Links info */


.headlinks       { color: #000000; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; letter-spacing: -1px }


a.headlinks       { color: #FF0000; text-decoration: none }


a.headlinks:hover  { color: #2D3546; text-decoration: underline }





/* Copyright and bottom info */


.copyright       { color: #9DA6BB; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; letter-spacing: -1px }


a.copyright       { color: #9DA6BB; text-decoration: none }


a.copyright:hover  { color: #c0c0c0; text-decoration: underline }

That doesn't work. It changes all my text... but not the links or the hover.

Any suggestions?

Thanks.

Dan

Site Admin/Owner Joined: Aug 27, 2002 Posts: 17088

Would you please zip the theme you are using and send it to me? Thanks!

Posted: Tue Jan 06, 2004 8:47 pm

You want the theme.php file, the css file... or the whole thing?

The theme is just the Boyz theme from Nukecops... I'd bet you have it. I've only made a few small changes to the overall theme.

Thanks.

Dan

Posted: Tue Jan 06, 2004 8:51 pm

If memory serves me right, the A: css tags can only be overwritten using span tags with the style attribute.

Posted: Tue Jan 06, 2004 8:55 pm

aaahhhhhh,

So...

Quote:

/* Header Links info */
.headlinks { color: #000000; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; letter-spacing: -1px }
a.headlinks { color: #FF0000; text-decoration: none }
a.headlinks:hover { color: #2D3546; text-decoration: underline }

may work but I need to use a tag... I hadn't tried that.

I'll get back to you.

PEACE!

Posted: Tue Jan 06, 2004 9:17 pm

Hey,

Man I was excited... I've been messing with this for a week. Embarassed

This doesn't work...

TEXT HERE

Some as before, changes the text color... but links and hover remain the same as the original css.

Posted: Tue Jan 06, 2004 9:43 pm

I know I've done this. Try it with a div tag.

Posted: Tue Jan 06, 2004 10:15 pm

djw2 wrote:

Hey,

Man I was excited... I've been messing with this for a week. Embarassed

This doesn't work...

TEXT HERE

Some as before, changes the text color... but links and hover remain the same as the original css.

Just reread this. That's not what I said. I said the span tag with the STYLE attribute, not the class attribute. Try actually placing the css code in the style tag like

Code:

<span style="a.headlinks.color:#FF0000; text-decoration: none;">

Posted: Tue Jan 06, 2004 10:40 pm

Nope.

Like this...



the quote stops the code. (everthing past it is commented out)

So I tried this...



That didn't screw anything up... but it didn't do anything either.

Confused

I'm not superskilled in this area.

PEACE!

Posted: Wed Jan 07, 2004 12:45 am

I knew I had done this Smile

. Here is the raw html/css. I'll let you convert it to php Wink

Code:

<style>


A:link {color:#9DA6BB;FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica;text-decoration:none}


A:visited {color:#9DA6BB;FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica;text-decoration:none}


A:hover {color:#f5f5f5;FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica;text-decoration:underline}


A:active {color:#9DA6BB;FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica;text-decoration:none}


A.red:hover {color:#FF0000;}


</style>


<a href="yahoo.com" class=red>Yahoo</a>

BTW, the reason the other code 'stopped' is that I gave you the raw html code. When echoing the code you sometimes have to ad the \, depending on your quoting preferences.

Posted: Thu Jan 08, 2004 6:33 am

Hey Raven,

That did it.

Thanks for all your help.

For others reading this...

I added my "headlinks" (can be anything) command to the css like this.

Code:

A.headlinks:link {color:#000000;FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica;text-decoration:none}


A.headlinks:active {color:#ff0000;FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica;text-decoration:none}


A.headlinks:visited {color:000000;FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica;text-decoration:none}


A.headlinks:hover {color:#ff0000;FONT-SIZE: 11px; FONT-FAMILY: Verdana, Helvetica;text-decoration:underline}

You then call the text style in the theme.php link like this.

Code:

<a href=\"downloads.html\" class=\"headlinks\">Downloads</a>

Looks great, thanks again.

PEACE!

Dan