Support » Fixing WordPress » How to center align widget (from in sidebar

  • Hi, new to WordPress here… I’ve been working at getting my site up and running and am almost done and can’t figure out the last parts I want to do. I would like to put the widgets (from their site NOT wordpress) into a Text/HTML sidebar widget on my blog.

    But when I paste the code from into a text/html sidebar widget and save it, the widget appears and works fine, but is completely left justified…and it doesn’t have any padding around the edges.

    I’d like to be able to center it with a decent size padding within the sidebar widget and I have NO idea how to do it? Is this in the CSS file? Widget code? Sidebar code? if so, what code (and where) should I put it? I’m an extreme beginner so any help would be greatly appreciated! Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Something like this should works, even if it’s kinda dirty:

    <div style="text-align:center;">
        <!-- Your last fm code here -->

    Even dirtier:`
    <!– Your last fm code here –>


    Thanks for the response, but neither of those worked. The first option did not center it at all, but rather added a whole ton of plain text code that appears in the sidebar. The second option, centered the widget, but still added the plain text code (looks like the code for the widget) as just text above the actual widget.

    Any other ideas?

    Ok, so I’ve been trying a ton of different things to no avail. I just wanted to update this with the widget code in case anyone sees anything. I noticed the style at the beginning is text/css…does that determine the alignment and padding? If so, is there a way to change the sytle/css settings?

    <style type=”text/css”>table.lfmWidgetchart_5b2b32b14bf6588fdde46e5965a6e51d td {margin:0 !important;padding:0 !important;border:0 !important;}table.lfmWidgetchart_5b2b32b14bf6588fdde46e5965a6e51d tr.lfmHead a:hover {background:url( no-repeat 0 0 !important;}table.lfmWidgetchart_5b2b32b14bf6588fdde46e5965a6e51d tr.lfmEmbed object {float:left;}table.lfmWidgetchart_5b2b32b14bf6588fdde46e5965a6e51d tr.lfmFoot td.lfmConfig a:hover {background:url( no-repeat 0px 0 !important;;}table.lfmWidgetchart_5b2b32b14bf6588fdde46e5965a6e51d tr.lfmFoot td.lfmView a:hover {background:url( no-repeat -85px 0 !important;}table.lfmWidgetchart_5b2b32b14bf6588fdde46e5965a6e51d tr.lfmFoot td.lfmPopup a:hover {background:url( no-repeat -159px 0 !important;}</style>
    <table class=”lfmWidgetchart_5b2b32b14bf6588fdde46e5965a6e51d” cellpadding=”0″ cellspacing=”0″ border=”0″ style=”width:184px;”><tr class=”lfmHead”><td></td></tr><tr class=”lfmEmbed”><td><object type=”application/x-shockwave-flash” data=”” codebase=”,0,0,0″ id=”lfmEmbed_1114729565″ width=”184″ height=”179″> <param name=”movie” value=”” /> <param name=”flashvars” value=”type=recenttracks&user=jchristian79&theme=red&lang=en&widget_id=chart_5b2b32b14bf6588fdde46e5965a6e51d” /> <param name=”allowScriptAccess” value=”always” /> <param name=”allowNetworking” value=”all” /> <param name=”allowFullScreen” value=”true” /> <param name=”quality” value=”high” /> <param name=”bgcolor” value=”d01f3c” /> <param name=”wmode” value=”transparent” /> <param name=”menu” value=”true” /> </object></td></tr><tr class=”lfmFoot”><td style=”background:url( repeat-x 0 0;text-align:right;”><table cellspacing=”0″ cellpadding=”0″ border=”0″ style=”width:184px;”><tr><td class=”lfmConfig”></td><td class=”lfmView” style=”width:74px;”></td><td class=”lfmPopup”style=”width:25px;”></td></tr></table></td></tr></table>

    UPDATE: I was able to use the <center> code before and after to get the widgets to center, I must not have been doing it right first…now I just need to get it to have some top and bottom padding to it…how do I do that?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to center align widget (from in sidebar’ is closed to new replies.