Separate sidebar/widget area

• 

  aliceheavey · Member · Feb 22, 2011 at 5:03 pm

  • Copy link
  • Add topic to favorites

  Is it possible to, using CSS, makeing the side bar separated from the post area, (like in this blog: baambis.blogg.se)?

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Feb 22, 2011 at 6:54 pm

  • Copy link

  @aliceheavey, your site is really slow loading due to all the images and with my wireless, limited bandwidth internet connection, I can’t really wait for it to load.

  In general, yes this is possible, but it depends on the theme and how things are organized in the markup and in the CSS.

  If you go to settings > reading and reduce the number of posts to show down to say two or three and then report back here after doing that, I will take a look.

  It is always good to keep your site loading fast and to thing of the people with slower internet connections as they might decide to click away and not wait for your site to load. Also, the search engines consider page loading times when calculating search engine ranking and slow loading sites will get reduced page rank.

• 

  aliceheavey · Member · Feb 22, 2011 at 8:17 pm

  • Copy link

  Ok, at the moment something weird seems to be happening to my blog. I can barely load it myself, and the costum CSS design doesn’t show. But if it’s any help I use 2010. Hope the blog is fixed soon :/

• 

  aliceheavey · Member · Feb 22, 2011 at 8:24 pm

  • Copy link

  It seems all right now, and I’ve fixed 2 posts per page :)

• 

  thesacredpath · Member · Feb 22, 2011 at 8:51 pm

  • Copy link

  Give this a try and see what you think. I’ve just made the backgrounds white (#FFFFFF)

  #wrapper {
  background: none repeat scroll 0 0 transparent;
  }
  
  #content {
  background: none repeat scroll 0 0 #FFFFFF;
  margin: 0 200px 36px 0;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  }
  
  #primary {
  background: none repeat scroll 0 0 #FFFFFF;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  }

• 

  thesacredpath · Member · Feb 22, 2011 at 8:58 pm

  • Copy link

  And actually there is the footer too so add the following.

  #colophon {
  background: none repeat scroll 0 0 #FFFFFF;
  border-top: none;
  margin-top: 40px;
  width: 760px;
  }

• 

  aliceheavey · Member · Feb 22, 2011 at 9:38 pm

  • Copy link

  I’ve tried it out and edited the code a bit, but I can’t seem to understand how to move the sidebar up 32px (-32px).

• 

  thesacredpath · Member · Feb 22, 2011 at 9:47 pm

  • Copy link

  This will do it.

  #primary {
  margin-top: -32px;
  }

• 

  aliceheavey · Member · Feb 22, 2011 at 10:02 pm

  • Copy link

  Thank you! :)

• 

  thesacredpath · Member · Feb 23, 2011 at 7:21 pm

  • Copy link

  You are welcome.