Modifying margins / padding WITHIN a sidebox

[aaronjmorgan]

my website is www.toyzeum.com/store/


this is what I want my sidebox to look like:



this is the current coding i have in my styles.css file


#whatsnewHeading {display: none;}
#whatsnew {border: none;}

#whatsnew.rightBoxContainer {
background-image: url(https://www.toyzeum.com/store/images...finds_bg.jpg);
height:260px!important;
width:293px!important;
margin: 2em;
border-top: 5px;
border-bottom: 0px;
margin-top: 5em;
}


I am still new to CSS and am not sure how to modify within the sidebox... rightBoxContainer is obviously modifying the entire box in ways that I dont want (as seen on my page)... How do I get the padding / margins for the links and content within the sidebox only?

Thanks for your help.

-Aaron

[lat9]

The first problem is that you've got your Configuration->Layout Settings->Column Width (Left/Right) Boxes and Configuration->Layout Settings->Column Width (Left/Right) values reversed, so you're trying to cram 293px worth of stuff into 270px. Try reversing those before attempting further changes via CSS.

[aaronjmorgan]

actually- it all fits perfectly when i change the coding above to:


#whatsnew.rightBoxContainer {
background-image: url(https://www.toyzeum.com/store/images...finds_bg.jpg);
height:260px!important;
width:293px!important;
margin: 0em;
border-top: 0px;
border-bottom: 0px;
margin-top: 0em;
}

So that obviously is not the problem... i posted it up above as such to show what happens when i change the margins / borders with #whatsnew.rightBoxContainer... it moves the entire box rather than what is inside the box... i want to focus on the formatting within the whatsnew sidebox... how do i do that... ??? anyone??

[KenshiroU]

I think they problem is some css conflicting with your div tags. In it you have your right side text as sideBoxContentItem, which is being controlled by other css functions. I would open up style sheet and create new css rules for that sideBoxContentItem.

Try adding this into your stylesheet

.sideBoxContentItem{
padding-top:25px;
padding-left:10px;
}

[aaronjmorgan]

You Got it to work KENSHIRO- THANK YOU SO MUCH!!! Do you know if this modification will effect any other sideboxes in Zen cart or only the Whatsnew sidebox? Im not sure if any other sideboxes use "sideBoxContentItem" - THANKS AGAIN!!!

-Aaron

[gjh42]

So that obviously is not the problem...

It may or may not be the actual cause of your issue, but it is incorrect and could cause issues. It would be sensible to change the admin settings so that Column Width - Right is at least as large as Column Width - Right Boxes. Then the elements won't be unnaturally forcing the layout to stretch.

I believe the featured sidebox also uses .sideBoxContentItem. If you want to limit your styling to the what's new sidebox, use a selector like
#whatsnew .sideBoxContentItem {}.