change primary sidebars
-
Hi,
I’m trying to change the size of the primary-side bars to be exactly the same like my column. But I can’t. When I change the width, the whole page disintegrate. Can some one go ahead and adjust that for me?The blog I need help with is: (visible only to logged in users)
-
Hi there, since http://keggyskornerdotcom.wordpress.com/ is using The Piano Black theme, which only has a single sidebar, I’ll assume that you are talking about this other site: http://keggyskorner.wordpress.com/ .
Are you talking about making the left and right sidebars the same width, or do you want all three columns to be the same width? To widen any of the columns will require either robbing width from the others so that all three will fit within the 960px width of that section, or it will require making the parent div wider so that the other columns can be made wider. Are you wanting to keep the width of the center column and make the left and right that width too?
-
I need the left column to be wider as it is in my home page right now. But that doesn’t seem to work for my primary-side bars. So I want all ma pages to look exactly the same as my home page. Again, even after adjusting my homepage I see there is a free junk of space that is left to the left of my hero-slider; could you please fix that for me too. All I want is my left column to be 330px- width, and middle column about 450-500px. I really don’t care much about my right column. So I wish this could be done successful without interfering with my mobile view too. Since right now there’s a free junk space at the entire right size of the page.
Thanks,
P.S sorry for the long email. -
-
-
Hi, keggyskornercheck.com doesn’t exist according to my browser. Can you verify the URL please?
-
-
Please go ahead and make those CSS changes for me. I couldn’t figure out how to make the whole website fit in screen. I have included my preference on the email above.
-
-
The only way to have the left column 330px wide and have the center column the same as on the other pages, such as Dance Parties, would be to do away with the right sidebar, or make it very narrow (160px). The following does that, but as you will see, the facebook likebox widget hangs out to the right. Since that widget is done with iframe code from facebook, there is no way to override that and fix it, so you would have to move that widget to the left sidebar, or don’t use it (it has an internal width of 200px set). Modify your CSS for col 1, 2 and 3 as below to see how this looks.
#col-1 { margin-left: -20px; padding-right: 5px; width: 330px; } #col-2 { padding-right: 5px; width: 450px; } #col-3 { margin-right: 0; width: 160px; }Solution 2 involves getting rid of the right sidebar on the main page entirely with the following so that the current center column would be the same width as on your pages. Modify col 1, 2 and 3 rules as I have them below.
#col-1 { margin-left: -20px; padding-right: 5px; width: 330px; } #col-2 { padding-right: 5px; width: 625px; margin-right: 0; } #col-3 { display: none; }To make the header the same width as the content below, add the following CSS
.header-container { width: 960px; margin-left: auto; margin-right: auto; }and then modify col 1 2 and 3 code so they look like this (the following also does away with col 3 as in solution 2 above)
#col-1 { margin-left: 0; padding-right: 5px; width: 330px; } #col-2 { margin-right: 0; padding-right: 5px; width: 610px; } #col-3 { display: none; } -
Thank you so much for your suggestions. However, I was just wondering what can I do so as to maintain the right right column n the home page? and have the header fit on screen. Also, I thought to change the the side-bar for the tabs like “Dance-parties” I’d need to use ” primary-sidebar” as my id, sin’t?….
I think all the suggestions you offer would only alter the 1,2,3 column that are only on the home page.
-
The id for the “Dance parties” is not 3-column. It shows as “post-5” so what can I do about that?
-
#primary-sidebar {
margin-top: 100px;
width: 300px;
margin-left: 0px;
}This is what I’m trying for my primary sidebars. But it doesn’t work since changes the entire setup. I have also tried to get rid of the right column. When i put in the code including the image carousel and post-5 both move to the bottom of the site. What is that I’m doing wrong?
-
Also I have tried to access the blog from my phone, but still there seem to be some background space left on the right side of my page. What can we do to make it fit on the mobile version, or get rid of the extra junk?…
Thank you.
P.S I am again so sorry for all this very long emails.
-
To keep the same overall width and all 3 columns (when keeping the left at 330px), the center column can be no wider than 390px. To see that, replace #col-1 and #col-2 with the following
#col-2 { margin-right: 0; padding-right: 5px; width: 390px; } #col-3 { width: 190px; float: right; }and then add this, which will hide the 20px bit of the facebook iframe that was hanging out on the right side of the widget (the likebox content will be cut off slightly).
.widget { overflow: hidden; }Here would be my suggestion though. Make the left sidebar 300px, the center column 410px and the right sidebar 200px so that the facebook likebox would fit correctly. This would be the col 1, 2 and 3 code for that.
#col-1 { margin-left: 0; padding-right: 5px; width: 300px; } #col-2 { margin-right: 0; padding-right: 5px; width: 410px; } #col-3 { width: 200px; float: right; } -
Thank you so much for your suggestion, it actually works much better for my home page. What about the primary sidebars though?..and the extra background space on the right side..?
-
The only two problems that I’m facing right now is to get rid of the extra background on the right side and to increase the size of the primary sidebars. Could you please help me to figure out that too..?
Thanks,
-
This is what I’m seeing on your site main page: https://cloudup.com/cvIA73DvTZQ .
Where exactly are you talking about extra background space on the right side? Are you talking about the grey area? I’m seeing equal grey area on the left and right.
The only way to widen the primary sidebar more on the main page is to widen the entire the content area, but do you want to do that for all pages, or just the main page? The one thing to keep in mind is that Soundcheck is a fixed width theme, which means it doesn’t adjust for smaller devices such as tablets and phones. The wider we make the main content area, the tinier the view is going to be on tablets and phones and the more they are going to have to zoom in to see things, and the more scrolling around they are going to have to do. One way to get around that would be to activate the mobile theme at Appearance > Mobile, but it will have a completely different look. You might try that and then view your site on a phone or tablet to see what it will look like.
Let me know how you wish to proceed. Now days, with the growing use of tablets and phones, it is always good to keep them in mind.
-
Hi!
I wish there was a way I could send you a screen shot to show you the grey area. Although, it might appear to look the same on a quick view, please just scroll up to the top of the hero slider, and then, scroll the page to the left side, you will notice there’s actually more grey space on the right. Even the Hero-Slider appears to move to the left side more than the right. Due to that appearance on the wide screen version, I think that’s why I also see an extra space on the mobile phone.Now about primary sidebar, I want it to be the same width as my 1- column bar. And this should apply for the whole pages. If that means we have to decrease the width of the post column, then we better go ahead and do it. Actually when we increase the width the website won’t even seem that pretty long.
Thank you for the tip on how to view my mobile version from the WP. I’ll go ahead and take a look.
Thanks
- The topic ‘change primary sidebars’ is closed to new replies.
WordPress.com Forums 