bbPress

Info

• 9 posts
• 4 voices
• Started 5 years ago by Null
• Latest reply from peiqinglong
• This topic is not a support question

Tags

• Posts in this topic

Adding a right sidebar at front page

1. • 
   • Null
   • Member

   • Posted 5 years ago #

   Hi,

   How do I ad a right sidebar (div) at the front page?

   Adding and changing the css into this doesnt help (bold is added/changed):
   /* Front Page
   =================================== */

   #front-page #hottags {
   float: left;
   width: 150px;
   overflow-x: hidden;
   }

   #front-page #rightbar {
   float: right;
   width: 150px;
   overflow-x: hidden;
   }

   #front-page #discussions {
   margin-left: 170px;
   margin-right: -20px;
   width: 440px;
   }

   .frontpageheatmap {
   font-weight: normal;
   line-height: 30px;
   padding-bottom: 10px;
   }

   thx
2. • 
   • Trent Adams
   • Moderator

   • Posted 5 years ago #

   Try something like:

   #front-page #discussions {
margin-left: 170px;
margin-right: -20px;
width: 420px;
}
#front-page #rightbar {
margin-left: 590px;
width: 150px;
margin-right: -20px;
}

   I haven't tested this, but it would be easier to just keep moving them to the right I think.

   Trent
3. • 
   • Null
   • Member

   • Posted 5 years ago #

   Doesnt work, the right bar is still displayed underneeth the discussion div even when aligned to the right. I even made the discussion div very small but it still wont "move up"...
4. • 
   • Trent Adams
   • Moderator

   • Posted 5 years ago #

   The easiest thing to do would be to find any site (WP or otherwise) that has 3 columns and take a look at the CSS to find out how they went about doing it.

   Trent
5. • 
   • Null
   • Member

   • Posted 5 years ago #

   Got this now:
   #leftbar {
float: left;
width: 150px;
overflow-x: hidden;
}
#discussions {
margin-left: 170px;
width: 420px;
}
#rightbar {
margin-left: 610px;
width: 150px;
overflow-x: hidden;
}
   Total width = 760 px just like the header. This should work, but the right column is still displayed underneeth the discussion div (though the rightbar is aligned to the right and there is enough space left for the rightbar to move up :S
6. • 
   • ardentfrost
   • Member

   • Posted 5 years ago #

   add position: absolute; in there
7. • 
   • Null
   • Member

   • Posted 5 years ago #

   Okay almost there. I now have:
   #hottags {
float: left;
width: 150px;
overflow-x: hidden;
position: absolute;
}
#discussions {
margin-left: 170px;
width: 420px;
position: absolute;
}
#rightbar {
margin-left: 610px;
width: 150px;
overflow-x: hidden;
position: absolute;
}

   The right bar is alligned properly now, BUT the footer is moved up also. So the footer crosses the 3 collumns. All is mixed now, how to get the footer back down again?

   Thx
8. • 
   • Null
   • Member

   • Posted 5 years ago #

   Any 1?
9. • 
   • peiqinglong
   • Member

   • Posted 5 years ago #

   To the footer, try adding clear: both in your CSS.

10. You must log in to post.