Twenty Twelve – left sidebar needs padding but won't take it
-
I have installed the latest version of WordPress and am using the Twenty Twelve theme – making changes to a child theme.
I have changed the main width to 920 and gotten rid of all the white space around it.
I also put the sidebar on the left instead of the right.
Now, there is zero padding for the left sidebar and the text is right up on the left side. If I do anything to give it padding, the sidebar drops to the bottom of the page, though still on the left, but that is a problem.
I have tried changing the width of the content area and can get it really small, but the sidebar still drops to the bottom if I add any padding to it at all.
What am I doing wrong?
The blog I need help with is: (visible only to logged in users)
-
-
Hi, I took a look at your child theme CSS, and this would be the easiest way to take care of the issue.
.widget-area { margin-left: 25px; width: auto; } -
-
Thank you thesacredpath!
that worked perfectly.
I had tried #secondary and a few other things, so maybe that was the actual problem.
I have another question, should I start a different topic and mark this one resolved?
Thanks again!
-
-
ok well as you can see at that site there is a relatively blank home page and then some inner pages (About Us, Admissions, etc.) where there is a list of links in the left sidebar.
I need to make that list of links different for each page, ideally as menus or text blocks that are editable from within the admin panel, even if I have to set up their locations in the code, and they will need custom css as well.
Some pages might not need anything on the left.
-
If you install the Jetpack plugin, created by WordPress.com into your site, and connect it to your WordPress.com account, it will add a widget visibility feature where you can control which widgets appear on which pages.
You can then create as many custom menus as you need and insert custom menu widgets and set the visibility for each of those widgets to where they show only on the page you desire.
-
Thank you! That works great, but I have another bit of an issue.
I need the entire left area to have a background and it’s 250px wide.
I adjusted the menu to 250px and the percentages of widget-area to 30% and content to 70% (instead of 25 and 75), but I am not sure if I should avoid pixels and just use the percentages. When I tried that alone, it didn’t work.
Also, the menu now has the background, but it does not carry down the sidebar to the bottom.
-
Generally, stick with what is used in the original theme CSS. Twenty Twelve is a responsive width theme, and they almost always use percentages for widths, although some use em or rem units. If you stick with what the original theme uses, you can retain the responsive width of the theme. The sidebar area on the FAQ page looks to be about 250px in width when I use the Firefox extension, Measure-it and check it.
The sidebar length is determined by the number of widgets that are in the sidebar.
If you want it to go the full length of the left area, I would suggest putting the background image in .wrapper and set it to top left.
Remove this
#secondary { background-image: url("../../../images/contentPageBG.jpg"); background-position: 0 0; background-repeat: repeat-y; }and replace it with this
.wrapper { background: url("http://webseminary.com/images/contentPageBG.jpg") repeat-y scroll top left transparent; } @media (max-width: 600px) { .wrapper { background: none; } }The @media rule above removes the wrapper background when the sidebar drops down below the content so that it isn’t still behind the content.
-
yes, I am concerned about retaining the responsive aspect of the theme and so am trying to adjust things in a way that doesn’t break that.
I have made the above changes, but the custom menu title (About Us) isn’t wide enough for the background to fill the area and it cuts off on the right hand side.
Also, the pages without a custom menu have the sidebar background showing even though there aren’t any widgets or menus. I deleted the menu and put it back and it’s still the same. I can set the menu itself (#nav_menu-3) to be width 250px and that fixes it, but again I don’t want to break the theme. I can set the title to 250px and then it’s way too big and drops down or fills outside the box.
-
Ok, let’s make the selectors that have to do with the about page and the menu customizations specific to that page by preceding the selectors with the body class page ID such as this:
.page-id-8 #wrapperCan you add in the background that is getting cut off in the about us menu title so I can take a look at it on your site? There are some background size declarations that can be used. If you want to read up on them and try things yourself, see this page at W3C Schools.
-
Yeah, it’s there in the left sidebar menu if you go to the About Us page or any of its child pages. It’s gray and it’s chunking over to the right. I’ve cleared my cache and wondering if we’re both seeing the same things.
I’m going to have to put in custom menus for nearly all the pages in the top nav, so I was hoping just a sidebar/secondary/widget-area class would work. But, if I have to do them one by one, that’s still ok. Just want to really keep the theme responsive and not mess with the original coding.
Thanks so much for your help!
-
Ah, ok now I see. I didn’t know if you had a different image you wanted behind the title or not. Add the following, which will take the grey background color out of all custom menu widgets.
.widget_nav_menu .widget-title { background: none !important; } -
Actually I want the gray background, but I need it to be the same size as the widget area. I can set it to 250px width but that doesn’t work. If I set the widget-area or that particular nav menu to 250px that works but I’m thinking it’s not a good idea for the responsive aspect of the theme, so how do I get it to be full gray without setting the width in pixels?
-
The grey background in title of that widget on the about page I’m seeing as the exact same size as the rest of the widget below, with the gradient. I checked in Safari, Firefox and in Chrome and it is the same width.
Perhaps I’m missing what you are talking about. Can you take a screenshot, upload it to your media library and then give me a link so I can see what you are seeing?
-
Here is what I am seeing in my three browsers: https://i.cloudup.com/ojHxGch4nK-3000×3000.png
-
Yes, if I don’t set the #nav_menu-3 to width: 250px; then it does this: http://webseminary.com/images/ss1.jpg but I don’t want to break the responsive theme so I’m not sure how else to do it so it shows correctly.
-
Ah, I see now. Remove your 250px width you have in #nav_menu-3 and then add
width: 100%;to
#nav_menu-3 h3.widget-title -
Thank you so much. I’ve tried that and now the gray title background overextends the sidebar area. Also, the rollovers are not wide enough. With my 250px, everything looked fine, but again, not wanting to break the responsive aspect of the theme and percentages just didn’t work.
Basically, I’m trying to copy this site: http://www.seminary.ws/About-Us.aspx and that’s where I got the css from.
Also, there is the issue of having a sidebar background (gradient) on the pages without a sidebar. I’m thinking it’s because we put it in the wrapper and not the sidebar itself. Of course, I can just force some stuff in those pages to take up the sidebar, but I’d rather just not have it show if it’s not needed. What do you think?
- The topic ‘Twenty Twelve – left sidebar needs padding but won't take it’ is closed to new replies.
WordPress.com Forums 
