Change width, center site & change background color
 

What's the best way in 4.2 to change the width of the site, center the site and change the background color?

Re: Change width, center site & change background color
 

http://forum.x-cart.com/showpost.php?p=244962&postcount=28
to change color:

Re: Change width, center site & change background color
 

Hi Victor,

Thanks for your reply. I'm still having problems with what should be simple. I was able to change the width of the site by changing the 100% to 80% in the following main/css:

#content-container {
clear: both;
float: left;
overflow: hidden;
position: relative;
width: 80%;
padding-bottom: 39px;
margin-top: 140px;

However, I still can't figure out how to center the site and change the background color of the outer region.

Re: Change width, center site & change background color
 

As it is written in the post I linked above
You should specify width for #page-container and set its left and right margins to auto.
That's all the trick for centering page content
And then specifying separate background colors for
html, body
and
page-container you will gain desired result

Re: Change width, center site & change background color
 

Thanks for your help, but I still can't get the site to center. Any other suggestions? Much appreciated.

Re: Change width, center site & change background color
 

I've messed with the page-container(s) too... no love.

The main trouble seems that all the elements that are floating tend to float off the center of the page. They are stuck, or at least their contents are stuck to the left and right margins.

Is there another thread that clears up how to modify the default layout into something more flexible?

Re: Change width, center site & change background color
 

The style sheet definitions in html seem well suited to customization. The stylesheet itself needs a major redesign/optimization before it's flexible or particularly easy to work with.

Re: Change width, center site & change background color
 

Hi, I cant seem to get this table centered. (see pic) Here is my code from bottom.tpl

I'm not to good at html yet.

<table width="100%" cellpadding="0" cellspacing="0">
<tr><td class="HeadThinLine"><img src="{$ImagesDir}/spacer.gif" class="Spc" alt="" /></td></tr>
<tr>
<td class="BottomBox">
<table width="100%" cellpadding="0" cellspacing="0"><tr>
<td class="Bottom" align="left">{include file="main/prnotice.tpl"}</td>
<td class="Bottom" align="right">{include file="copyright.tpl"}</td>

<div align="center">
<table width="431" border="0" cellspacing="2" cellpadding="2">
<tr>
<td><a href="../Moneybackguarantee.html"><img src="../images/Money-Back-Guarantee-smaller.gif" alt="SSL Certificate Authority" title="SSL Certificate Authority" height="74" width="75" align="absmiddle" border="0" /></a></td>
<td><img src="../images/paypalhorizontal_solution_PPeCheck.gif" alt="" height="58" width="223" align="middle" border="0"></td>
<td><img src="../images/PositiveSSL_tl_transsmaller.gif" alt="" height="75" width="75" border="0"></td>
<td><!-- Begin Official PayPal Seal --><a href="https://www.paypal.com/us/cgi-bin/webscr?cmd=_seal-entry&pal=support%403dnucleus%2ecom" target="_blank"><img src="../images/paypal_verified.gif" border="0" alt="Official PayPal Seal"></A><!-- End Official PayPal Seal --></td>
</tr>
</table>
<table width="394" border="0" cellspacing="2" cellpadding="0">
<tr>
<td>
<div align="center">
</table></tr>
</td>
</tr>
</table>

Thanks!:-)

Re: Change width, center site & change background color
 

I have been successful changing my site's width, centering it, and changing the background color. (in 4.2).

It's tricky because the developers have changed the way the html is coded. The "page-container" div contains the main section of the page and has a top margin that pushed it down the page. Then, at the end of the code, the header is defined with "absolute" positioning relative to the top left corner of the screen.

So if all you change is the CSS on the "page-container" div, you won't change the header at all. And I'm not enough of a whiz to get the header to be centered if it's not in the regular document flow.

So what I did was edit home.tpl and moved the header div up to just inside the page-container div. Like so:
And then I had to adjust the height of the header in the main.css and remove the top margin on page-container.

Note: If you're using fast lane checkout you also have to change this in the home.tpl inside the FLC module, and change the FLC header height (it's at something like line 3250)

Hope that helps.

Sig line is outdated. Sorry about that.

Joe

Re: Change width, center site & change background color
 

I was venting my frustration before... I'm better now.

What I did is create my own layout in CSS, and apply my styles to the page templates.

Reverse engineering the product layouts... not fun, but I'm getting there.