Need Help Changing Size of Sidebar on Magazine theme

[rick4him]

I have the magazine theme and I'd like to make the sidebar 300 px at it's biggest width. I am switching over from another theme and all of my sidebar images and ads are 300 wide so I really need to stay with that.

Any help you can give me would be greatly appreciated.

Thanks!

[buddy_boy8403]

A link to your site would be helpful.  You can also use Firebug to figure this out yourself then modify your themes style.css file to your liking.

My experience with Genesis child themes is you would need to go into your themes style.css file and modify:

.sidebar {width: 270px;}

to

.sidebar {width: 300px;}

and then also modify:

.content-sidebar #content, .sidebar-content #content {width: 600px;}

to:

.content-sidebar #content, .sidebar-content #content {width: 570px;}

[rick4him]

Thanks for the help. I didn't post a link to the new site since I'm not going live with it until it's ready to go.

 

However the site I'm switching is this one. I have a test site up here.

 

Do you think what you posted would work? If so should I do this in a child theme?

 

Thanks.

[buddy_boy8403]

The sidebar width on your test site is already 300px.

[rick4him]

Hmmm....I had to make the Facebook 216 px in order to get it to fit...

[buddy_boy8403]

Try this:

On line 1290 of wp-content/themes/magazine.DISABLED/style.css, delete the padding: 15px 20px 20px;

On line 1276, add margin-left: -10px;

On line 714, change width to 600px;

On line 708, change padding to 20px;

Change your facebook width to 300px.

[rick4him]

Thanks. I hope you don't mind me being a bit of a rookie at this, but where do I make these edits? And do I do this in a child theme?  Also this issn't just for the Facebook box, I was just testing it with that. I'd like everything to be at 300 wide. Just like it is here. Thanks for your help!

[buddy_boy8403]

If you make those changes, the width of the sidebar will allow for anything to be 300px and it will display it nicely. You need to make the changes in your child theme's sytle.css file. So, using filezilla, connect to you host, navigate to wp-content > themes > magazine and open the style.css file. Then make the changes I mentioned above using an editor program like bluefish, save the changes and reupload the file using filezilla.

Alternatively, you can use the editor built into wordpress by going to your wordpress back end (wp-admin) and going to Appearance > Editor and clicking on the style.css stylesheet on the right hand side. The only problem is there are no line numbers if you go this route. So if you want to go this route, I would copy/paste the CSS straight from the WP Editor into Bluefish, find the line numbers in bluefish and make the changes there, then copy/paste from bluefish back to the WP Editor and save.

And no worries about being new - we all started there. I'm still learning everyday myself.

[rick4him]

I'm trying to make these changes but it looks like the line numbers are off..

 

Or I'm doing something wrong. 🙂

[rick4him]

Bump...

 

Anyone have any thoughts on this?

[nickthegeek]

you're almsot there. Find this in your styel sheet and set the width to 308px

.sidebar {
	display: inline;
	float: right;
	font-size: 13px;
	line-height: 20px;
	width: 300px;
}

[rick4him]

Thanks for the help, but am I supposed to add this in addition to the other code, or just this by itself?

If I'm supposed to add in addition to the code above I'm having trouble because the line numbers aren't matching up to mine.

[nickthegeek]

Find that code I posted. It is already in your style sheet. It has the width set to 300px just like it shows in the code I posted. You need to edit that code and change it to have a width of 308px.

[rick4him]

Nick, I get that part, but you're saying don't make any of the changes that Buddy Boy mentioned? I'm confused because you said he was almost there, but now it sounds like you're saying I shouldn't any of the code he posted. If so, how was he "almost there?" I just want to make sure I understand what you are saying.

 

Thanks for your help by the way.

[rick4him]

I wanted to make my side bar show up correct on the magazine them (300 px wide) and was told to make this change:

.sidebar {
    display: inline;
    float: right;
    font-size: 13px;
    line-height: 20px;
    width: 300px;
}

However, as you can see on my staging site things aren't looking correct. The boarder around the images off, and the sidebar doesn't look right. Hopefully someone can help me fix it.

Thanks so much

[buddy_boy8403]

Rick - did you get this fixed?

[Susan]

@buddy_boy8403 - based on Rick's new thread here, it doesn't look like he got his issue fixed:

http://www.studiopress.community/topic/need-help-fixing-issue-with-magazine-theme/

*Edited to add: I've just merged the two topics threads together, as it's the same question (with the same parties)

[buddy_boy8403]

Rick - In looking at your test site, it looks like you got this taken care of? If so, please mark your threads for this issue as resolved.

[rick4him]

@buddy,

 

You may want to look at it again. It's not working. Take a look at the test site and try to click on a single post with an image. You'll see the image doesn't go all the way across. Also you'll notice the side bar doesn't look right.

[buddy_boy8403]

Which image isn't going all the way across?  The Amazon image?

[Author]

Posts