Genesis Sample – Need help with footer widgets

[Atila]

Hi forum people! 🙂

I bought Genesis few days ago and I almost have everything in place, except footer. Now there are 3 footer widget areas, but they are stacked one on another. You can see it here http://wpvodic.com I left some text, calendar and tag cloud. I want to make footer like this: http://prntscr.com/8cy0ik.
Did not found any similar question on the forum.

http://wpvodic.com

[Victor Font]

You don't mention what theme you are using and it's impossible to know with the minification plugins you are using, but you might want to try this:

Look in your functions.php for this line of code:

add_theme_support( 'genesis-footer-widgets', 1 );

and change it to:

add_theme_support( 'genesis-footer-widgets', 3 );

If that doesn't work, and you already have 3 separate footer widget areas, then you need to change your css.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Atila]

I have also installed Genesis framework + child theme od test site, and the footer is again not looking like it's shown in Genesis demo mode here. I know this is probably not common, but if anybody had expirience with this issue, let me know the solution. 🙂

[Atila]

Hey Victor! I am using Genesis Sample - The Genesis Framework free child theme. I have 3 separate widget areas, by default. So, then I would need to wrap those 3 widgets in CSS?

Yep,
//* Add support for 3-column footer widgets
add_theme_support( 'genesis-footer-widgets', 3 );
is here by default. I think they added it in v2.2.

[mmjaeger]

For some reason they left out the whole css part for the footer widgets - put this in your stylesheet and everything should work:

/* # Footer Widgets
---------------------------------------------------------------------------------------------------- */

.footer-widgets {
	background-color: #333;
	clear: both;
	padding-top: 40px;
}

.footer-widgets,
.footer-widgets a {
	color: #aaa;
}

.footer-widgets input {
	border: 1px solid #333;
}

.footer-widgets a.button,
.footer-widgets a:hover,
.footer-widgets a:focus {
	color: #fff;
}

.footer-widgets li {
	border-bottom: 1px dotted #666;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

.footer-widgets .widget {
	margin-bottom: 40px;
}

.footer-widgets p:last-child {
	margin-bottom: 0;
}

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
	width: 340px;
}

.footer-widgets-1 {
	margin-right: 60px;
}

.footer-widgets-1,
.footer-widgets-2 {
	float: left;
}

.footer-widgets-3 {
	float: right;
}

[Atila]

@Mmjaeger

Your code works! Yea, theme comes without css for footer widgets. I have tried putting in the code StudioPress gives but for some reason it did not work.

Thanks! 🙂

[Atila]

@mmjaeger

The second widget was pulling a little bit to the left side, so I have edited this piece:

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
width: 340px;
}

and changed the width to 360px, so now the 2nd widget is centered.
Let me know if it works for you!

[Author]

Posts