Need Help Changing Size of Sidebar on Magazine theme

Community Forums Forums Design Tips and Tricks Need Help Changing Size of Sidebar on Magazine theme

This topic is: not resolved

This topic contains 30 replies, has 4 voices, and was last updated by  buddy_boy8403 1 year, 3 months ago.

Viewing 15 posts - 1 through 15 (of 31 total)
  • Author
    Posts
  • #8448

    rick4him
    Participant
    Post count: 128

    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!

    #8459

    buddy_boy8403
    Participant
    Post count: 130

    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;}

    #8462

    rick4him
    Participant
    Post count: 128

    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.

    #8464

    buddy_boy8403
    Participant
    Post count: 130

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

    #8467

    rick4him
    Participant
    Post count: 128

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

    #8473

    buddy_boy8403
    Participant
    Post count: 130

    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.

    #8474

    rick4him
    Participant
    Post count: 128

    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!

    #8479

    buddy_boy8403
    Participant
    Post count: 130

    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.

    #8621

    rick4him
    Participant
    Post count: 128

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

     

    Or I’m doing something wrong. :)

    #8681

    rick4him
    Participant
    Post count: 128

    Bump…

     

    Anyone have any thoughts on this?

    #8717

    nickthegeek
    Keymaster
    Post count: 751

    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;
    }
    
    #8798

    rick4him
    Participant
    Post count: 128

    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.

    #8809

    nickthegeek
    Keymaster
    Post count: 751

    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.

    #8810

    rick4him
    Participant
    Post count: 128

    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.

    #9210

    rick4him
    Participant
    Post count: 128

    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

Viewing 15 posts - 1 through 15 (of 31 total)

You must be logged in to reply to this topic.