Jump to content
Sign in to follow this  
mobilenow

Different sidebar margins for home page

Recommended Posts

mobilenow

Hi everyone, I've got another brain buster here that I am either too ignorant or too tired to figure out. I have configured my homepage (www.mnmdemo7.com) with 2 sidebars just the way my client wants them. However, I had to us negative top margins for them to work. Now, on the subsequent pages, I only want the right sidebar. The problem is that the same negative margins are taking effect, so I can't see my sidebar and can't figure out the proper syntax for making my negative margins only affect the Home page sidebars and not the rest of the pages. I think I know what needs to be done, but I just can't get it to work and I don't think any of the usual sidebar plugins will help in this case. Can someone help me out? The page id for the homepage is 17. Thanks!! Here's my custom CSS. Sorry there's so dang much of it... .fixed_width #page, .fixed_width #footer, .canvas #page-canvas { width: 920px !important;} #feature_slider div.default-features {width: 657px;} #feature-area {width: 657px} .home #feature-footer {width: 657px;} .home #feature_slider{width:657px;} .home #feature-area, .feature-wrap {width: 657px;} .home #feature-footer {width: 657px;} #feature-footer.dots{width: 657px;} #feature_slider {width: 657px;} .home #sidebar-wrap{margin-top:-250px;} ?  body { font-size: 75.5%; line-height: .5em; } .one-sidebar-right #column-main .mcolumn-pad, .one-sidebar-right #container #content, .two-sidebar-right #column-main .mcolumn-pad, .two-sidebar-right #container #content { padding: 0px; } .page-id-17 .two-sidebar-center #pagelines_content #sidebar2, .two-sidebar-center #buddypress-page #sidebar2 { width: 258px; padding: 0 0px; margin-left:-75px; } .two-sidebar-center #pagelines_content #column-wrap, .two-sidebar-center #buddypress-page #container { width: 675px; padding: 0 0px; } .two-sidebar-center #pagelines_content #sidebar1, .two-sidebar-center #buddypress-page #sidebar1 { width: 198px; } .two-sidebar-left { margin-top:-255px; } #page-canvas { margin: 0 auto; outline: 5px solid #b87a38; } #page-main .content { border-left: 0px; border-right: 0; } #feature { margin: 0px 0px 0px 8px; } #sidebar-wrap{ position: relative; z-index: 100; } #feature_slider .fcontent .dcol-pad { height: 250px; padding: 0px; } #branding .content-pad { padding: 0 0 0 0; } #sidebar1 { width: 150px; background: #32302d; margin-top:-1004px; border-left: 8px solid #ffffff;} #sidebar2 { background: #32302d; border-left: 8px solid #ffffff;} .fpost .post-excerpt, .fpost .entry_content { font-size: 1.1em; line-height: 1.25em; } .post.fpost .entry, #soapbox .fboxinfo, #feature-footer.nonav { border-top: 0 solid #E9E9E9; } .fcontent .ftitle { font-size: 1.25em; font-weight: bolder; vertical-align: text-top; } #footer { font-size: 1em; text-align: center; } #footer, .fixed_width #footer { text-shadow: 0 0 0 #000000; line-height: 16px; } #footer, #footer li.link-list a, #footer .latest_posts li .list-excerpt { color: #ffffff; }

Share this post


Link to post
Share on other sites
catrina
Try using the following selector instead for adjusting the sidebar margins: [code]body.home[/code] ...Instead of ".page-id-17"

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
mobilenow
ok, i have inserted body.home into every area that appears to affect the sidebar settings, but there is absolutely no change. I know I'm missing something but can't figure it out...

Share this post


Link to post
Share on other sites
Jenny
I imagine it has something to do with.. [code].home #sidebar-wrap{margin-top:-250px;} .two-sidebar-left { margin-top:-255px; }[/code] .. conflicting. Try adding .home before the .two-sidebar-left and see if that works. If that doesn't work on its own, then try adding !important to each one like this: [code].home #sidebar-wrap{margin-top:-250px !important;}[/code]

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
mobilenow
Thank you for the advise, but the sidebar still will not show on the other pages. the home page looks perfect but I can't figure out how to force the sidebar to come back down on the other pages. Any more ideas?

Share this post


Link to post
Share on other sites
mobilenow
Update: i did end up deleting .two-sidebar-left { margin-top:-255px; } as it was indeed redundant. Thanks for pointing that out. :)

Share this post


Link to post
Share on other sites
mobilenow
I should clarify though that this didn't solve the problem. I still need help if anyone has any ideas. ;)

Share this post


Link to post
Share on other sites
kastelic
I see this rule in your custom CSS: [code] #sidebar1 { width: 150px; background: #32302d; margin-top:-1004px; border-left: 8px solid #ffffff; } [/code] The top margin of -1004 px is being applied across all pages. Try changing it to: [code] .home #sidebar1 { width: 150px; background: #32302d; margin-top: -1004px; border-left: 8px solid #ffffff;} [/code]

Share this post


Link to post
Share on other sites
mobilenow
gaaaah! One word. ONE WORD! I have been losing my mind and all I was missing was ONE WORD! Thank you so much to all of you who spent time helping me! I have a little tweaking to do, but it's working!! Thank you!!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×