Jump to content
Sign in to follow this  
anoop

Aligning soapbox and sidebar

Recommended Posts

catrina

Hello, I can't access your site since you're on MAMP, but can you tell me how the soapbox and sidebar is aligned now (perhaps show a screenshot) and how you want them to be aligned?


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
anoop

Hi Catrina, Sorry about that - the site has been moved to a server but I think it can only be accessed via the wordpress dashboard. Anyway, here is a screenshot: <a href=%7Boption%7Dhttp://i.imgur.com/lFcSN.png' alt='lFcSN.png'> I'd like the quote and the red contact panel to sit next to one another, and underneath the row of 4 boxes. They currently seem to be sitting on two rows (one on each) within the main page area. Best, Anoop

Share this post


Link to post
Share on other sites
timlinson

Your custom css has this rule that's expanding your content area cover the whole width. That leaves no room for the sidebar, so it can only show up below. ` #site .content, .wcontent, #primary-nav ul.main-nav.nosearch { width: 948px; } `

Share this post


Link to post
Share on other sites
anoop

Thanks Tim - how should I alter the code, so that it only changes this area of the page / site? Can you also advise on the best way to run text over a graphic please? Best, Anoop

Share this post


Link to post
Share on other sites
anoop

Please also advise where the code above can be found. It's not in any of my style.css files. Thanks,

Share this post


Link to post
Share on other sites
catrina

` #site .content, .wcontent, #primary-nav ul.main-nav.nosearch { width: 948px; } ` I'm not sure where this code is coming from, but can you show paste any custom CSS code you have in your settings?


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
anoop

Hi Catrina, This is the code in my PBase style.css file. Pro custom code follows. Thanks /* ============================== */ /* = Start Your Custom CSS Here = */ /* ============================== */ /* @ CSS corresponding to the hook used in functions.php; adds a stumbleupon icon to branding section */ .fixed_width #branding .content-pad{padding: 0px 0px 0px 0px; } .home .dcol_container_2 { float: left; width: 645px; } .home #soapbox .fboxinfo {width: 645px; padding: 1em; } .home #sidebar_universal { width: 235px; float: right; } /* @ Main Nav */ .main-nav li a{ line-height: 1.3em; margin-top: -2px; margin-bottom: 15px; position:relative; font-size: 16px; color: #FFF !important; padding: 10px 20px 10px; text-decoration: none; display: block; border-bottom:none; background: #3A8AC9; text-align: center; } /* @ sidebar */ #sidebar1 {width: 190px} list-style-type:none; line-height: 1.1em; font-size: 16px; margin:0; padding: 0; display:block; background:#E2EBF2; } /*IE6 border color (transparent border fix)*/ *html .main_nav li a{ border-color: white; } h1.pagetitle {font-size: 20px;} #feature {margin: 0 0;} feature_slider {height: 265px; } #feature_slider .fcontent { width: 67%; font-size: 1.5em; line-height: 2.5em; } .fixed_width #boxes .dcol-pad { width: 200px; height: 140px; padding: 12px; border: solid #f26d4f; border-top-width: 0px; border-right-width: 3px; border-bottom-width: 0px; border-left-width: 3px; } .mcolumn-pad {border-left: 3px solid #f26d4f; padding-left: 20px; margin-left: -21px;} .mcolumn-pad {border-right: 3px solid #f26d4f; padding-left: 20px; margin-left: -21px;} .mcolumn-pad {margin-bottom: 15px;} } #footer ul{ padding: 0 5px; } #footer li {list-style-type:none;} #footer .content-pad { margin: 10px 0px 20px 0px; padding: 20px 4px 0px 4px; width: 952px; background-color: #C0C0C0; } #footer .widget-title{ border:0; padding: 0 0 0 0; margin-bottom: 0em; font-size: 1em; } .fcol{ width: 152px; float: left; display:inline; padding: 0 10px; } .fcol ul ul{ padding-left:10px; font-size:.9em; } #cred {display: none;}

Share this post


Link to post
Share on other sites
anoop

PPro Settings Custom Code: body{} blockquote{ background-color: #FFFFFF; border-bottom-color: #FFFFFF; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: #FFFFFF; border-left-style: solid; border-left-width: 1px; border-right-color: #FFFFFF; border-right-style: solid; border-right-width: 1px; border-top-color: #FFFFFF; border-top-style: solid; border-top-width: 0px; color: black; margin:0 0 0em 0em; padding: 0em 0em 0em 0em; line-height: 1.4em; font-size: 1.2em; font-style: normal; ) h1.pagetitle {font-size: 20px;} --- Thanks, Anoop

Share this post


Link to post
Share on other sites
timlinson

It shouldn't be in any of the theme files. According to firebug it's coming from your own custom code: platformpro > settings > custom code > custom css

Share this post


Link to post
Share on other sites
anoop

Hi Tim, I've pasted all the 'platformpro > settings > custom code > custom css' code above - it doesn't appear to be there...

Share this post


Link to post
Share on other sites
timlinson

Oops, didn't see that one.. not really sure what's setting it then. I don't know if this is ideal, but you could use this in the custom code: `#soapbox {width:0;float:left}`

Share this post


Link to post
Share on other sites
anoop

Doesn't help I'm afraid. Where did you see the code that you pasted earlier? And can it be tweaked to solve the problem? Thanks,

Share this post


Link to post
Share on other sites
timlinson

By using the firebug addon for firefox and clicking the #soapbox .content div. Also when I use firebug, the soapbox rule works for me. You might try different variations of it like `#page #soapbox {width:0;float:left}`

Share this post


Link to post
Share on other sites
anoop

I'm using Chrome and the developer tool doesn't show #soapbox .content div... Do I need to switch browsers? How will this affect the finished page? Thanks,

Share this post


Link to post
Share on other sites
kastelic

Both browsers will show the same thing, they are all the elements that make up your page.

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  

×