Ready to get started?Download WordPress


How to center align Last.fm widget (from Last.fm) in sidebar (5 posts)

  1. jchristian79
    Posted 5 years ago #

    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 Last.fm widgets (from their site NOT wordpress) into a Text/HTML sidebar widget on my blog.

    But when I paste the code from Last.fm into a text/html sidebar widget and save it, the last.fm 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!

  2. jbjweb
    Posted 5 years ago #

    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 -->


  3. jchristian79
    Posted 5 years ago #

    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?

  4. jchristian79
    Posted 5 years ago #

    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(http://cdn.last.fm/widgets/images/en/header/chart/recenttracks_regular_red.png) no-repeat 0 0 !important;}table.lfmWidgetchart_5b2b32b14bf6588fdde46e5965a6e51d tr.lfmEmbed object {float:left;}table.lfmWidgetchart_5b2b32b14bf6588fdde46e5965a6e51d tr.lfmFoot td.lfmConfig a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/red.png) no-repeat 0px 0 !important;;}table.lfmWidgetchart_5b2b32b14bf6588fdde46e5965a6e51d tr.lfmFoot td.lfmView a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/red.png) no-repeat -85px 0 !important;}table.lfmWidgetchart_5b2b32b14bf6588fdde46e5965a6e51d tr.lfmFoot td.lfmPopup a:hover {background:url(http://cdn.last.fm/widgets/images/en/footer/red.png) 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="http://cdn.last.fm/widgets/chart/19.swf" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" id="lfmEmbed_1114729565" width="184" height="179"> <param name="movie" value="http://cdn.last.fm/widgets/chart/19.swf" /> <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(http://cdn.last.fm/widgets/images/footer_bg/red.png) 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>

  5. jchristian79
    Posted 5 years ago #

    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?

Topic Closed

This topic has been closed to new replies.

About this Topic