CSS mod for sidebar (vs. main text)

[jgolick]

Hiya.
I am a CSS noob so please bear with me.
I'd like to tweak the a:visited properties so that visited links in the sidebar are treated differently than those in the main text.

Here is what is currently under global elements:

a { color: #C35617; text-decoration: none; }
a:visited { color: #000000; text-decoration: none; border-bottom: 1px dotted #5F5A59; }
a:hover { color: #df0000; text-decoration: none; border-bottom: 1px dotted #5F5A59; }
a img { border: none; }

This is what I've tried, knowing next-to-nothing (as will be apparent):

.content a { color: #C35617; text-decoration: none; }
a:visited { color: #000000; text-decoration: none; border-bottom: 1px dotted #5F5A59; }
a:hover { color: #df0000; text-decoration: none; border-bottom: 1px dotted #5F5A59; }
a img { border: none; }

.sidebar a { color: #C35617; text-decoration: none; }
a:visited { color: #000000; text-decoration: none; }
a:hover { color: #df0000; text-decoration: none; border-bottom: 1px dotted #5F5A59; }
a img { border: none; }

Clearly, this is not getting the job done. I'm using Cutline 1.4 three column right, on WP 2.8.4, site is here.

I welcome all thoughts, suggestions, recommendations. Will accept a fair amount of snippy attitude. Profuse thanks!

[sofimi]

If you want to change the style of the links specifically in the .sidebar_list, you have to do this (there is no .sidebar, only #sidebar):

.sidebar_list a { color: #C35617; text-decoration: none; }
.sidebar_list a:visited { color: #000000; text-decoration: none; }
.sidebar_list a:hover { color: #df0000; text-decoration: none; border-bottom: 1px dotted #5F5A59; }

Likewise, #content-specific declarations should look like this (there is no .content, only #content):

#content a { color: #C35617; text-decoration: none; }
#content a:visited { color: #000000; text-decoration: none; border-bottom: 1px dotted #5F5A59; }
#content a:hover { color: #df0000; text-decoration: none; border-bottom: 1px dotted #5F5A59; }
#content a img { border: none; }

You need to indicate the parent element so that it's more "specific" and so that it overrides the more "general" declaration for a, a:visited, and a:hover. You have to look at the HTML to figure out of that element is labeled with a class, or ID, or both, and then you can choose:

Classes = dot; IDs = hash/pound. In this case, I chose .sidebar_list (class), and #content (id).

BUT, if you're declaring the same set of attributes as the more "general" one, it's redundant. You should change the colors for each more specific declaration.

You should also read up on the cascade and specificity if you want to learn more.

Hiya.
I am a CSS noob so please bear with me.
I'd like to tweak the a:visited properties so that visited links in the sidebar are treated differently than those in the main text.

Here is what is currently under global elements:

a { color: #C35617; text-decoration: none; }
a:visited { color: #000000; text-decoration: none; border-bottom: 1px dotted #5F5A59; }
a:hover { color: #df0000; text-decoration: none; border-bottom: 1px dotted #5F5A59; }
a img { border: none; }

This is what I've tried, knowing next-to-nothing (as will be apparent):

.content a { color: #C35617; text-decoration: none; }
a:visited { color: #000000; text-decoration: none; border-bottom: 1px dotted #5F5A59; }
a:hover { color: #df0000; text-decoration: none; border-bottom: 1px dotted #5F5A59; }
a img { border: none; }

.sidebar a { color: #C35617; text-decoration: none; }
a:visited { color: #000000; text-decoration: none; }
a:hover { color: #df0000; text-decoration: none; border-bottom: 1px dotted #5F5A59; }
a img { border: none; }

Clearly, this is not getting the job done. I'm using Cutline 1.4 three column right, on WP 2.8.4, site is here.

I welcome all thoughts, suggestions, recommendations. Will accept a fair amount of snippy attitude. Profuse thanks!

[rogerewing]

In my Cutline wodpress URL, I had a widget for adding "Twitter Updates" to the sidebar.
I now have upgraded to hosted Cutline and don't know how to add Twitter Updates to the sidebar.
Thanks in advance for your assistance.
Roger Ewing

[sofimi]

What do you mean upgraded to hosted Cutline? Are you on WordPress.com or not? What's your URL?

It shouldn't make a difference as this is a widget; you should just be able to drag and drop it in the Widgets portion of your admin.

In my Cutline wodpress URL, I had a widget for adding "Twitter Updates" to the sidebar.
I now have upgraded to hosted Cutline and don't know how to add Twitter Updates to the sidebar.
Thanks in advance for your assistance.
Roger Ewing

[rogerewing]

I have a free wordpress URL with Cutline theme (rogerewing.wordpress.com). Not enough versatility for me. So I established a godaddy hosted site with Cutline theme (rogerewingblog.com) Gives me a full range of options.

The Cutline theme on the wordpress.com site had a widget for Twitter Updates. The hosted site does not have the same widget.
I really liked the Twitter Update widget and don't know where to find it for the hosted Cutline Theme.
Roger

[sofimi]

Widgets are technically plugins, and you have to install them separately. I suggest you do a search for plugins in the admin panel for the said widget, install it, and drag it to the sidebar in the Widgets panel.

Not all the Widgets in WordPress.com are available as freely installable plugins, so you'll have to check.

I have a free wordpress URL with Cutline theme (rogerewing.wordpress.com). Not enough versatility for me. So I established a godaddy hosted site with Cutline theme (rogerewingblog.com) Gives me a full range of options.

The Cutline theme on the wordpress.com site had a widget for Twitter Updates. The hosted site does not have the same widget.
I really liked the Twitter Update widget and don't know where to find it for the hosted Cutline Theme.
Roger

[rogerewing]

Thanks found a widget and installed it.

[jgolick]

Many thanks! Just found this reply now, randomly. Must not have set it up for email replies. Appreciate the help.