| ||||||||||
Shopping cart software Solutions for online shops and malls | ||||||||||
|
X-Cart Home | FAQ | Forum rules | Calendar | User manuals | Login |
Convert to CSS - one piece at a time | ||||
|
|
Thread Tools | Search this Thread |
#1
|
|||||||
|
|||||||
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:
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:
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:
You'll need to add this to your skin1.css and skin1_admin.css: Code:
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!
__________________
Padraic Ryan Ryan Design Studio Professional E-Commerce Development |
|||||||
#2
|
|||||||
|
|||||||
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) Nice contrib.
__________________
Emerson █ Total Server Solutions LLC- Quality X-Cart Hosting █ Recommended X-Cart Hosting Provider - US and UK servers █ Does your host backup your site? We do EVERY HOUR!!! █ Shared Hosting | Managed Cloud | Dedicated Servers |
|||||||
#3
|
|||||||||
|
|||||||||
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 |
|||||||||
#4
|
|||||||
|
|||||||
Re: Convert to CSS - one piece at a time
Quote:
DOH!!!!
__________________
Emerson █ Total Server Solutions LLC- Quality X-Cart Hosting █ Recommended X-Cart Hosting Provider - US and UK servers █ Does your host backup your site? We do EVERY HOUR!!! █ Shared Hosting | Managed Cloud | Dedicated Servers |
|||||||
#5
|
|||||||
|
|||||||
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
__________________
Padraic Ryan Ryan Design Studio Professional E-Commerce Development |
|||||||
#6
|
|||||||||
|
|||||||||
Re: Convert to CSS - one piece at a time
Quote:
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.
__________________
Doug Rock X-cart Gold 4.1.9 _____________________________________ Altered Cart: 1-Page checkout Firetank: Feed Manager Website CM: CDSEO PRO Website CM: Product A-Z Map Website CM: Review Approval Website CM: Site Map Pro Qualiteam: Sales & Stats (free version) |
|||||||||
#7
|
|||||||
|
|||||||
Re: Convert to CSS - one piece at a time
Balinor
Success. Thanks for your help. |
|||||||
#8
|
|||||||
|
|||||||
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
__________________
http://www.chopworx.com Gold Version 4.1.11 Fancy Categories Shipper Per Product Featured Products Gallery V3 Store Manager |
|||||||
#9
|
|||||||||
|
|||||||||
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.
__________________
Doms kube v4.1.9 |
|||||||||
#10
|
|||||||
|
|||||||
Re: Convert to CSS - one piece at a time
That did the trick....works perfectly.....Thanks,
__________________
http://www.chopworx.com Gold Version 4.1.11 Fancy Categories Shipper Per Product Featured Products Gallery V3 Store Manager |
|||||||
|
|||
X-Cart forums © 2001-2020
|