Hi guys... my company just upgraded from Able 5.5 to 7 and we're getting started this week. I want to use the "Glass-SilverAge" theme as a starting point but the first thing I need to do is limit the page width to something less than 100%. I've been tweaking the style.css by making changes to the section with #outerContentWrapper but that's not working. Any help would be really appreciated.
Thanks, Mark
How to adjust width of all store pages?
Re: How to adjust width of all store pages?
In theme's style.css file locate following two styles and specify fixed width for them like.
Code: Select all
#storeHeader
{
.................
.................
width:960px;
}
#outerContentWrapper
{
.................
.................
width:960px;
}
Re: How to adjust width of all store pages?
Thanks Mazhar, that worked! One more problem... The header is centered on the page and the rest of the page is aligned to the left. I would like the whole page centered. I'm assuming I need to add something to the "outer wrapper" css code to do this, yes?
Here's what I have:
/* outer wrapper for the main page content */
#outerContentWrapper {text-align: center; width: 960px; }
#innerContentWrapper { background-color:#E3EFFF; margin: 0; text-align: left; }
table#contentLayout .form tr {border:solid 8px #E1EAEF; background: #FFFFFF; color: #416573; d}
table#contentLayout { width:100%; }
#outerFrame{}
/* style for the outer store header container */
#storeHeader {
width:960px; margin: 0 auto; background: #FFFFFF url(images/header_bg.gif) repeat-x; border: 1px solid #4F616D;
border-top: 0; border-bottom: 0;}
Here's what I have:
/* outer wrapper for the main page content */
#outerContentWrapper {text-align: center; width: 960px; }
#innerContentWrapper { background-color:#E3EFFF; margin: 0; text-align: left; }
table#contentLayout .form tr {border:solid 8px #E1EAEF; background: #FFFFFF; color: #416573; d}
table#contentLayout { width:100%; }
#outerFrame{}
/* style for the outer store header container */
#storeHeader {
width:960px; margin: 0 auto; background: #FFFFFF url(images/header_bg.gif) repeat-x; border: 1px solid #4F616D;
border-top: 0; border-bottom: 0;}
Re: How to adjust width of all store pages?
Nevermind I fixed it by adding margin-left and margin-right attributes:
/* outer wrapper for the main page content */
#outerContentWrapper {text-align: center; width: 960px; margin-left: auto; margin-right: auto; }
/* outer wrapper for the main page content */
#outerContentWrapper {text-align: center; width: 960px; margin-left: auto; margin-right: auto; }