ThemeShaper Forums » ThemeShaper WordPress Themes

[closed]

Widgets in the footer

(3 posts)
  • Started 9 years ago by Bluesky
  • Latest reply from Bluesky
  • This topic is not a support question
  1. Bluesky
    Member

    I am building my own theme with the full and fantastic Ultimate WordPress Theme Tutorial here on Themeshaper.
    I am stucked with the following :
    Styling the widget area I created for the footer.
    So to understand what I did here are some pieces of code :
    In functions.php FILE I added :
    // Area 3
    register_sidebar( array (
    'name' => 'Footer Widget',
    'id' => 'footer-widget',
    'before_widget' => '<li id="%1$s" class="foo %2$s">',
    'after_widget' => "",
    'before_title' => '<h5 class="widget-title">',
    'after_title' => '</h5>',
    ) );

    Then In footer.php FILE I added ( in the footer div)


    <?php if ( is_sidebar_active('footer-widget') ) : ?>
    <div id="footer" class="widget">
    <ul class="foo">
    <?php dynamic_sidebar('footer-widget'); ?>

    </div>
    <?php endif; ?>

    Then In style.css FILE I added :

    #footer {
    clear: both;
    width: 1024px;
    height:238px;
    background: #000 url(images/d.png) no-repeat top left;
    }

    h5.widget-title {
    margin:0 0 0 15px;
    background: url(images/fr.png) no-repeat left top;
    font-size:27px;
    color:#303132;;
    }
    #footer ul{
    float:left;
    width:700px;
    background:#ccc;
    }
    #footer ul li{
    width:300px;
    background:red;
    padding:10px;
    display:inline;
    }

    So far, widget area is active and I can access each widget. But I can not align horizontally each widget.They remain vertical.
    I am used to use display:inline but this last styling mess-up my lay out.

    Am I missing something in the php files ? What am I doing so wrong ?
    I tried many things but it only gets worse.

    Thank you for your help,

    Posted 9 years ago #
  2. If you've got the widget area appearing fine (looks like it) this must be some sort of css issue. I HIGHLY recommend using the FIREBUG extension for firefox, which will allow you to right click and select 'inspect element' which will help you track down the alignment issue in short order.

    For any of us to take a look, provide a link to your broken page.

    Thanks

    Posted 9 years ago #
  3. Bluesky
    Member

    |Hi and thanks for passing by...
    Thread can be closed . I solved it. It was a css mistake : I corrected by using display:inline-block instead of inline only...
    Cheers,

    Posted 9 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.