WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Styling of Sidebar Widgets (14 posts)

  1. grangewood
    Member
    Posted 4 years ago #

    I'm in the process of adding a blog section to our company website http://www.grangewoodfencing.com by using WordPress to add a /news section.

    My hope is to try and make the blog part look as much like the rest of the website as possible. I've had some success so far modifying the default Kubric theme using the Firefox Web Developer Toolbar to identify the various CSS classes I will need to alter.

    I've changed the top of the sidebar widgets to match the existing site theme, but what I can't work out is how to alter the actual content ie. to put a border around each individual widget, style the content and add a footer to the bottom of each one.

    If I haven't explained that very well, you can check out the styling I'm trying to match by looking at the original website.

    Any help would be much appreciated!

  2. esmi
    Theme Diva & Forum Moderator
    Posted 4 years ago #

    Try using #sidebar ul li.widget to apply global styling to all of your sidebar widgets. Each widget also has its own individual class that you can also use to apply individual styling. Examine the source markup of your blog's index page to identify the individual class. Or, if you use Firefox, try Firebug.

  3. hazelbug
    Member
    Posted 4 years ago #

    I'm having trouble with my RSS section in the sidebar here. http://www.bearhugsforbabies.org/newsite.

    I created styling for "rsswidget" by adding it as

    #sidebar .rsswidget {
            margin-bottom: 20px;
    overflow: hidden;
    line-height: 10px;
    font: Trebuchet;
    font-size: 10px;
    }

    And it applies the style partially. It still seems to take the line-height from the "#sidebar .block ul li" and I am not sure why?

    any ideas?

  4. Mark / t31os
    Moderator
    Posted 4 years ago #

    Try this, as a quick fix...

    .block li a {font-size:inherit;line-height:inherit;}

  5. hazelbug
    Member
    Posted 4 years ago #

    Oh I think I might not have explained right. It seems to be inheriting and I don't want it too... Here is the entire code

    #sidebar a { color: #354B59; text-decoration: none; }
    #sidebar a:hover { color: #996666; }
    
    #sidebar .block {
    	overflow: hidden;
            margin-bottom: 20px;
    }
    #sidebar .block ul li {
    border-top: 1px dotted #b7c396;
    line-height: 30px;
    font: Trebuchet;
    font-size: 14px;
    }
    
    #sidebar .pages {
    border-top: 1px dotted #b7c396;
    line-height: 10px;
    font: Trebuchet;
    font-size: 14px;
    }
    
    #sidebar .rsswidget {
            margin-bottom: 20px;
    overflow: hidden;
    line-height: 10px;
    font: Trebuchet;
    font-size: 10px;
    }
  6. Mark / t31os
    Moderator
    Posted 4 years ago #

    Did you actually try the suggestion though?

    Your widget with the smaller text will look the like the one above it if you apply the suggested code...

  7. hazelbug
    Member
    Posted 4 years ago #

    :) I did, but I don't want my rsswidget to take on the .block code font size or line-height. I want it to use the code I put in there, but for some reason - not sure why - it's only taking on the font and fnt size, but the line-height is still being set at 30px when I want it to be 10px.

  8. Mark / t31os
    Moderator
    Posted 4 years ago #

    The block has the same class as the other block, how do you expect to differentiate the two if the code for both is essentially the same?

  9. hazelbug
    Member
    Posted 4 years ago #

    I think I am misunderstanding... I am trying to stye the RSS Widget stories only... "#sidebar .rsswidget"

    I don't want the #sidebar .rsswidget style to essentially override what the theme has for the sidebar .block or sidebar .pages... and it is in terms of font size, but not line-height.

  10. Mark / t31os
    Moderator
    Posted 4 years ago #

    Maybe if you could tell me what the list/links/sidebar bit you want to style "should" look like...

    The line-height isn't going to work all the way down at 10px due to the existing padding on the LI element it sits in... (i think)...

    Can you handle some basic graphic chopping? .. if so can you make an image to show how you want it to look, and we can go from there...

  11. hazelbug
    Member
    Posted 4 years ago #

    Yes, Thank you! I want it to look like this

    http://www.bearhugsforbabies.org/look.gif

  12. Mark / t31os
    Moderator
    Posted 4 years ago #

    I had a play around, the line-height is inheritted from the LI element.

    The reason the link doesn't accept the line-height is because it's an inline element...

    Use display:block in your CSS...
    Example:
    a.rsswidget {line-height:20px;display:block;margin:0}

    You'll need to set the margin to 0 to.. or you'll notice what looks like padding beneath the links...

    Play with what i've put above, i'm pretty sure it'll behave as you want now..

  13. hazelbug
    Member
    Posted 4 years ago #

    That works perfectly. Thank you so much for taking the time to help me. I REALLY appreciate your help!

  14. Mark / t31os
    Moderator
    Posted 4 years ago #

    You're welcome.. :) ..

    Admittedly i didn't know that about inline elements until i looked at your particular problem... :) It makes perfect sense though...

Topic Closed

This topic has been closed to new replies.

About this Topic