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:


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:



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:


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


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!

Re: Convert to CSS - one piece at a time
 

Congrats on the post count :)

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


Nice contrib. ;)

Re: Convert to CSS - one piece at a time
 

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

Re: Convert to CSS - one piece at a time
 

DOH!!!! 8O :lol:

Re: Convert to CSS - one piece at a time
 

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

Re: Convert to CSS - one piece at a time
 

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.

Re: Convert to CSS - one piece at a time
 

Balinor
Success.
Thanks for your help.

Re: Convert to CSS - one piece at a time
 

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

Re: Convert to CSS - one piece at a time
 

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.

Re: Convert to CSS - one piece at a time
 

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

Re: Convert to CSS - one piece at a time
 

Currently I am finishing my site redesign with version 4.1.10 and I do want to make these CSS changes but get stuck...

When looking at the 4.1.10 skin1 CSS file there is no .DialogTitle and .DialogBox but I what I can locate is:

TD.DialogTitle, TD.DialogTitle .Lbl {
COLOR: #000;
FONT-WEIGHT: bold;
FONT-SIZE: 15px;
/* BACKGROUND-IMAGE: url(images/dialog_bg_n.gif);
BACKGROUND-COLOR: #44AADA;*/
VERTICAL-ALIGN: bottom;
TEXT-ALIGN: left;
}

and these two:

TABLE.DialogBox {
WIDTH: 100%;
HEIGHT: 100%;
VERTICAL-ALIGN: top;
}
TD.DialogBox {

TEXT-ALIGN: left;
/*PADDING: 10px;*/
}

So which ones am I supposed to change?

Another question related to this topic: Now I have H1 tags by surrounding the title in dialog.tpl.

How can I implement the H1 tags when the original contents are beeing replaced by the div classes?

Thanks in advance for some help with this..!

Re: Convert to CSS - one piece at a time
 

They don't exist by default, you need to create them per my post above :)

Not sure I follow you with the h1 tags?

Re: Convert to CSS - one piece at a time
 

Ah... So I will create them then :wink:


About the H1 Tags: In my live site I am using dialog.tpl with an H1 tag and dialog_no_h1.tpl for the parts where I don't want an H1 tag. When I would follow your post, the contents of the original dialog.tpl would be replaced by the div classes, right? So how do I add the H1 tags to show on the product title?

Re: Convert to CSS - one piece at a time
 

Just put the <h1> tags between the div tags:

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

Re: Convert to CSS - one piece at a time
 

Many thanks for your (as always) quick reply!

Re: Convert to CSS - one piece at a time
 

did this on mine and worked very well.

Can we have some more please? :-)

Re: Convert to CSS - one piece at a time
 

Oh Yes! More CSS please.... :P A step by step manual "convert to CSS" as sticky would be an ultimate superthread :lol:

Re: Convert to CSS - one piece at a time
 

anyone got any more ideas on this one?

Re: Convert to CSS - one piece at a time
 

I'll post some more when I have some free time..

Re: Convert to CSS - one piece at a time
 

Great information and I was able to make my head.tpl and other tpls related to the head.tpl all css. Then I ran into a problem. The body wanted to stay in the header and I could not get the body of the content below the header.

Do you mind sharing how to get the body below the header?

Re: Convert to CSS - one piece at a time
 

Would need to see how you have your header coded.

Re: Convert to CSS - one piece at a time
 

I figured it out after I kept playing with it. But here is the code and if any suggestions I'm all ears. I put the extra closing div tags in the rectangle_bottom.tpl if that is not where they go where would they go?

Re: Convert to CSS - one piece at a time
 

You need to close the <div> tag right in that file unless you want the headerbackgd class to be behind the whole site :) Also, if you are using float: you need to make sure to clear them.

Re: Convert to CSS - one piece at a time
 

I tried that code for the head.tpl

Got the first div no problem with just my logo sat in there.

Problem I have is my customer/search.tpl and my customer/top_menu.tpl currently sit in the same line.

That is horizontally the search is on the left and the menu in the middle.

Can only get it to work in a div if one sits above the other.

Any ideas on that one please?

Re: Convert to CSS - one piece at a time
 

You need to use the css property "float" to get things to sit next to each other horizontally, or they will always stack.

Re: Convert to CSS - one piece at a time
 

Thanks for that, looked up the float css stuff and got it to work, though I have the HeadRight on the left and the search box on the right.

One thing though, the div with the search box on the right is not as good as it could be, it has a 1 px gap at the bottom and a 2 px gap to the right, I have played with the padding and margins/borders, but cannot find why it is formatting like that.

I put another Div in to push the rest of the page back down as it all squashed together when I put the new divs in ! :-)

Here is what I have, note a few probably not needed extras in the css !


Here is the divs bit:



Really noticing the shop starting to load much quicker now, thanks for all you lots help so far, much appreciated :-)

Re: Convert to CSS - one piece at a time
 

ok ignore above code, deosn't work in firefox apparently.

bit stuck now, so put old code back in.

Not easy this css stuff

Re: Convert to CSS - one piece at a time
 

I have mutliple columns layout for the categories and subs on a site with tables and I would like to convert it to css to clean up some of code. I have not been able to figure it out. How do you do it with all css?

Re: Convert to CSS - one piece at a time
 

That's the problem, first you have to know css inside out, so options are to buy a template and then modify or really get to know what you're doing.

Problem I have found is that tutorials on the internet are good but they do not account for what we are trying to do and doing it a bit at a time means you have divs conflicting with tables.

The whole object being to get rid of tables but the code is sat in so many sources it's a headache.

Think I am going to buy a template regardless of updating issues it's the easy quick fix.

Re: Convert to CSS - one piece at a time
 

The only css template that I'm aware of is http://www.cart-lab.com/X-Cart-version-41x-CSS-Template-p-113.html for x cart. Are there any others?

Re: Convert to CSS - one piece at a time
 

xcartmods do one, being worked on to be compatible with latest version at the moment apparently, waiting on news for that one.

Re: Convert to CSS - one piece at a time
 

Hi-

Is there an equivalent of this for 4.019, I have most of my site down to include css to a high degree but would like to implement this.

Have a nice day.

Re: Convert to CSS - one piece at a time
 

I'm working on this as well.... and I'm making head way :D

Extra difficulty is that rounded corners were asked for.... as well as a style switcher....

version one http://www.lolalola.be/xcart/home.php (i messed up here...)

version two http://www.lolalola.be/xcart2/home.php (this is 50% nearing completion!!!):D/:D/:D/

Re: Convert to CSS - one piece at a time
 

It's now ready Happyscott :)
http://forum.x-cart.com/showthread.php?t=42988

Re: Convert to CSS - one piece at a time
 

Hi Padraic,

I was thinking about buying the css template from xcartmods.co.uk, (and then hopefully learn while I mod that)
Will I have problems when I upgrade to 4.2 if that day ever comes?
Will I still recognize whats going on in the .TPL's?

I will have to re-paste some mods I have back in so it won't be entirely tableless anymore, is that going to be a problem you think?

Advice? (philJ pls chime in here too!)

Thanks as always!

Re: Convert to CSS - one piece at a time
 

Nothing from 4.1.x will translate to 4.2, you'd need to rebuild it all.