X-Cart forums - Convert to CSS - one piece at a time

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Convert to CSS - one piece at a time (https://forum.x-cart.com/showthread.php?t=35882)

Convert to CSS - one piece at a time

For my 20,000th post (yes, I know, scary) I figured I'd contribute something instead of ask someone to update their signature for the 10000th time :) As you all know, the X-Cart templates are very table-heavy, and as you also may know, this is really not the way a web site should be designed in today's world. CSS is the way to go, for a number of reasons:

- Cleaner code
- Better cross-browser and cross-platform compatibility
- Better for Search Engine Optimization
- Easier to edit

Ideally, you want all formatting to be in a central CSS file and all content on the site with minimal markup. This allows the pages to load faster, and allows the content to be closer to the top of the code. There are some CSS skins available out there, but they will make it difficult to upgrade X-Cart at a future date. So until X-Cart decides to go tableless (hopefully soon), here are a few quick edits you can make that will eliminate a TON of useless code. This is for the 4.1 branch of X-Cart.

First, dialog.tpl is the template that is used on every page to display the content in the main area. By default, it uses a table inside a table, which is a real mess. To fix this to use pure CSS, replace the contents with this:

Code:

<div class="DialogTitle">{$title}</div>

<div class="DialogBox">{$content}</div>

This creates two simple div tags, one for the title and one for the content. You'll need to add the styles in your skin1.css and skin1_admin.css in order for this to look good. I'd suggest starting with this:

Code:

.DialogTitle {COLOR: #FFFFFF; background-color: #000000; FONT-WEIGHT: bold; height: 20px; padding-left: 10px;}



.DialogBox {BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: left; PADDING: 10px; border: 1px solid #000000;}

That will create a black title bar with white text, and a white box with a black border for the text. Adjust colors, sizes, and padding to your liking. Again, you'll need to add this to both skin1.css and skin1_admin.css for the customer and admin sides.

Next, menu.tpl is a major offender for bad code. Replace the entire contents with this:

Code:

<div class="VertMenuTitle">{$menu_title}</div>

<div class="VertMenuBox">{$menu_content}</div>

You'll need to add this to your skin1.css and skin1_admin.css:

Code:

.VertMenuTitle {COLOR: #ffffff; FONT-WEIGHT: bold; height: 20px; background-color: #000000;}



.VertMenuBox {BACKGROUND-COLOR: #ffffff; PADDING: 5px; border: 1px solid #000000;}

That will create a menu box with a white background, black border and black title bar with white text and none of those awful 90s dingbats. Adjust the style however you want, using images, colors, etc.

There are tons of other places that need help too, but making these two changes will help eliminate a ton of code bloat. Make a backup of your files first, as this WILL mess up your site if not done correctly. Enjoy!