Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

How to center the Archives Widget?

  1. sentientmouse
    Member

    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.

  2. timethief
    Member

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

  3. sentientmouse
    Member

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

  4. designsimply
    Staff

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

    .widget_archive {
	text-align: center;
}

  5. sentientmouse
    Member

    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

  6. sentientmouse
    Member

    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!

  7. designsimply
    Staff

    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.

  8. sentientmouse
    Member

    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

  9. designsimply
    Staff

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags