Community Forums › Forums › Archived Forums › Design Tips and Tricks › Change sidebar width eleven40
Tagged: Eleven40, sidebar width
- This topic has 14 replies, 3 voices, and was last updated 10 years, 4 months ago by tekkentim.
-
AuthorPosts
-
August 13, 2013 at 12:21 am #55968tekkentimMember
Hi everyone,
I tried the search, and googled for a solution without succes..
I'm using adsense, and want to use a 300 x 250 ad block in a widget, but the sidebar needs a bit more space. How can i adjust the width of the sidebar on the left?
Thanks in advance !
August 13, 2013 at 6:18 am #56008TerryMemberPlease post a link to your site.
August 13, 2013 at 8:11 am #56050tekkentimMemberHi Terry,
I'm using Eleven40 for a lot of sites.. one of them is Dumbell Oefeningen
Thx again for helping !
August 13, 2013 at 9:04 am #56074TerryMemberTo make this change requires editing your site's style.css file.
You'll want to edit the style.css to change the width of the sidebar but you'll also have to decrease the width of your content.
Say you want to increase the width of the sidebar to 320px (and decrease the content by the amount of the increase)...
around line 1096 you'll see
.sidebar { width: 250px: => change 250 to 320 }
around line 575 you'll see
.sidebar-content #content { width: 810px; => change 810 to 740 }
Note that the change may impact your media queries( and responsiveness), so you may want to see how they're impacted.
Lastly, you may need to change any margins or padding to align your content within the new resized widgets.Hope this helps!
August 13, 2013 at 2:38 pm #56153tekkentimMemberIt worked ! Thanks so much 😉
August 13, 2013 at 2:39 pm #56155TerryMemberPerfect!
August 13, 2013 at 3:43 pm #56174AnnakaMemberDear Terry. Since you have been so kind as to point out where/how to do this on on the Eleven40 theme, could you possibly assist in pointing out what lines of code to change on the Luscious theme to accomplish the same thing? The site is WhoWasVotedOff.com and as you can see, the right column needs tweaking to fit the most popular and profitable adsense square ad at 300 by 250.
Also, I would kindly love to know where/how to reduce that white margin on both sides of the column/content/column area as I would rather put that extra space into the center content area once the right column size is increased. I'm afraid I'm a bit of a CSS newbie, but I am working at it!
August 13, 2013 at 3:46 pm #56175TerryMemberAnnaka,
I am headed out for the evening and if you can wait will look at it in the morning ( EST US).I haven't looked, are you running the most recent version of the Luscious theme/WP3.6/Genesis 2.0?
Warm Regards,
TerryAugust 13, 2013 at 4:15 pm #56180AnnakaMemberAbsolutely. My poor Genesis/StudioPress/CSS newbie will wait at your leisure since my Google and forum searching have yielded nothing so wonderfully simple to understand as the advice you gave the previous poster here! And yes, I am using the most recent version of the theme, just purchased this week! (Should have measured those column widths somehow before buying... or I missed the stats on those somewhere!)
August 19, 2013 at 6:02 pm #57455AnnakaMemberHello Terry, just checking in to see if you might have had a chance to take a look-see at the Luscious theme regarding increasing the right column width and might have any sage advice?
August 20, 2013 at 10:03 am #57557TerryMemberWow, I replied to this last week and am underwater this week. Let me check where it got posted to, maybe another thread?
August 20, 2013 at 10:13 am #57568TerryMemberI was in a hurry & during my first coffee so... maybe I just typed it and didn't hit Submit. Such a waste, I'm sorry.
Won't get back to it until maybe tonight.Basically it's the same as the previous answer. You can do what I did.. use Firebug or Chrome Tools to inspect the widths. The total width must remain the same so whatever you add to the sidebar needs to be removed from the content. If you're working with two sidebars, the total still remains the same, you may just distribute the widths differently.
The beauty of using Firebug or Chrome Tools is that you can view your changes live before making them in css. A real timesaver!
Andrea has a great tut on Firebug at http://www.studiopress.com/tips/using-firebug.htm that may help.
Good luck with the style.css. It's not rocket science but can certainly be confusing at times! 🙂 I have found css-tricks.com helpful.
October 23, 2013 at 3:02 am #68378tekkentimMemberSorry to bump this old topic one more, but i thought it would be better to keep this in one topic.
I want to switch to the Eleven 40 Pro theme, but the style.css is different than the Eleven 40 theme..
Could you give me instructions on how to achieve the same thing with this theme ?
Thx in advance !!
October 23, 2013 at 4:54 am #68382TerryMemberGood Morning tekkentim,
Possibly someone else could assist you with this. That's a bigger job than I can commit current volunteer time for.
Best of luck to you!November 6, 2013 at 12:02 pm #71281tekkentimMemberThanks ! Perhaps someone can help me ? 😉
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.