Page 1 of 1
Probably very simple, but...
Posted: Sun Nov 18, 2007 6:37 pm
by TopDawg
On my blog, I have HTML nuggets in the sidebar. I wanted the links in the sidebar to be a different style than the body, so I added the following:
Code: Select all
div.serendipitySideBarContent a:link {
color: #392310;
text-decoration: none;
}
div.serendipitySideBarContent a:visited {
color: #DF6108;
text-decoration: none;
}
div.serendipitySideBarContent a:active {
color: #DF6108;
text-decoration: underline;
}
div.serendipitySideBarContent a:hover {
color: #392310;
text-decoration: underline;
}
The only problem is that the first link in the nuggets comes up the same as my body links (unless I add an inline style to it). Is there something I'm missing?
You can see what I'm talking about under the "Navigation" nugget:
www.dawg-pound.net
Posted: Mon Nov 19, 2007 12:31 am
by d_cee
Hi
why not put your links in a div in your navigation HTML nugget and give it's own class say 'nugget_links' so you'd have:
Code: Select all
<div class="nugget_links">
put your links here
</div>
then in your style.css
Code: Select all
.nugget_links a:link {
color: #392310;
text-decoration: none;
}
.nugget_links a:visited {
color: #DF6108;
text-decoration: none;
}
.nugget_links a:active {
color: #DF6108;
text-decoration: underline;
}
.nugget_links a:hover {
color: #392310;
text-decoration: underline;
}
that should do it
HTH
Dave
Posted: Mon Nov 19, 2007 1:02 am
by TopDawg
Well I just tried that to no avail...I'm going to put style inline for now...
Posted: Mon Nov 19, 2007 6:20 pm
by Don Chambers
The reason is your color. Your first link is "home". You have obviously hit that page, so the style that applies to that link is a:visited. That color is the the same as your other links.
Code: Select all
div.serendipitySideBarContent a:visited {
color: #DF6108;
text-decoration: none;
}
Change the color to #392310 if you always want it to be the brown-ish color instead of orange... same for "active".
Styling serendipitySideBarContent, as you have done, will apply to ALL sidebar links. If that is what you want... great. If you want to change ONLY the links in your nuggets, which seems to be how d_cee interpreted your request, you do not need a new class... the html nugget plugin already emits its own class of .container_serendipity_html_nugget_plugin, so adding rules for that selector will apply only to html nuggets, and ONLY if the rules come after any rules for other types of links (hope that made sense).
So, if you want all sidebar links to be brown all the time, and underlined on hover and active, this would work:
Code: Select all
div.serendipitySideBarContent a:link,
div.serendipitySideBarContent a:visited {
color: #392310;
text-decoration: none;
}
div.serendipitySideBarContent a:hover,
div.serendipitySideBarContent a:active {
color: #392310;
text-decoration: underline;
}
Posted: Tue Nov 20, 2007 6:20 pm
by TopDawg
It's magic!
thanks both of you!