How to center the Archives Widget?

  • Author
    Posts
  • #1144488

    I’d like to center my Archives Widget – the rest of my sidebar is centered (or mostly) and it just looks awkward being left-justified. Is there a way to center it?

    Many thanks,
    Mark

    The blog I need help with is sentientmouse.com.

    #1144689

    timethief
    Member

    I tagged this thread so it’s moved to the CSS forum for you, as yours is a CSS editing question.

    #1144733

    Thanks Timethief! I guess I should’ve known that, since the modification is beyond basic settings and checkboxes in the widget itself.

    #1144833

    To center the archives widget, add this to your Appearance → Custom Design → CSS editor:

    .widget_archive {
    	text-align: center;
    }
    #1144834

    Thanks, Designsimply!

    That worked perfectly, but it made me realize that the other widgets are not centered either (funny how centering just one can highlight that the others aren’t). Is there a list of the variables (e.g. widget_archive) used for all other widgets so that I can get the rest of them centered?

    Thanks a bunch :-)
    Mark

    #1144835

    Well, I’ve discovered a way, using the Firebug plugin for Firefox. It identifies the various widget information and now I’m good to go!

    #1144839

    Well, I’ve discovered a way, using the Firebug plugin for Firefox

    Nice! It looks like you have selectively picked out which widget names to center using the specific widget class name for each one. This is a more general example that could replace all of those with just one rule:

    .widget {
    	text-align: center;
    }

    If you look at the HTML with Firebug, you’ll notice that each widget had two class names: one is “widget” and one is something more specific like “widget_blog_subscription”.

    <aside id="blog_subscription-5" class="widget widget_blog_subscription">

    That’s why using “.widget” as a selector will also work.

    #1144840

    Thanks, Designsimply!

    I think the general code is one that I’d tried while testing various examples of code that I’d run across, but with the code that centered all of the widgets, the one thing that I discovered and that I hadn’t considered was that for my text widget with my copyright stuff, the text all went center-justified too! For that, I wound up using some code that nudged the whole widget to the right until it looked centered.
    I’ve been learning more CSS than I had ever imagined I’d need to know!

    Many thanks!
    Mark

    #1144841

    Sounds like you’re on the right track. :) CSS is fun!

The topic ‘How to center the Archives Widget?’ is closed to new replies.