Community Forums › Forums › Archived Forums › Design Tips and Tricks › Need Help Changing Size of Sidebar on Magazine theme
- This topic has 30 replies, 4 voices, and was last updated 11 years, 2 months ago by buddy_boy8403.
-
AuthorPosts
-
December 30, 2012 at 4:03 pm #8448rick4himMember
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!
December 30, 2012 at 4:53 pm #8459buddy_boy8403MemberA 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;}
December 30, 2012 at 5:00 pm #8462rick4himMemberDecember 30, 2012 at 5:06 pm #8464buddy_boy8403MemberThe sidebar width on your test site is already 300px.
December 30, 2012 at 5:09 pm #8467rick4himMemberHmmm....I had to make the Facebook 216 px in order to get it to fit...
December 30, 2012 at 5:32 pm #8473buddy_boy8403MemberTry 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.
December 30, 2012 at 5:36 pm #8474rick4himMemberThanks. 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!
December 30, 2012 at 5:51 pm #8479buddy_boy8403MemberIf 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.
December 31, 2012 at 1:55 pm #8621rick4himMemberI'm trying to make these changes but it looks like the line numbers are off..
Or I'm doing something wrong. 🙂
December 31, 2012 at 11:42 pm #8681rick4himMemberBump...
Anyone have any thoughts on this?
January 1, 2013 at 8:09 am #8717nickthegeekMemberyou'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; }
January 1, 2013 at 1:56 pm #8798rick4himMemberThanks 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.
January 1, 2013 at 2:43 pm #8809nickthegeekMemberFind 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.
January 1, 2013 at 2:45 pm #8810rick4himMemberNick, 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.
January 3, 2013 at 1:04 pm #9210rick4himMemberI 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
January 3, 2013 at 9:38 pm #9365buddy_boy8403MemberRick - did you get this fixed?
January 3, 2013 at 9:42 pm #9366SusanModerator@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)
January 3, 2013 at 9:50 pm #9368buddy_boy8403MemberRick - 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.
January 3, 2013 at 9:56 pm #9371rick4himMember@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.
January 3, 2013 at 10:07 pm #9374buddy_boy8403MemberWhich image isn't going all the way across? The Amazon image?
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.