Tag Cloud & Sidebar Adjustments

[RaspberrySunshine]

Hi, I want to add a tag cloud to my sidebar. The problem is that when I look into Firebug to see what I need to adjust, I end up adjusting and messing up the rest of my sidebar items.  Everything is how I want it to look except the cloud.

Is there anything I can add to the CSS that would single out only the tag cloud so I can fit it in my sidebar?  I have the tag cloud up now so you can see:  http://raspberrysunshine.com

It is very spaced out lengthwise and pushes way left. I need to make it centered (as much as I can) under my title, which is a custom uploaded design.

Is there anything I can do to make it look better and centered?

Cindy

[ramseyp]

Hi Cindy,

The tag cloud widget has a unique class that you can use to focus your adjustments to just that div and its contents: widget_tag_cloud. So, when you write CSS for the contents of the tag cloud div, you preface the CSS with .widget_tag_cloud. For instance, if you wanted to change the link color to red for the tags, it might look like this:

.widget_tag_cloud a { color: $ff0000; }

Read in English, it reads: any anchor tags inside the element with the class of widget_tag_cloud, color them red.

In your case, though, the alignment problem appears to be a CSS rule already in place. You can look for this in your CSS:

#featured-bottom .widget h2,
#content h6,
#sidebar h4,
#sidebar-alt h4,
#sidebar .widget_tag_cloud div div,
#sidebar-alt .widget_tag_cloud div div,
.author-box b, #comments h3

There is a declaration of margin-left: -25px that is pulling the nested div over to the left 25px. You could override this with a single rule that has greater specificity that the bolded line above. Simply add the body tag to the chain like this:

body #sidebar .widget_tag_cloud div div { margin-left: 30px; }

and you'll have a rule that overrides the one above. Add that line to your CSS and you should have the tag cloud align with your other sidebar content.

---

Community • Work • Conversations

[RaspberrySunshine]

The problem with overriding the current CSS is that when I added:

body #sidebar .widget_tag_cloud div div { margin-left: 30px; }

It moved my tag cloud, but also my custom tags, cut the bottoms off the custom tags and the tag titles went up. The fonts were also changed to my  raspberry color and in 2 separate fonts.

I'm still fiddling with the information go gave so I'm going to go back and try again.

Cindy

 

[Author]

Posts