How do you change sidebar widths for just one page.

[mjlyons13 0]

Here's my website http://www.dogbonedog.com/. I currently am using the 1 sidebar on left option because I would like the width of my 1st sidebar set at 212px. I've decided I want to add a sidebar on the right, however the settings for my 2 sidebars one on each side is set at sidebar1=172px and sidebar 2=190px with a main content area of 830px. I use this for basically every other page and can't change it without screwing up those pages. I'd like to make only my homepage have a sidebar on each side with one set at 212px, the other at 300px. What should I put in my custom CSS code?

[Jenny 33]

The left sidebar on your home page is correct. It is showing as 212px. The line of code is: [code].one-sidebar-left #pagelines_content #sidebar-wrap { width: 212px; }[/code] It doesn't look like you have your home page set up to be a two column page so it's difficult to guess s to what the proper code will be. Your other pages have this code for the left sidebar: [code].two-sidebar-center #pagelines_content #sidebar1 { width: 172px; }[/code] And this code for the right sidebar: [code].two-sidebar-center #pagelines_content #sidebar2 { width: 190px; }[/code] So you'll need to change your homepage to a 2 column page. Then you can use the last two snippets of code above (for the left and right) in your custom CSS (be sure to change the width to whatever you want for each one). Then to have the custom sidebar sizes apply only to the home page, just use .home at the beginning, like: [i].home .two-sidebar-center #pagelines_content #sidebar1[/i]. That [i]should[/i] work but without the 2 column sidebar activated, I had to do some guessing.

[mjlyons13 0]

I activated the 2 columnn sidebar so you can better see it 1. It doesn't work when I add the .home in front of it, I can change the width for all of them, but if I try to keep it on the homepage, it doesn't work 2. I don't know how to make two sidebars work with my custom CSS for getting the feature slider in the content area. Both sidebars should move up, but only the rightside is This is all of my custom code pertaining to the homepage #feature_slider div.default-features {width: 615px;} #feature-area {width: 615px} .home #feature-footer {width: 615px;} .home #feature_slider{width:615px;} .home #sidebar-wrap{margin-top:-400px;} .home #feature-area, .feature-wrap {width: 615px;} .home #feature-footer {width: 615px;} #feature_slider {width: 615px;} .home #feature_slider {width: 670px; } .home.two-sidebar-center #pagelines_content #sidebar1 { width: 212px !important; } .home.two-sidebar-center #pagelines_content #sidebar2 { width: 300px !important; }

[Rob 547]

I'm not sure how you're doing things, or where you're getting some of this code, but your site doesn't appear to be doing very well in Firefox. This .home #feature_slider {width: 670px; } seems to me to be incorrect for one thing as the rest of your feature slider on the homepage is set to 615px. The result will be the slider pushing the sidebar, whereever it finds it, away. The left sidebar is still pushed below the slider I think because the math doesn't add up considering the padding. What is the total width you have set for the entire, site width? By my calculations, it would need to be over 1290px. Last I heard, the max width was 1214 but that might have gone up to 1270. If either is true, then your sidebars will wrap and it appears that's exactly what they're doing. Before you reject my answer as you did with Jenny, one of our best CSS experts, please use the search facility above for maximum width as well as default content padding. I had asked Jenny to help because she's quite expert in these matters.

[mjlyons13 0]

I only rejected Jenny's answer because if it's not rejected, from what I've seen, the thread gets marked as answered, and then won't be answered anymore by someone else. It didn't solve the whole problem, so I needed more input. My code was actually written by kastelic yesterday. It worked perfectly with one sidebar, I'm now trying to add the 2nd sidebar. You also responded on that thread, but kastelic's answer worked. That code I wrote down was the the page when it was one column, that's why the numbers are different, I'm asking what values should I CHANGE them to now that it's 2 column. When I went to 2 columns, I changed the 615px and 670px to 600px and it makes no difference (that's the way it's written now actually). Please check out the thread from yesterday if this doesn't make sense. http://www.pagelines.com/forum/discussion/comment/76411#Comment_76411 As you can see, the 370px was added only to remove white space in that particular scenario. I'm aware that it looks weird in Firefox I'm editing in box firefox and google Chrome, that's what I am trying to fix, but it's only the front page. I left it up like that because Jenny had requested that I make active 2 columns so it would be easier for her to help. The total width of the site is 1212px it should have a sidebar1 of 262 and a sidebar2 of 350, with the center at 600px.

[Rob 547]

Just a note. When the question is answered and you add another question to it, the status changes to a different color and we see that you need continued attention. So Answered is not the same as "Closed". We rarely close questions, as you can see. Okay... without going into deep detail. Look at your numbers. If the slider is supposed to be between the sidebars (as the code you offered earlier basically indicated), and its width is 615 and you have a content area of 600, then the slider is 15 pixels too wide. If you ADD to that a setting that says the slider is 670px, it's way too wide. The normal padding is 15px for each side of each column. So... if you have a left sidebar of 262, it's actually 292px. If your right sidebar is 350, it's actually 380px. Deduct those from the 1212 and the remaining center column, where your content and slider go is actually not 600, but 540. The max width of the slider is then only 540px. That's a pretty small slider. Particularly when you consider you have 3 stacked custom posts. Your content area is just 510, less the padding. Pretty darn narrow by any measure. Given those widths, even if my math is completely wrong, if your slider were 600, it's still going to force the sidebars to wrap. That's why you see them essentially cut off on the right side and in one case, layered under the main content area.

[Rob 547]

Yesterday, you were asking to eradicate whitespace between the one sidebar and the slider. So Kastelic's code was correct... then. By adding the additional sidebar, you changed the entire dynamic.

[mjlyons13 0]

Exactly what I'm saying. You asked why the 670px was in there, and I explain it was from old code. I know it doesn't work in this situation. (as I said yesterday) the slides are only 1 post. It's just 1 picture with an imagemap. The 3 separate sections are just assigned by coordinates in the html code. I only have 1 slide in the slideshow. Please ignore the contents dummy photos in place right now, they're there to make it look ugly so that I can fix the ugly. I'm fine with a 540px slider or 510 px or 10px, I can change the sizes of the widgets later. I'm just trying to get that sidebar up, even if the widget is cut off. I can easily change that. The problem is coming from trying to get the slider to do what I need. I've changed all the widths to 540 px and then tried 510px, (that's where I left it) and there still isn't a change. The two problems I see are 1. I can't change the widths of the sidebars at all, even when sidebar1 is below the slider 1. The line .home #sidebar-wrap{margin-top:-433px;} seems to be moving only the right sidebar 2. The feature slider needs to move over This is the code now #feature_slider div.default-features {width: 510px;} #feature-area {width: 510px} .home #feature-footer {width: 510px;} .home #feature_slider{width:510px;} .home #sidebar-wrap{margin-top:-433px;} .home #feature-area, .feature-wrap {width: 510px;} .home #feature-footer {width: 510px;} #feature_slider {width: 510px;} .home #feature_slider {width: 510px; } .home.two-sidebar-center #pagelines_content #sidebar1 { width: 262px !important; } .home.two-sidebar-center #pagelines_content #sidebar2 { width: 350px !important; }

[Rob 547]

I replicated your site and what's happening. http://epicurus.com/consulting/

[Rob 547]

I used this [code]#feature_slider div.default-features {width: 600px;} #feature-area {width: 600px} .home #feature-footer {width: 600px;} .home #feature_slider{width:600px;} .home #sidebar-wrap{margin-top:-400px;} .home #feature-area, .feature-wrap {width: 600px;} .home #feature-footer {width: 600px;} #feature_slider {width: 600px;} .home #feature_slider {width: 600px; } #feature_slider {margin: 0 auto;} home.two-sidebar-center #pagelines_content #sidebar1 { width: 212px !important; } .home.two-sidebar-center #pagelines_content #sidebar2 { width: 300px !important; }[/code] Note the #feature_slider {margin: 0 auto;}. which centers the slider.

[mjlyons13 0]

ok, so the feature is now centered. How do I get the first sidebar to start at the top now?

[Rob 547]

Patience. It took me most of the evening to get that done, and I'm doing this off the clock.

[mjlyons13 0]

Everything on the test site looks right for how I want it. I've figured out how to remove the padding between the sidebars and the main content as well, so it should be seamless once everything's put together.

[Rob 547]

Okay. Please go back to http://www.epicurus.com/consulting and look at the site in IE9, Google Chrome, Firefox and if you have them, Safari and Opera. Here's the CSS... and by the way, we normally do not do this for anyone. It goes WAY, WAY, WAY outside the scope of forum support. I did this on my own initiative. If you change the code, be advised, I'm not personally supporting this. [code]#feature_slider div.default-features {width: 570px;} #feature-area {width: 570px} .home #feature-footer {width: 570px;} .home #feature_slider{width:570px;} .home #sidebar-wrap{margin-top:-420px;} .home #feature-area, .feature-wrap {width: 570px;} .home #feature-footer {width: 570px;} #feature_slider {width: 570px;} .home #feature_slider {width: 570px; } #feature_slider {margin-left: 275px;} home.two-sidebar-center #pagelines_content #sidebar1 { width: 212px !important; } .home.two-sidebar-center #pagelines_content #sidebar2 { width: 300px !important; } #sidebar1 {margin-top:-420px;}[/code] The demo site will be up for you to check out for 48 hours from now. That's my site and my server is already overloaded. I also changed the header modality. Please grab the background and the transparent image over the dog's face in the header. If you need explanation about the setup, let me know... SOON, as I'm pulling this WP installation down, database and all. If you're satisfied, please click the "Thanks" button.

[mjlyons13 0]

Thanks for the code and your time. It still doesn't work properly, the sidebars are in the right spot, I just can't get them to a custom width. I'm thinking I may have to just give up on this idea all together. It's a shame because the pageline slider does more of what I want compared to the plugin ones.

[Rob 547]

I don't know why you can't simply match the setup I created this evening, which matches to a T the specifications you laid out with the exception of the customization you made to the slider. If you remove ALL the CSS except any that you did relative to the formatting of the slider and added my code, it would work. Now I feel you're giving up and this effort and hours of work was all for naught. I'd suggest you hire one of our Pros for your site. http://www.pagelines.com/docs.

[Rob 547]

I've just gone back to your site and looked at it. The code you've got for the feature slider is quite messed up. In fact, I've never seen anyone do that to our slider before. I doubt that would ever work. Additionally, there's a space [code] [/code] near the line under the slider. If you used the regular slider, not that customized one, and removed that space, I know your site would look like the one I built. Anyway, I'm sure one of the Mods can help you. Or, you might try css-tricks.com for some sound advice.

[mjlyons13 0]

woah, that seams a little harsh. I was in the process of switching back to my old home page since my site is live and gets a few hits a day and left for the store for a few minutes. Copying your code exactly, with no other additional CSS makes it look almost perfect, with the exception of the sidebars. The width just isn't working right. There's no customization involved with the slideshow, the image simply has an image map. It worked fine with one sidebar. If you take a look at it now, all custom CSS has been removed except for your latest response, and what my shopping cart needs. The ONLY thing I'm adding to your code is .home before the #sidebar1 {margin-top:-420px;} to prevent it from applying to other pages. Take a look: http://www.dogbonedog.com/ I added a "regular slider" to it instead so it's easier for you.

[Rob 547]

I don't know why your sidebars can't be adjusted through the usual method, with Template Layout. If they're not working usually it's a plugin causing that or some errant CSS. You should be capable of sliding the sidebar width to the exact measures you desire. Anyway, I've been on this mission since early evening for no other reason than I wanted to prove to you that we could achieve your goals and help you get the site you wanted. Since I started dealing with Platform, I've taken one position on it. Anything's possible. I see you got your sidebars where you wanted them, even if they're not as wide as you wish, presently. There was a point when you were complaining that was nearly impossible, but I did it and CSS isn't even my thing as it is Jenny's (among others). The .home was a good idea. I did it myself about an hour or so ago. The reason I think that your sidebars won't adjust, in my humble opinion, is that single straight line below the slider. I don't know what code is putting it there, but its width is pushing the two sidebars apart - literally forcing them to be narrow. Doubtlessly, if it were removed or adjusted to match the slider width the sidebars would widen of their own accord. No CSS styling or formatting will alter them if they're being pushed apart by one element. Note that with the replacement slider, the navigation portion of it is equal width to the slider itself. The previous one had the slider one width and its navigation considerably wider. That too pressured the sidebars, forcing the left one to remain down. Now that both slider and nav are the same, the sidebar was able to move up. Sorta proving my point about that single line element. Anyway, it's now 5 hours past my bedtime and I'm wiped out. Gnite.

[Rob 547]

Oh, btw, the reason I asked you to consider the "thanks" is that it helps justify keeping a professional team in these forums to help, unlike most other forums which are run by fellow users or just one developer. It's the green button on the right.

[Danny+ 1,327]

I think the best thing to do would be to start again, it's simply too difficult to start to correct this on the fly. Would it be possible for you to create a concept using photo editing software like Photoshop showing how you would like this to look please. Once I see that I will try to create it myself on a test site and then provide you with the correct code, but this will take some time.

[Jenny 33]

It looks like you still can't get your sidebars the right width. Use this: [code] .home .two-sidebar-center #pagelines_content #column-wrap { width: 1042px; } .home .two-sidebar-center #pagelines_content #sidebar-wrap { width: 300px; } .home .tags { display: none; } [/code] Your center page is messing things up. The horizontal line, that is. (PS. Your site is [i]extremely[/i] wide, which is not recommended.) Your center page is 830px. Add that to your two sidebar widths and you get a total width needed of 1342px (wow!). However, your page is only coded for a width of 1002px. Try adding this: [code]#site .content, .wcontent, #primary-nav ul.main-nav.nosearch { width: 1342px; } .fpost { border-bottom: 0; }[/code] These sections of code are causing problems for sure: [code].home #feature_slider { width: 570px; } .home #feature-area, .feature-wrap { width: 570px; } #feature_slider { margin-left: 275px; }[/code] Your feature slider div has a width of only 570px yet the center page is 830px. That doesn't work out too well. Additionally, you're giving it a left margin of 275px even though it needs 212px (the width of sidebar 1). In other words, change that code to: [code].home #feature_slider { width: 830px; } .home #feature-area, .feature-wrap { width: 830px; } #feature_slider { margin-left: 212px; }[/code] You have a lot of stuff going on here. Is the CSS for your feature slides inline? What width do you have them set to? It looks like they're set to 570px but the width of that page section is 830px. Implement what you want, don't implement what you don't want. Hopefully this is just a little indicator that you have a lot of issues going on here. We are really going above and beyond here with this issue. I suggest contacting one of our Pros if this goes on much longer. Sometimes there are limits as to what we can do on this forum which require the assistance of a Pro.

[Jenny 33]

PS. Please consider giving "thanks" to those that have helped you here. Considerable time has been spent without a single thanks being given. Saying "thanks" just means that you appreciate our time and the help we have attempted to give. Saying "thanks" is not the same as accepting an answer; it's just being appreciative.

[mjlyons13 0]

I fixed it on my test page by using a different slider and modifying the layout. For future reference, I swicthed to the 2 columns, both on the left side-layout, then customized that to sidebar1=262, sidebar2=600, and maincontent area=350. Sort of making a "fake" layout in the sense that sidebar2 will actually function like the main content area does on the rest of the pages. I also removed all of the padding for the sidebars on the test page only, since my images already contained the padding. I just added the meteorslide plugin widget to sidebar2 (this was what I was trying to accomplish in the maincontent section with the custom CSS). The only downfall is meteorslides doesn't allow html, so I had to remove the image map and just go with a standard overall link for the whole slide. It's a shame the built in features slider doesn't have the option to be placed in a widget.

[Rob 547]

Again, I'm not trying to be rude but it seems you're intent on redesigning the wheel rather than accepting the help being provided to resolve your problem. You're design and styling methods will eventually crash your site. I'm sorry to say this but the way you're going about this entire process is totally, absolutely and definitely all wrong. It's making a mess we cannot help you fix. Danny correctly said to restart but evidently you didn't want to listen to him and are continuing on your own methods. The specifications I provided you with last night did not seem to be satisfactory even though the met each of your stated objectives. It's not our fault if you're adding code or elements that are breaking the theme. There's little we can do now except wait for you to crash the site and repeat... start from scratch. In no uncertain terms, I am urging you politely to listen to us, follow our guidance and take the proven methodologies we've provided without going in 100 different directions and making more and more changes. Perhaps, respectfully, if you did that, your site would look awesome.