Jump to content


Photo
- - - - -

Aligning soapbox and sidebar


  • Please log in to reply
19 replies to this topic

#1 anoop

anoop

    Member

  • Members
  • PipPip
  • 16 posts

Posted 03 June 2011 - 03:35 PM

Hello, I'm having trouble aligning the soapbox and sidebar on my homepage.

Please Login or Register to see this Hidden Content

I'd also really like to know how to run the soapbox text over the quote icons. Thanks so much, Anoop

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 03 June 2011 - 04:39 PM

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?

#3 anoop

anoop

    Member

  • Members
  • PipPip
  • 16 posts

Posted 03 June 2011 - 09:40 PM

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:

[img][IMG]http://i.imgur.com/lFcSN.png[/IMG][/img]

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

#4 timlinson

timlinson

    Advocate

  • Members
  • PipPipPipPipPip
  • 1032 posts

Posted 04 June 2011 - 04:20 AM

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; } `

#5 anoop

anoop

    Member

  • Members
  • PipPip
  • 16 posts

Posted 04 June 2011 - 06:39 AM

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

#6 anoop

anoop

    Member

  • Members
  • PipPip
  • 16 posts

Posted 04 June 2011 - 10:23 AM

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

#7 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 04 June 2011 - 03:54 PM

` #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?

#8 anoop

anoop

    Member

  • Members
  • PipPip
  • 16 posts

Posted 04 June 2011 - 08:12 PM

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;}

#9 anoop

anoop

    Member

  • Members
  • PipPip
  • 16 posts

Posted 04 June 2011 - 08:14 PM

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

#10 timlinson

timlinson

    Advocate

  • Members
  • PipPipPipPipPip
  • 1032 posts

Posted 04 June 2011 - 08:16 PM

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

#11 anoop

anoop

    Member

  • Members
  • PipPip
  • 16 posts

Posted 04 June 2011 - 08:34 PM

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

#12 timlinson

timlinson

    Advocate

  • Members
  • PipPipPipPipPip
  • 1032 posts

Posted 04 June 2011 - 08:49 PM

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}`

#13 anoop

anoop

    Member

  • Members
  • PipPip
  • 16 posts

Posted 04 June 2011 - 08:59 PM

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,

#14 timlinson

timlinson

    Advocate

  • Members
  • PipPipPipPipPip
  • 1032 posts

Posted 04 June 2011 - 09:06 PM

By using the

Please Login or Register to see this Hidden Content

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}`

#15 anoop

anoop

    Member

  • Members
  • PipPip
  • 16 posts

Posted 04 June 2011 - 09:17 PM

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,

#16 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 05 June 2011 - 12:55 AM

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