• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Tag Cloud & Sidebar Adjustments

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Tag Cloud & Sidebar Adjustments

This topic is: not resolved

Tagged: css, Sidebar, specificity

  • This topic has 2 replies, 2 voices, and was last updated 10 years, 4 months ago by RaspberrySunshine.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • January 19, 2013 at 3:31 pm #13156
    RaspberrySunshine
    Member

    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

    January 19, 2013 at 8:13 pm #13199
    ramseyp
    Member

    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

    January 20, 2013 at 10:18 am #13280
    RaspberrySunshine
    Member

    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
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble