|
X-Cart CSS Template/Skin
http://www.cart-lab.com/xcart/files/images/thumbs/t_1.jpg
After many countless hours of customizing and rebuilding the default X-Cart skin I'm happy to introduce a W3C CSS Compliant X-Cart skin. Here are some details on the CSS Skin: - 90% of customer side of cart has been converted to CSS styling and positioning. Eliminating many tables thorugh out the custome end of the cart. Allowing content to be loaded first. - Search spiders crawl main content area first. - Dial-up customers download and are presented with content first before downloading any menus, headers or footer. - W3C CSS Compliant. - Font sizes are adjustable via browser. - Buttons also fit adjusted font sizes. - Improved checkout performance with progress bar. - Important buttons are highlighted to help guide customers - Improved site speeds, 30kb less html data. - Easily customized with intermediate CSS knowledge. 800x600 (or higher) resolution friendly, with fluid expanding layout. Tested compatible with Internet Explorer 6.0 & FireFox 1.0.7. Built with X-Cart version 4.0.16 Gold but will also be backwards compatible for any 4.0.x branch. I will also be planning to upgrade this skin to version 4.1.x once it is released as well. For more details and purchase information can be found on the new cart-lab store: :arrow: http://www.cart-lab.com/xcart/product.php?productid=1 |
nicely done :-)
|
My eyes... they don't hurt anymore. Yes, yes... that's much better.
|
Hi Boomer
Good effort. However here is a link for you to check: The doctype declaration has changed in the last few months. Quote:
is no longer supported. They now point the declaration to the test suite that is used to verify your page. This tightens up their QA system and guarantees that the testing doesn't change (except for them fixing the test suite bugs). Try the following declaration at the top of your pages: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> or if you are trying to comply strictly use the following: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"> In the future we will be having XHTML test suites that are stable for us to check our pages to. Your Stylesheet passes with full colours!! Good effort! Regards Ing. tephen Hatton :idea: |
Stephon Hatton,
Thanks for the update on the DOCTYPE declaration. I've updated this accordingly. As for valid HTML 4.0, I'll leave that up to the X-Cart team to maybe tackle in future versions of X-Cart. I had helluva time just converting the existing templates to work well with the new style sheet. My hopes is this will get the X-Cart teams attention to perhaps re-think the existing "out-of-box" template into a more easily customizable form as well as more on the cutting edge of current web technologies. I know everyone is screaming, valid W3C CSS and HTML, even search engine spiders are looking for those with valid docs as to make it easier for their spiders to crawl without hiccuping all over the place because of malformed HTML and CSS. |
I have to applaud you on this one Boomer - what's it like for upgrades?
Rather than go down the whole css route I tend to strip out a lot of excessive tables from the templates and replace with <divs> and css classes. Every table you simplify or remove improves page rendering time. |
Quote:
I plan to keep the skin updated to the latest version, but this may not help those whom are upgrading. I've not attempted a patch file, yet. (yet being the keyword). Once I know more i'll be sure and post here. Minor versions may be not problem but once 4.1.x is released I'll need to go back through a fresh install of it and re-customize all over again, however I have a good solid base now to work with. |
Hi Boomer
Good Job. I also re-iterate your comments: Quote:
Maybe if we say it often enough ????? :?: :?: :?: :?: :?: :?: :?: :?: :?: :?: :?: :?: :?: :?: I have a riddle (Just as a logical issue really): If porn sites are bad to link to because they are not politically correct :oops: and may give your site a worst rating because of their content, then why have all the sites I have seen have perfect W3C HTML compliance??? #-o :roll: :?: :?: :?: :?: :?: :?: :?: :?: :?: :?: :?: :?: :?: :?: Regards Ing. Stephen Hatton :idea: |
I just tried to validate the pages, seemed to product quite a few errors :roll:
|
Quote:
Which "validator" are you using? :arrow: http://jigsaw.w3.org/css-validator/validator?uri=http://www.cart-lab.com/X-Cart-CSS-Template-p-1.html |
Same one, but trying it on the "view demo" link: http://www.cart-lab.com/demo_4x/home.php?skin=cssskin
|
Thanks for pointing that out, I had older version of the CSS files up instead, I've updated these accordingly and the demo will now validate properly. :wink:
|
No prob :lol: As an xhtml/css programmer, I know how much work has gone into what you have.
|
Hi All
As a Newbie to WEB programming and learning HTML, CSS - I understand the effort involved. People should lead by example - You have done a great job. =D> =D> =D> =D> =D> =D> =D> Regards Ing. Stephen Hatton :idea: |
You are a madman Boomer, I started this process and quickly gave up when I realized just how much work was involved. Nicely done!!
|
Quote:
Just to note, I've been working on it since 4.0.2 off and on. I can't count how many hours I put into it, hopefully creating a good starting point skin for other developers and designers. Here's a site I'm currently working on that is using a custom version of it: :arrow: www.sprayboothsupplies.com |
What I've done with my XHTML cart, is just remove ALL formatting, and create a few extra tpl files to deal with the new formatting. It is a lot less work than what you have, but it also isn't something I can turn around and sell right out of the box.
Some tpl files look like they were created by FP 98 lol. |
So will designers be selling versions of this soon?
Also, for a someone with, say, Dreamweaver (with the smart filter) would be it too complex to make it rounded? Does CSS lock you into a squared look? I looooove the speed, but I need a little more rounded elegance than the default. I like the "natural" look from 7dana, but even something like the genpi.com look would be great. |
Quote:
Quote:
|
Quote:
Up above, B00MER says: "Good starting point for developers and designers". It kinda looked to me like they'd pay Cart-Lab a certain fee (royalty? base code fee?), and tack on their own. As if you'd see, I dunno, $180 versions of this pre-stylized that someone else worked on. It would, indeed, be a very nice base for a series of new templates. This thing is made of pure andrenaline. Quote:
I'm saying exactly what your search appears to be responding to. Looks like you hit on the nail on the head! :) As it stands, it's all based on hard 90 degrees angles, and I'm asking if an X-Cart idiot (i.e., someone with Dreamweaver) can curve it out. Curvy like 7dana.com's natural design , or genpi.com. It looks like the examples from Google, don't get curvalicious with CSS itself. They're adding little images, and using some pretty tough code to do it. (tough for a newbie to integrate into a template full of smarty, that is) I'm not even sure this is what b00mer intended - it almost looked like he wanted to get away from images, and go with CSS code entirely for speed, but I guess CSS doesn't have vectors builtin. It sort of looks like CSS simplifies some stuff for us noncoders, but makes other things more difficult. I'd say a precurved version of this template could go for $30 more, and I'd happily pay it, so I could just replace the curve images and fiddle with the CSS color and font codes for a new look. |
Some of the possibilities with a CSS based layout/design:
:arrow: http://www.csszengarden.com/ I encourage anyone who does purchase the skin to take full advantage of its possibilities, and advantages. :wink: Some other good reading: :arrow: http://www.hotdesign.com/seybold/ |
Quote:
Yeah, the thing is definitely rad. Cool links, too! :) I'm not a developer, though. Just a lowly merchant. :( heh. So, B00MER, will other developers be allowed to license this (buy a pack, pay a royalty, however you want to charge them) as a base? It'd be cool to see specialized template developers (like 7dana) use this as a base. A slightly more expensive rounded one for a bit more, or a pre-cutified version for $200 or something would be appealing to me. I'd go with a fullout custom job, but I don't have the funds at the moment. (maybe the next month or two, around the time 4.1 is finalized) |
Quote:
I would love to see a version that only uses tables for displaying data. |
Quote:
I do offer reseller licenses at a discount, Contact me via Cart-Lab.com if you would like further details. What do you mean by "a version that only uses tables..." could you elaborate a bit? |
Some other CSS related articles:
Intro to CSS: :arrow: http://www.yourhtmlsource.com/stylesheets/introduction.html SEO and W3C compliance: :arrow: http://evolt.org/w3c-compliance-and-seo SEO Benefits of CSS: :arrow: http://www.devwebpro.com/devwebpro-39-20050919SEOBenefitsOfCSS.html |
Quote:
Why have a menu displayed like this: Code:
<tbody><tr> When you can achive the same thing by: Code:
<div class="menuItems">Basically, take what you have, and go further with it. |
Majority of the CSS Skin tpls are similar to this:
Code:
<div id="container"> |
Yeah, I noticed that, which is why I noted how much time/work you have put into it. There are still files though that use tables that don't need to.
|
Will the skin be updated with newest X-Cart versions and do your customers get always the newest version?
Is it only optimized on the customer side or also on the admin side (customer side would be enough). Hope to hear from you soon. Best wishes, Marc |
Quote:
Yes, the X-Cart CSS skin will be update along side X-Cart releases until a similar implementation is standard. The admin side is NOT converted to all CSS, if I did I would never of gotten this released, as there are 2x as many files on admin side. However the design and such does fit the same look and feel. The customer side, catalog pages and checkout templates are heavily customized from out-of-box. |
I would much rather see someone put time into the customer side, than put some in the customer end, and some in the admin end. I could care less how the admin section looks, as long as the customer end looks good.
If I didn't already spend the time converting the standard template to xhtml/css based, I most likely would have purchased your skin. |
Hi Boomer,
You have some terrific mods and this one is no exception, however, since my site is so heavily modded, it would not be practical to use a skin like this as it would involve many months of pain trying to integrate everything and get it to look the same as it does. Upgrading to CSS is a huge step so I think IБ─≥ll wait until 4.1.1 is released, then have a few drinks, roll up the sleeves, and dive straight into it head first! While IБ─≥m talking about CSS, IБ─≥ll share with you all my recent experience with CSS by saying how hard it was to remove several tables from my pages (I thought I would do it mainly out of curiosity). Anyway, I spent 7 days doing this (off and on) and with varied success. My head.tpl is now fully CSS. I've also replaced a few other tables here and there as well as replaced all my <font> tags with and <h1...h6> which I never knew the importance of before. I also did some much improved formatting and fixed up some code as well. But the single most difficult thing I found was trying to replace the table in the dialog.tpl file. You may laugh at this, but let me explainБ─╕ Normally replacing this table with divs would have been a cinch but because I have two small corner images that make the top of the dialog box rounded, it made recreating this in CSS almost impossible. I spent 2 days researching and trying to accomplish this and now IБ─≥ve simply given up Why? Browser bugs! If I managed to get it to work in IE, it would fail in Firefox and visa-versa. And who knows how it looked in some of the other browsers. This issue alone has made me give up on the notion that I could, ever so slowing, achieve a tabless web site (or near to it). Until the bugs are ironed out, I ainБ─≥t touching it no more! Anyway, so my hat goes at to you Boomer for what would have been a long and painful experience doing what you did. I reckon it would have kept you up at night wondering if you would ever get to the finish line. :) Congratulations mate! Well done! =D> |
Thanks for the kind words. I will admit the CSS Skin isn't compatible with Safari on Mac's yet, until I get a chance to find the browser "quirks" and fix them. I was thankful enough to get the skin working properly in IE version 6SP2 and FireFox 1.5.
As you mentioned Lots and Lots of old HTML information has to be converted, the skin in essesence took around 3-4 months to do off and on, one month in particular I focused on nothing else but CSS methods to implement a SEO/Usuable friendly site that was easy to customize. I was trying to focus on all 3 points of template. Alot of people mention how plane the design is. I did not set out to wow anyone with design aspects but more of whats under the hood, and how easy it is to perhaps tweak the engine underneath without much work. Take a look at the CSS Zen Garden for what can be accomplisehd. I know myspace.com utilizes a full CSS template on user pages as well. Thanks again. :wink: |
upgrading to 4.1
I currently have your CSS skin. It's great....very lightweight. I want to upgrade to 4.1 when it is released. Will this skin survive an upgrade to 4.1?? Or will I have reinstall x-cart and install the CSS skin mod?
|
Re: upgrading to 4.1
Quote:
Currently the development version of the CSS skin for X-Cart 4.1.x is being developed, as far as upgrading I will need to run some scenerios on what will be the most efficient manner to do such. From what I gather, renaming your existing skin1/ directory to something else and copying the CSS Skin for 4.1.x to skin1/ and then proceeding to empty out the templates_c/ directory of its contents via FTP or using admin summary panel, OR simply running cleanup.php from your x-cart install will do this also (Not on windows servers). After which you'll need to re-apply any .tpl changes that have occured with any 3rd party mods, you will also need to either copy the .tpl files needed from any official X-Cart add-on into the new skin1/ directory OR re-installing the Add-on would do the same as well. Basically the more out-of-box you can keep your X-Cart the better when it comes time to upgrading. Thankfuly X-Cart has implemented system fingerprints so you can easily determine which files are modified and are not the original code base. Hopefully I will have a 4.1.x Version within a few months after X-Cart releases the STABLE branch. :wink: I plan on sending anyone whom purchased the Skin recently(or specified extended support time during purchase) with a free upgrade, once its ready for public consumption. |
Re: upgrading to 4.1
Quote:
Thanks for the upgrade offer Boomer. I just purchased the CSS Temp a few days ago and do plan on upgrading to 4.1 once it becomes stable as it has many features I need. I tried e-mailing you (twice) about the x-affiliate home.tpl. In speaking with Carrie she had mentioned that it was in the works, if so, do you have an ETA for this. Also In trying to dress up the menu's a bit I stumbled on to this generator. http://www.neuroticweb.com/recursos/css-rounded-box/index.php?color=999999&fondo=FFFFFF Which gave me this CSS code: Code:
/* set millions of background images */And this HTML code: Code:
<div class="rbroundbox">I'm assuming the CSS would go with the #menu_hdr where would one place the html code? Thanks in advance for any help. |
I received your email in regards to the affiliate portion of the CSS Skin and haven't had a chance to reply yet. Once I'm available for custom work again I will get in touch with you in regards to this.
As for the rounded corners page, I would edit menu.tpl and strip all previous <DIV> tags and then re-insert the code this generator provides, be sure to include the style sheet info in either .css file. Hope this helps. ;) |
Boomer, any idea on how long it may be until it will be ready for use with 4.1?
Thanks |
Color Coding the ORDERS LIST
Hello...
Awesome work with the SKIN. Just have a quick question. When I was using the regular X-Cart SKIN, I had all the Orders in my Admin section color coded using the codes below. I have put this same coding into the CSS Skin however it doesn't work. Any suggestions???? Thanks in advance! Martin MediaEnterprises.tv --------------------------------------------------------------- In the following file....."main/orders_list.tpl" CHANGED <TR{cycle values=", class='TableSubHead'"}> <TD width="5"><INPUT type="checkbox" name="orderids[{$orders[oid].orderid}]"></TD> <TD>#{$orders[oid].orderid}</TD> <TD nowrap> {if $usertype eq "A" or ($usertype eq "P" and $active_modules.Simple_Module ne "")} <INPUT type="hidden" name="order_status_old[{$orders[oid].orderid}]" value="{$orders[oid].status}"> {include file="main/order_status.tpl" status=$orders[oid].status mode="select" name="order_status[`$orders[oid].orderid`]"} {else} {include file="main/order_status.tpl" status=$orders[oid].status mode="static"} {/if} {if $active_modules.Stop_List ne '' && $orders[oid].blocked eq 'Y'} [img]{$ImagesDir}/no_ip.gif[/img] {/if} </TD> <TD>{$orders[oid].firstname} {$orders[oid].lastname} ({$orders[oid].login})</TD> {if $usertype eq "A" and $single_mode eq ""} <TD> {$orders[oid].provider} </TD> {/if} <TD nowrap>{$orders[oid].date|date_format:$config.Appearance.date_format}</TD> <TD nowrap align="right"> {include file="currency.tpl" value=$orders[oid].total} </TD> </TR> TO THE FOLLOWING <TR{cycle values=", class='TableSubHead'"}> <TD width="5"><INPUT type="checkbox" name="orderids[{$orders[oid].orderid}]"></TD> <TD {include file="main/orders_colors.tpl"}>#{$orders[oid].orderid}</TD> <TD nowrap> {if $usertype eq "A" or ($usertype eq "P" and $active_modules.Simple_Module ne "")} <INPUT type="hidden" name="order_status_old[{$orders[oid].orderid}]" value="{$orders[oid].status}"> {include file="main/order_status.tpl" status=$orders[oid].status mode="select" name="order_status[`$orders[oid].orderid`]"} {else} {include file="main/order_status.tpl" status=$orders[oid].status mode="static"} {/if} {if $active_modules.Stop_List ne '' && $orders[oid].blocked eq 'Y'} [img]{$ImagesDir}/no_ip.gif[/img] {/if} </TD> <TD {include file="main/orders_colors.tpl"}>{$orders[oid].firstname} {$orders[oid].lastname} ({$orders[oid].login})</TD> {if $usertype eq "A" and $single_mode eq ""} <TD> {$orders[oid].provider} </TD> {/if} <TD {include file="main/orders_colors.tpl"} nowrap>{$orders[oid].date|date_format:$config.Appearance.date_format}</TD> <TD {include file="main/orders_colors.tpl"} nowrap align="right"> {include file="currency.tpl" value=$orders[oid].total} </TD> </TR> ------------------------------------------ AND THEN I CREATED A "NEW" TPL FILE - "orders_colors.tpl" {* $Id: orders_colors.tpl,v 2.0 2004/10/31 01:27:28 ADPBoss Exp $ *} {if $orders[oid].status eq "C"} bgcolor="#A3CBF9"} {/if} {if $orders[oid].status eq "P"} bgcolor="#B8FFCB"} {/if} {if $orders[oid].status eq "Q"} bgcolor="#FFFF99"} {/if} {if $orders[oid].status eq "F"} bgcolor="#FFB8C8"} {/if} {if $orders[oid].status eq "I"} bgcolor="#CCCCCC"} {/if} |
Quote:
However long it takes, its such a lengthy task, although since 4.1.x's HTML is W3C compatible, it may make things go quicker. I won't know until I actually get down an dirty with it. Once a release is available a newsletter will be sent. |
| All times are GMT -8. The time now is 03:23 PM. |
Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.