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.

Re: Change width, center site & change background color
 

Hi Tobias, could you please take a moment to update your signature with your X-Cart version? Thanks!

Re: Change width, center site & change background color
 

this is the CSS for centering the whole site.

#page-container {
min-height: 100%;
position: relative;
width:975px;
margin:0 auto 0 auto;
}

it works just tested.

Re: Change width, center site & change background color
 

Does this show my sig now?

Re: Change width, center site & change background color
 

Yep, just add the .0 at the end of it - 4.2.0

Re: Change width, center site & change background color
 

Hi,

I tried this:


#page-container {
min-height: 100%;
position: relative;
width:975px;
margin:0 auto 0 auto;
}


It adjusted the width, but the site is still not centered. Any further insight anyone can offer is greatly appreciated.

Thanks!

Re: Change width, center site & change background color
 

Try also

Re: Change width, center site & change background color
 

Using x-cart 4.2.x... having similar issues. Mine will center just fine, but the header of the page will come down and overlay the page content.

Any ideas? This is frustrating...

Re: Change width, center site & change background color
 

possibly you have unclosed div in your header.

Re: Change width, center site & change background color
 

haven't touched the header? I started from scratch on a new store..

Re: Change width, center site & change background color
 

interesting. Just re-loaded main.css and it went away.

By the way, the fix described above should work to center the page; post your complete code for the 2 .css rules #page-container and #content-container please.

Re: Change width, center site & change background color
 

I too am stuck on centering the entire site.

I can set the width fine but it stays on the left

Anyone got a fix for this yet as I have tried the ideas from earlier posts in this section.

Re: Change width, center site & change background color
 

change this


#page-container {
min-height: 100%;
position: relative;
width:975px;
}

to this

#page-container {
min-height: 100%;
position: relative;
width:975px;
margin:0 auto;
}

Re: Change width, center site & change background color
 

Thanks Ashley - worked once I reloaded the main.css file from the dist pack.

Interesting that I tried that yesterday and it did not work.

Re: Change width, center site & change background color
 

Hello,

Sorry to bring back an older thread, though I seem to be having a similar issue. I am trying to center my store, now it's centering in Firefox, Chrome, Safari and Opera fine, though it will not center in IE7/8 and it just messed right up in IE6. My main concern being the page centering in IE7/8.

My code for the body and page-container are as follows:



Any help would be greatly appreciated.

Cheers

Re: Change width, center site & change background color
 

html,body {
background-color: #E1E1E1;
border: 0px none;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
height: 100%;
padding: 0px;
text-align: center;
width: 100%;
}

#page-container {
background: #ffffff;
min-height: 100%;
position: relative;
text-align: left;
margin:auto 0;
}

Re: Change width, center site & change background color
 

oops I mean

#page-container {
background: #ffffff;
min-height: 100%;
position: relative;
text-align: left;
margin:0 auto;
}

Re: Change width, center site & change background color
 

Thanks for the reply though I have tried that, as well I want a fixed width.

The top is as well no longer flush so I added margin-top: 0px; to the body portion.

Another problem with that is now it doesn't center in any browser.

The site is located at: http://new.cbitsecurity.com if you would like to take a peek at it.

Cheers

Re: Change width, center site & change background color
 

No one has any further ideas?

This is bothering me as all the IE hacks I have tried work in every other browser except IE =/

Any further help would be appreciated.

Re: Change width, center site & change background color
 

#page-container {
background: #ffffff;
min-height: 100%;
position: relative;
text-align: left;
margin:0 auto;
width:950px;
}

Re: Change width, center site & change background color
 

just add the width property

Re: Change width, center site & change background color
 

Wow, that's all it was.

Thank you!!!

Re: Change width, center site & change background color
 

your welcome, sorry I didn't put that there the first time.