antonella 1 Report post Posted July 16, 2011 Hello, On our home page, we would like to create the following structure: row 1: feature row 2: 3 boxes + right sidebar starts I can't figure out how this would be done to get the sidebar to move up alongside the boxes. Ideally, I would even like the sidebar to move up alongside the feature slider as well. I've seen other posts that explain how to reduce the width, but the button bar below the feature doesn't reduce nor does the sidebar slide up. Any ideas of how this could be done? I've tried many options within the settings and I haven't come up with anything on the forums. Thanks. Share this post Link to post Share on other sites
catrina 103 Report post Posted July 17, 2011 The original idea mentioned can be done with CSS (reducing the width of the 3 boxes and their container and repositioning the sidebar). Can you post a link to your site? 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
antonella 1 Report post Posted July 17, 2011 Hi, I'm still very early in the process and am working with the demo content from platform pro: Here's the link. I would like that tertiary sidebar box to move all the way up. Thanks. Share this post Link to post Share on other sites
catrina 103 Report post Posted July 17, 2011 Add this CSS to Settings > Custom Code > CSS and save to reduce the size of the boxes: #boxes div.dcol_container_3 #fbox {width: 22%;} If you like the way that looks, we can move the sidebar up. 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
antonella 1 Report post Posted July 19, 2011 Hi again, I put this in the Custom Code, but it doesn't seem to be doing anything. Share this post Link to post Share on other sites
catrina 103 Report post Posted July 20, 2011 This one should resize the first top left box: #boxes div.dcol_container_3 #fbox_11 {width: 22%;} If this code works, I can provide the code that can work for the rest of them. 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
antonella 1 Report post Posted July 20, 2011 Okay, now I see it working. It only affects the first box in a block of 6 boxes. How do I get all the boxes this size? Thanks, Antonella Share this post Link to post Share on other sites
antonella 1 Report post Posted July 20, 2011 Hi, I think I just figured out how to adjust all the boxes. I looked for the box id and added that to the css. Is this correct? #boxes div.dcol_container_3 #fbox_11, #boxes div.dcol_container_3 #fbox_9, #boxes div.dcol_container_3 #fbox_928, #boxes div.dcol_container_3 #fbox_716, #boxes div.dcol_container_3 #fbox_10, #boxes div.dcol_container_3 #fbox_843 {width: 20%;} Next step is how to get the right sidebar to wrap around there? Thanks. Share this post Link to post Share on other sites
Kate 3 Report post Posted July 20, 2011 Hi Antonella, That will work, yes. Or, you could use the class assigned to the boxes so that you don't have to modify the CSS if/when you add another box I would try something like this instead: .page-id-1454 .fbox{width:210px !important;} .page-id-1454 #sidebar-wrap{margin-top:-470px;} Share this post Link to post Share on other sites
antonella 1 Report post Posted July 20, 2011 Thanks! That seemed to do the trick. Any suggestions on how I can reduce the width of the sidebar? I've been trying different versions of the following, to no avail: .page-id-1454 #sidebar-wrap {width:280px;} .page-id-1454 #sidebar_tertiary {width:280px;} .page-id-1454 #scolumn-pad {width:280px;} Share this post Link to post Share on other sites
antonella 1 Report post Posted July 20, 2011 I was able to reduce the width using sidebar1. But then it overlapped into the boxes and there was a large right margin. I played around until I got it to look the way I wanted, but wanted to check that how I did it was okay. I basically added a float:right on the sidebar tag and a margin-right:20px to add more space between the boxes. This is the CSS I've ended up with: .page-id-1454 .fbox {width:230px !important; margin-right:20px;} .page-id-1454 #sidebar-wrap {margin-top:-476px;} .page-id-1454 #sidebar1 {width:230px !important; float:right;} Does that look okay or is there a better way to do it? Thanks. Share this post Link to post Share on other sites
Kate 3 Report post Posted July 21, 2011 Seems fine to me Share this post Link to post Share on other sites
hitnrun822 0 Report post Posted March 5, 2012 Hi guys! I cant seem to get this done. Please help! http://namjek.com/en/store Share this post Link to post Share on other sites