Return to Support

Widgets are not aligning

Home Forums Graphene WordPress theme Support Widgets are not aligning

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #6089

    My widgets are not aligning on my website theschoolphily.com. Do you know how to fix this issue?

    Thanks

    #33319
    Josh
    Member

    It’s because quite a few of your images inside the widget container are too big (too large of dimensions). You probably want to resize them before uploading, if possible… or, use inline css to “shrink” them down a little bit.

    #33320

    What dimensions should the images be?

    #33321
    Syahir Hakim
    Keymaster

    Actually one of your widgets has an unclosed <div>, which is causing the issue. Check the widget containing the school philly radio image, or the blogtalkradio widget.

    #33322

    Is this going to fix the issue on all of the widgets? The problem was occurring before we had that widget up.

    #33323
    Syahir Hakim
    Keymaster

    We might be talking about a different issue here, but there are two issues with your sidebar at the moment. Josh’s answer will fix one, and my answer will fix the other.

    #33324

    Do you know how to fix the alignment issue?

    #33325
    Syahir Hakim
    Keymaster

    One thing at a time. Fix that widget with the unclosed <div> first.

    #33326

    ok. Is the widget fixed?

    #33327
    Syahir Hakim
    Keymaster

    No, the Facebook widget and all the rest of the widgets below it are inside the radio widget. Check that radio widget for any unclosed <div>, and close it with </div>.

    #33328

    Here is the radio widget code, can you make the change and bold where it was. Thanks

    <object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=’http://download.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0′ width=’300′ height=’250′ name=”344091″ id=”344091″><param name=”movie” value=”http://www.blogtalkradio.com/btrplayer.swf?file=http://www.blogtalkradio.com%2Ftspradio%2Fplay_list.xml%3Fitemcount%3D5&autostart=false&bufferlength=5&volume=80&corner=rounded&callback=http://www.blogtalkradio.com/flashplayercallback.aspx” /><param name=”quality” value=”high” /><param name=”wmode” value=”transparent” /><param name=”menu” value=”false” /><param name=”allowScriptAccess” value=”always” /><embed src=”http://www.blogtalkradio.com/btrplayer.swf” flashvars=”file=http://www.blogtalkradio.com%2ftspradio%2fplay_list.xml%3Fitemcount%3D5&autostart=false&shuffle=false&callback=http://www.blogtalkradio.com/FlashPlayerCallback.aspx&width=210&height=270&volume=80&corner=rounded” width=”300″ height=”250″ type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” quality=”high” wmode=”transparent” menu=”false” name=”344091″ id=”344091″ allowScriptAccess=”always”></embed></object><div style=”font-size: 10px;text-align: center; width:220px;”>

    #33329
    Syahir Hakim
    Keymaster

    Remove this code right at the end:

    <div style="font-size: 10px;text-align: center; width:220px;">

    #33330

    Thank you it looks like that fixed one of the issues. Can you now help with the alignment issue.

    #33331

    Syahir

    Thanks for helping with the first issue, can you give me some assistance on fixing the alignment issue.

    #33332
    Josh
    Member

    1. Okay…. first image in sidebar…

    <img width="280" height="240" alt="" src="http://www.theschoolphilly.com/wp-content/uploads/2012/10/halloween2.jpg" title="halloween" class="aligncenter size-full wp-image-27614" style="width:280px;height:240px;">

    2. For second image down…

    <img width="280" height="240" alt="" src="http://www.theschoolphilly.com/wp-content/uploads/2012/08/TSPradio2-300x263.png" title="TSPradio" class="aligncenter size-medium wp-image-24847" style="width:280px;height:240px;">

    3. Your blog talk radio…

    <object width="280" height="220" id="344091" name="344091" codebase="http://download.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"><param value="http://www.blogtalkradio.com/btrplayer.swf?file=http://www.blogtalkradio.com%2Ftspradio%2Fplay_list.xml%3Fitemcount%3D5&autostart=false&bufferlength=5&volume=80&corner=rounded&callback=http://www.blogtalkradio.com/flashplayercallback.aspx" name="movie"><param value="high" name="quality"><param value="transparent" name="wmode"><param value="false" name="menu"><param value="always" name="allowScriptAccess"><embed width="280" height="220" allowscriptaccess="always" id="344091" name="344091" menu="false" wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" flashvars="file=http://www.blogtalkradio.com%2ftspradio%2fplay_list.xml%3Fitemcount%3D5&autostart=false&shuffle=false&callback=http://www.blogtalkradio.com/FlashPlayerCallback.aspx&width=210&height=270&volume=80&corner=rounded" src="http://www.blogtalkradio.com/btrplayer.swf"></object>

    4. To fix your facebook width… you need to add this to your custom css:

    #LikeboxPluginPagelet {
    width: 280px !important;
    }

    5. For your “Indigo” image… you need to change the width in the <object> tag from 300 px… to 280px.

    6. The next one is blank… so the code is improper and not loading correctly.

    7. For “Drinkers Philly”…

    <img width="280" height="250" class="aligncenter size-full wp-image-22202" title="CB_ad_300x250_phils" alt="" src="http://www.theschoolphilly.com/wp-content/uploads/2012/05/CB_ad_300x250_phils.jpg">

    8. The “Lions Den”…

    <img width="280" height="250" alt="" src="http://www.theschoolphilly.com/wp-content/uploads/2012/03/LionsDen-1.jpg" title="LionsDen-1" class="aligncenter size-full wp-image-19599">

    9. The “Basketball League”…

    <img width="280" height="400" class="aligncenter size-full wp-image-19800" title="PMBL AD-1" alt="" src="http://www.theschoolphilly.com/wp-content/uploads/2012/03/PMBL-AD-1.jpg">

    10. “State Shades”…

    <img width="280" height="251" alt="" src="http://www.theschoolphilly.com/wp-content/uploads/2012/05/Screen-Shot-2012-05-13-at-9.04.32-PM.png" title="Screen Shot 2012-05-13 at 9.04.32 PM" class="aligncenter size-full wp-image-22149">

    11. The “School Philly”…

    <img width="280" height="250" class="aligncenter size-full wp-image-19916" title="Picture 1" alt="" src="http://www.theschoolphilly.com/wp-content/uploads/2012/03/Picture-1.png">

    NOTE: See how I changed every instance of width from 300px… to 280px.

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.