X-Cart forums

[john.hodson@iinet.net.au]

Hi there,

We are in the process of upgrading from v4.1 to X-Cart 5.2.13. We now have a new X-Cart 5 site and are in the process of trying to change some simple design.

I'm hoping to do the following:
1. Change the whole website from white background to light green background (#DFF5F2). I did it in the "Custom CSS" section and managed to change the background colour to green, except for the footer section which remains white. I added the following basic CSS to get most of the background to the light green background:
/**
* background colour
*/
html, body {
background: #dff5f2;
}
*/
layout.main
background-color: #dff5f2;
}

2. Change all the font colour which is currently Blue to Dark green (#005D57).
3. Change all the price colour from the current orangy red to brown (#764000).

With my very limited IT knowledge, I remember only needing to make those changes in three places in the skin.css in v4.1. Are these changes to X-Cart 5 too ambitious for my limited computer skills?

Please help.
Thank you much.
John

[razortw]

Originally Posted by john.hodson@iinet.net.au

1. Change the whole website from white background to light green background (#DFF5F2). I did it in the "Custom CSS" section and managed to change the background colour to green, except for the footer section which remains white. I added the following basic CSS to get most of the background to the light green background:
/**
* background colour
*/
html, body {
background: #dff5f2;
}
*/
layout.main
background-color: #dff5f2;
}

Do this:

#footer-area {
  background-color: #dff5f2;
}

2. Change all the font colour which is currently Blue to Dark green (#005D57).

Try this

div, a {
  color: #005D57 !important;
}

3. Change all the price colour from the current orangy red to brown (#764000).

Try this

span.product-price {
  color: #764000 !important;
}

[john.hodson@iinet.net.au]

Hi Igor,

Thank you very, very much. You're a god-send.

Two more questions if you would be kind enough to help:
1. The box around each product (in the category page, featured products, etc) varies in size depending on how long the product name is. Is it possible to standardise the box size in Custom CSS to the longest name (which is about 3-4 lines in a box)?

2. How to set the background colour in the little thin space between the product boxes to #dff5f2 also?

here's the link: http://www.sportingoutbacksupplies.com.au/xcart5/

Thanks once again for your help.
Cheers,
John

[qualiteam]

1. ... Is it possible to standardise the box size in Custom CSS to the longest name (which is about 3-4 lines in a box)?

You can't make it match the longest name, but you can make it to always be 3 lines in height: you should either set the "min-height" for ".products-grid div.product-name", or adjust the "min-height" for the whole product cell (".products-grid li.product-cell .product").

2. How to set the background colour in the little thin space ... ?

At the moment the white background is set for ".products-grid li, .products-sidebar .product-cell .ui-draggable-dragging, .products-grid .product-cell .ui-draggable-dragging, .products-list .ui-draggable-dragging". I'm not sure if this is your custom code. If so, you should remove this. If this comes from the theme, you should override it and make the background to be transparent.

Then set the white background for ".products-grid li.product-cell .product" instead.

[john.hodson@iinet.net.au]

Thank you Alex and Igor. Solved my problems!