Change *just* the URL color in the profile module Options

[JasonThompson]

Hi everyone -

I'm trying to change the color of just the URL link in my profile module, but I'm not having any luck picking the code out for just this with Firebug.

My issue is that I have a lighter body and a darker header image, and I want to be able to change the URL link to a lighter color without having to choose a lighter color for the entire page.

This works for changing the "Send Message/Add a Friend/etc" links:

CODE

ul.contactLinks li a { background-image: url(); background-repeat: no-repeat;
color: #D1D1D1; }

And here's what I've tried to change the color of the URL link

CODE

a.url { background: url() 0 2px no-repeat; line-height: 20px; padding-left: 35px;
color: #D1D1D1; }

Which achieves my goals of removing the little "URL" image that sits alongside, but no luck in changing the font color.

I tried this as well, also no luck:

CODE

.userProfileURL div { color:#D1D1D1; }

Any suggestions would be greatly appreciated!

Example:

[fixtatik]

CODE

.urlLink { color:#000000; }

[JasonThompson]

Hm, that didn't seem to work for me...

Here's my entire CSS - no immediately obvious conflicts that I see, but maybe someone else will?

CODE

div.basicInfoDetails {
min-height:170px;
padding-left:16px;
background-image: url(http://www.mysite.net/profile_background.jpg);
background-repeat: no-repeat;
background-color: #FFFFFF;
}

ul.contactLinks li a { background-image: url(); background-repeat: no-repeat;
color: #D1D1D1; }

a.url { background: url() 0 2px no-repeat; line-height: 20px; padding-left: 35px;
color: #D1D1D1; }

.urlLink { color: #D1D1D1; }



div.blurbsModule h4 {
background-color:transparent;
display:none;
margin:0.6em 0;
color:#000000;
}

.moduleHead span { display:block; text-indent:-500em; }

.calendarModule .moduleHead span { background:url(http://www.mysite.net/header_eventstours.jpg);
background-repeat: no-repeat;
height:18px; width:218px; }

.blurbsModule .moduleHead span { background:url(http://www.mysite.net/header_aboutLN.jpg);
background-repeat: no-repeat;
height:18px; width:218px; }

.friendSpaceModule .moduleHead span { background:url(http://www.mysite.net/header_friendsspace.jpg);
background-repeat: no-repeat;
height:18px; width:218px; }

.commentsModule .moduleHead span { background:url(http://www.mysite.net/header_friendscomments.jpg);
background-repeat: no-repeat;
height:18px; width:260px; }

.mdpapplicationModule .moduleHead span { background:url(http://www.mysite.net/header_LNtwitter.jpg);
background-repeat: no-repeat;
height:18px; width:260px; }


a:hover {
color:#E20F2F;
}

a:link, a:visited {
color:#E20F2F;

}

#topnav
{
background-color:#D1D1D1;
margin: 5px 12px 0px 12px;
color:#FFFFFF;}

#topnav ul li.dropDown:hover a, #topnav ul li.hover a, #topnav ul li.hover a:hover
{
background-color:#D1D1D1;
color:#FFFFFF;
}

#topnav li.dropDown:hover ul.subMenu a:hover, #topnav li.hover ul.subMenu a:hover {
background:#DDDDDD none repeat scroll 0 0;
color:#E20F2F;
text-decoration: underline;
}

#topnav ul li a:hover small, #topnav ul li a.hover small {
color:#D2D2D2;
}



#topnav ul a:hover {
background-color:#D2D2D2;
color:#EEEEEE;
}

#topnav ul.subMenu li .mailCountNav {
color:#D1D1D1;
font-weight:normal;
}



div.photo img {
border:0px solid #FFFFFF;
max-width:0px;
}

div.photo img.nophoto {
height:170px;
width:0px;
background-image: url(http://www.mysite.net/profileLN3.jpg);
}



.msOnlineNow {
color:#00AA00;
display:none;
font-family:Tahoma,Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
font-weight:bold;
}


div.photo {
height:170px;
overflow:hidden;
background-image: url(http://www.mysite.net/profileLN3.jpg);
background-repeat: no-repeat;
position:absolute;
text-align:center;
width:301px;
}

edit: Hrm.... this is changing the background and the font variant, but I cannot get this to change the color of the link text itself. Curious.

CODE

SPAN.urlLink
{
background-color: #D1D1D1;
font-variant: small-caps;

}

[PeRRiiN]

try this...

CODE

div.basicInfoModule div.basicInfoDetails span.urlLink a.url {color:#ffffff;}

[JasonThompson]

Ahh! Thank you so much!

That did it, and I was able to get my hover effect working too:

CODE

div.basicInfoModule div.basicInfoDetails span.urlLink a.url {color:#D1D1D1;}

div.basicInfoModule div.basicInfoDetails span.urlLink a:hover {
color:#E20F2F;
}

Much appreciated, guys!