Moving Widgets to Sidebar from Footer in Balloons Theme

famouslyso · Member · Aug 20, 2012 at 1:29 am
Copy link

Add topic to favorites
I’m hoping to move the widgets from the footer of my theme to a sidebar. Is this even possible? I’m using the Balloons theme. Here’s the blog: http://nose-in-a-book.net/

The blog I need help with is: (visible only to logged in users)
raincoaster · Member · Aug 20, 2012 at 1:50 am
Copy link
Balloons does not have a sidebar, and you can’t add one in CSS. If you really want a sidebar, you’ll have to choose a different theme.
famouslyso · Member · Aug 24, 2012 at 1:06 am
Copy link
From what I’ve seen with other issues like this, however, is that it can be changed and customized. Maybe not easily, but it can be done. The few things I’ve tried have brought the widgets into a sidebar, but not in a pretty fashion at all.
timethief · Member · Aug 24, 2012 at 3:02 am
Copy link
The CSS upgrade cannot be used to add a sidebar to pages which do not have one already. That would require hacking of the underling PHP script files, which we cannot do on free hosted WordPress.com blog .
http://en.support.wordpress.com/themes/editing-themes/
http://en.support.wordpress.com/custom-design/#frequently-asked-questions
designsimply · Member · Aug 30, 2012 at 3:47 pm
Copy link
Actually, you can move the footer widgets like you originally asked. Here’s an example to get you started:
```
@media screen and (min-width: 801px) {
	#main {
		position: relative;
	}
	.col1 {
		position: absolute;
		top: 235px;
		left: -230px;
	}
}
```
The @media part makes the change only for large screen sizes—which keeps things responsive for mobile.

If you make this change, you may need to make some additional spacing adjustments overall. Also, I would recommend putting all the widgets into one footer widget area and moving that one instead of trying to also move the other two separately. You can move stuff around in the Appearance → Widgets page once you get everything sorted out with the CSS.

Also, I noticed you removed the gap for the balloons, but the gap is still there if you’re viewing with a screen size <800px. Add this to fix:
```
@media screen and (max-width: 800px) {
	header#masthead {
		margin: 0 0 25px;
	}
}
```
famouslyso · Member · Aug 30, 2012 at 8:27 pm
Copy link
Thank you so much! Worked like a charm!
symplesyrupart · Member · Sep 9, 2012 at 4:28 pm
Copy link
I had the same question! And I’m very new to WordPress so this is a silly question but… where would I enter that coding to change the Widget position?
famouslyso · Member · Sep 11, 2012 at 9:52 pm
Copy link
Appearance > Custom Design > CSS

No items found.