Jump to content
Sign in to follow this  
antonella

Place right sidebar next to boxes on home page

Recommended Posts

antonella

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

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

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

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

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

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

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

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

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

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

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
hitnrun822
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

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  

×