Widgetized footer

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.

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

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>’,));

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

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

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

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)

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

With many thanks to alchymyth this topic has been resolved

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:

https://www.gregoryhickman.com/

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

Can anyone help? Please!!!!

Thanks in advance!

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)

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!