Posted 1 year 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
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.
Posted 1 year 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
Posted 1 year 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>',));
Posted 1 year 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 */
Posted 1 year 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
Posted 1 year ago #
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)
Posted 1 year ago #
Wow you've just made my day, thank you so much, it works , thank you
Posted 1 year ago #
With many thanks to alchymyth this topic has been resolved
Posted 1 year 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!
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)
Posted 1 year 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!
This topic has been closed to new replies.
