Parallax Pro Footer 3 columns

[pilatessonsbeek]

Hi, I hope you can help me. I am currently working on my website (changed themes; now installed Parallax pro) and I want to add 3 columns in my Footer. I use 3 text widgets, but I don't know how I can arrange them to appear next to each other instead if on top of each other. Thanks.

Kind regards, Marjolein

http://www.pilateszoetermeer.nl

[Tom]

The best thing to do for this and also give more control over the widget content is to create the additional widget areas:

See: http://my.studiopress.com/tutorials/add-footer-widgets/
Change the existing code in functions.php for 3 widget areas:

/* Add support for 1-column footer widgets
add_theme_support( 'genesis-footer-widgets', 3 );

Then borrow the CSS from another 3-column-footer theme, e.g. eleven40. (content wrap is also 1140px in Parallax) Replace the section for "Footer Widgets" in your child theme stylesheet with the following snippet. You'll have to customize this for your colours and styles, also the media queries to make it work fully.

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

.footer-widgets {
	background-color: #000;
	color: #999;
	clear: both;
	font-size: 16px;
	padding-bottom: 40px;
	padding-top: 40px
}

.footer-widgets button,
.footer-widgets input[type="button"],
.footer-widgets input[type="reset"],
.footer-widgets input[type="submit"],
.footer-widgets .button {
	border: 1px solid #333;
}

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

.footer-widgets-2 {
	width: 360px;
}

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

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

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

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

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

.footer-widgets .entry-title a,
.footer-widgets .widgettitle {
	color: #fff;
}

.footer-widgets li {
	border-bottom: 1px solid #333;
	list-style-type: none;
	margin-bottom: 8px;
	padding-bottom: 8px;
	word-wrap: break-word;
}

.footer-widgets .search-form {
	width: 100%;
}

.footer-widgets .latest-tweets li span a {
	color: #ccc;
}

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[cmagras]

Thanks Tom! I know I didn't ask the question, but I had the same problem. 🙂 What do you recommend for the media queries? I know nothing about those, so I'm apprehensive when it comes to making sure they work properly!

[cmagras]

Oops, I tried the code you included Tom, but it didn't work. :/ I'm not sure why though. I added the snippet to my functions, and then replaced my "Footer Widgets" with the css you gave. Any ideas?

[Tom]

From your wording, it appears that you've added the code to functions.php instead of changing the existing code.

What theme are you using?

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Author]

Posts