X-Cart forums

[RandyK]

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

[Victor D]

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

html, body{background-color:#33657f;
}

[RandyK]

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.

[Victor D]

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

[RandyK]

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

[buckyreal2]

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?

[buckyreal2]

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.

[pfarcus]

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!

[joet]

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:

<div id="page-container">

    <div id="header">
      {include file="customer/head.tpl"}
        </div>

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

[buckyreal2]

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.