WordPress.org

Ready to get started?Download WordPress

Forums

Widgetized footer (13 posts)

  1. brokensite
    Member
    Posted 3 years ago #

    Hi,

    How is it possible to have 3 column widget area right above footer? I used this tutorial (http://headwaytips.com/creating-a-widgetized-footer/) but the result is 3 vertical widgets which I want them to be horizontal , this is my website
    http://systemes-d-alarme.beta.commentchoisir.info/traitementair/
    and the one I use as a model which has a Widgetized footer:
    http://chauffage-electrique.commentchoisir.info/

    (I'm using Artisteer 2.4 as template generator)

    Thank you guys

  2. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    it is probably a css issue; did the tutorial have a section to explain how to align the widgets?

    as there are no widgets in your website at the moment, it is not possible to check if and how to resolve the alignment by making changes to the style.css of your theme.

    as you mentioned the site you modelled your theme on, it might be possible to have a look at their style sheet and see how they have aligned the widget areas.

    if you could install some widgets into the three footer widget areas, and report back here, someone might be able to check this.

  3. brokensite
    Member
    Posted 3 years ago #

    I have added widgets so u can see how they are aligned, the problem is that they use SPIP and it is not helpful to see what they are doing
    thank you by the way

  4. brokensite
    Member
    Posted 3 years ago #

    the css code I used:

    /* footer widgets */
    body.custom div#footer-widgets {width:100%;}
    body.custom div#footer-widgets div.footer-item {float:left; width:30%; margin:15px;}
    body.custom div#footer-widgets h2 {font-weight:bold;font-size:13px;line-height:20px;border-bottom: 1px solid #ddd; margin-bottom:4px;padding-bottom:4px;}
    body.custom div#footer-widgets ul {padding-bottom: 10px; margin:10px 0 0px;}
    body.custom div#footer-widgets ul li {list-style-type:none; margin: 0 0 2px; padding: 0 0 2px;}
    body.custom div#footer-widgets ul li a {text-decoration:none;}
    body.custom div#footer-widgets ul li a:hover {text-decoration:underline;}
    body.custom div#footer {padding-bottom:25px;margin: 0 auto;}
    body.custom #footer ul {padding-left: 15px}
    /* end footer widgets */

    the footer code

    <div id="footer-widgets" class="clearfix">
    <?php
    if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer-Widgets') ) echo '<p align="center">You can put a bunch of widgets here</p>';
    ?>
    <div style="clear:both;"></div>
    </div>

    function php code:
    if (function_exists('register_sidebar'))
    register_sidebar(array('name' => 'Footer-Widgets','before_widget' => '<div class="footer-item">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));

  5. brokensite
    Member
    Posted 3 years ago #

    function.php

    if (function_exists('register_sidebar'))
    register_sidebar(array('name' => 'Footer-Widgets','before_widget' => '<div class="footer-item">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));

    css

    /* footer widgets */
    body.custom div#footer-widgets {width:100%;}
    body.custom div#footer-widgets div.footer-item {float:left; width:30%; margin:15px;}
    body.custom div#footer-widgets h2 {font-weight:bold;font-size:13px;line-height:20px;border-bottom: 1px solid #ddd; margin-bottom:4px;padding-bottom:4px;}
    body.custom div#footer-widgets ul {padding:0px; margin:10px 0 0px;}
    body.custom div#footer-widgets ul li {list-style-type:none; margin: 0 0 2px; padding: 0 0 2px;}
    body.custom div#footer-widgets ul li a {text-decoration:none;}
    body.custom div#footer-widgets ul li a:hover {text-decoration:underline;}
    body.custom div#footer {padding-bottom:25px;margin: 0 auto;}
    body.custom #footer ul {}
    /* end footer widgets */

  6. brokensite
    Member
    Posted 3 years ago #

    footer:

    if (function_exists('register_sidebar'))
    register_sidebar(array('name' => 'Footer-Widgets','before_widget' => '<div class="footer-item">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));

    So here it is all codes I have added to my Artisteer template

  7. brokensite
    Member
    Posted 3 years ago #

    Oh sorry , I'm new to this forum, I have sent everything twice! :))

  8. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    the reason was - your theme does not have a body class of .custom:

    removing it from the styles should work:

    /* footer widgets */
    div#footer-widgets {width:100%;}
    div#footer-widgets div.footer-item {float:left; width:30%; margin:15px;}
    div#footer-widgets h2 {font-weight:bold;font-size:13px;line-height:20px;border-bottom: 1px solid #ddd; margin-bottom:4px;padding-bottom:4px;}
    div#footer-widgets ul {padding-bottom: 10px; margin:10px 0 0px;}
    div#footer-widgets ul li {list-style-type:none; margin: 0 0 2px; padding: 0 0 2px;}
    div#footer-widgets ul li a {text-decoration:none;}
    div#footer-widgets ul li a:hover {text-decoration:underline;}
    div#footer {padding-bottom:25px;margin: 0 auto;}
    #footer ul {padding-left: 15px}
    /* end footer widgets */

    (at least checked in firefox)

  9. brokensite
    Member
    Posted 3 years ago #

    Wow you've just made my day, thank you so much, it works , thank you

  10. brokensite
    Member
    Posted 3 years ago #

    With many thanks to alchymyth this topic has been resolved

  11. greghickman
    Member
    Posted 3 years ago #

    I'm trying to do something similar to brokensite above but can't achieve the 3 columns within the footer. I followed the same tutorial as he did (as it's the only one i can find) and continue to have the 3 widgets sit on top of each other.

    I cannot for the life of me figure out how to create 3 columns in which the 3 widgets will be horizonal vs the vertical. Here is my blog:

    http://www.gregoryhickman.com/

    I literally followed this tutorial and have all the code in place per this post:
    http://headwaytips.com/creating-a-widgetized-footer/

    Can anyone help? Please!!!!

    Thanks in advance!

  12. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    I literally followed this tutorial

    not quite - spelling needs to be consistent (see also the tutorial that you followed):

    in the html code: <div id="footer-widgets">
    (correct this, the line above is right)

    in custom.css #footer-widgets { ... }
    (this is ok in your code)

    (there is only a small typo:
    body.custom div.footer-widgets {width:100%;}
    needs to be:
    body.custom div#footer-widgets {width:100%;}
    but as 100% is default, this would have no bad effect)

  13. greghickman
    Member
    Posted 3 years ago #

    Wow that did it! So having a capital F and W is what was messing that up? I greatly appreciate your speed in response! I'm extremely beginner at this and learning slowly!

Topic Closed

This topic has been closed to new replies.

About this Topic