X-Cart forums

[balinor]

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:

<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:

.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:

<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:

.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!

[Emerson]

Congrats on the post count

They should create a new rank for you as CPO(Chief Posting Officer)


Nice contrib.

[Jon]

Congrats.

If you want to get to 40,000 posts within this thread just keep posting the necessary edits for the necessary css template changes :P

[Emerson]

Originally Posted by Jon

Congrats.

If you want to get to 40,000 posts within this thread just keep posting the necessary edits for the necessary css template changes :P

DOH!!!!

[balinor]

Yea, that's my plan...only work on this thread from now until 2020. By then, X-Cart will be pure CSS

[SystemSkins]

Originally Posted by Jon

Congrats.

If you want to get to 40,000 posts within this thread just keep posting the necessary edits for the necessary css template changes :P

HAHAHAHAHA Yeah, I bet you could hit 40,000 with CSS changes LOL


If X-cart ever goes Completely CSS it will be a PITA for everyone to upgrade to. I don't think it would be a simple patch. There would be a ton of customizing to get your site to look back to normal. At least for my site that is.

[kvedros@cox.net]

Balinor
Success.
Thanks for your help.

[KeithXtreme]

I did these changes, very simple....but I had a div in my featured.tpl that converted the background to a transparent, and now it does not work

It was very simple....

these are the two CSS entrys:

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

.DialogBoxOff{
BACKGROUND-COLOR: transparent;
TEXT-ALIGN: left;
PADDING: 0px;
border: 0px;}

And a <div class="DialogBoxOff"> around the entire contents of featured.tpl

Any suggestions?


Also Balinor, when you going to add to this thread on CSS Changes

[kube]

Is it not displaying at all or not formatting properly?

How about changing in css .DialogBoxOff to...

.DialogBoxOff .DialogBox {
BACKGROUND-COLOR: transparent;
TEXT-ALIGN: left;
PADDING: 0;
border: 0;}

hope this helps.

[KeithXtreme]

That did the trick....works perfectly.....Thanks,