Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

HOW TO: let users switch skins/color schemes
   X-Cart forums > X-Cart 4 > Changing and adding new features
Thread Tools Search this Thread
Old 09-02-2003, 06:45 PM
Mad Mad is offline

Advanced Member
Join Date: Jul 2003
Location: Brooklyn, NY
Posts: 60

Default HOW TO: let users switch skins/color schemes

Ok this mod can be seen in action at Basically what it does is let the user set a small cookie which you can then use to load specific css file and graphics. I will show how it is implemented on my website, it is a very specific example but this mod is easily manipulated to fit your needs. The whole hack took me about 6 hours to perfect, it has been working great since (about 2 weeks).

First off, we edit [/skin1/customer/home.tpl]. Below 'd' in skin_d.conf stands for default, I suggest you rename skin1.conf to skin_d.conf to make things easier.
{ config_load file="$skin_config" }
The above gets replaced with:
{if $} {config_load file="skin_`$`.conf"} {else} {config_load file="skin_d.conf"} {/if}

If you want the skins to also apply to the administration section of your site, repeat the above step to [/skin1/single/home.tpl], else move on.

Ok I put the skin selection into head.tpl, making it appear on every single page. You are free to put the following piece of code where ever the hell you want, it will not make a difference, but may be harder to find by your customers.

So this from my [/skin1/head.tpl]. Just put it anywhere, and delete any unneeded colors/options.
<FORM action="{$smarty.server.REQUEST_URI}" method=POST name=skin_form> Skin: <INPUT type=hidden name="redirect" value="{$smarty.server.QUERY_STRING}"> <SELECT name=skin onChange="javascript: document.skin_form.submit()"> <option value="d"{if $ eq "d" or $ eq ""}selected{/if}>Default</option> <option value="b"{if $ eq "b"}selected{/if}>Blue</option> <option value="db"{if $ eq "db"}selected{/if}>Dark Blue</option> <option value="dg"{if $ eq "dg"}selected{/if}>Dark Green</option> <option value="g"{if $ eq "g"}selected{/if}>Green</option> <option value="or"{if $ eq "or"}selected{/if}>Orange</option> <option value="y"{if $ eq "y"}selected{/if}>Yellow</option> </SELECT> </FORM>

Now we have the switch utility in head.tpl, but switching won't do anything... yet.

I chose the following file because it is loaded in EVERY SINGLE php, which is essentially what we want. We want the user to be able to switch skins from ANYWHERE on the site, and it beats editing every single php and inserting the code... so if anyone thinks it is a problem that I put it here, let me know. I don't see it being any harm though. What this code does is write the cookie, it expires after a year, which is plenty of time. Insert the following piece of code into [/customer/auth.php]. Just insert it right after the copyright statement and you won't run into problems.
if($_POST["skin"]){ $store_skin = $_POST["skin"]; setcookie ("skin", $store_skin, time()+31536000, "/", $xcart_http_host); func_header_location($PHP_SELF."?".$redirect); }
Again if you want to be able to switch skins from the admin section of your site you will have to repeat the above step on [/admin/auth.php]

OK we are almost there. So far you will be able to select a skin, have the cookie written and then have the correct css file loaded. Everything should work except that the dialogs and site logos are still the default color. If you want them to stay the same then don't bother with the below, but if you do want to load a different dialog picture or logo just follow the example below.

For skinned graphics, just rename the default to filename_d, in this case rename the default bg_dialog.gif to bg_dialog_d.gif. Ok this example is for [/skin1/dialog.tpl] but can be applied on any graphic loaded. The original code in [/skin1/dialog.tpl] goes like this:
<TD height="20" class=DialogTitle background="{$ImagesDir}/dialog_bg.gif" valign=bottom>{$title}</TD>
Now simply insert _{if $}{$}{else}d {/if} between the end of the filename and the extention (whatever it may be).
So the snipet above should now look like this:
<TD height="20" class=DialogTitle background="{$ImagesDir}/dialog_bg_{if $}{$}{else}d{/if}.gif" valign=bottom>{$title}</TD>
Repeat the above step on any static graphics you want to be different, and that's it. You're all done, everything should work perfect and your users can enjoy different skins to match their mood/taste.

I'm a PHP/Smarty newbie (before I started working with X-Cart about a month ago), so I'm very proud of this mod that I made. What do you guys think? Any suggestions on what could be done better? If you're using this hack on your site, please reply with a URL so others can see more examples.

Reply With Quote
Old 09-02-2003, 07:13 PM
dealsondeals dealsondeals is offline

Join Date: Dec 2002
Location: Dallas, Texas, USA
Posts: 231


Good Work! Sweet mod! I Look forward to playing with this some, perhaps not letting the user set the skin, but perhaps expanding the selection of skin to be used based on day of the week, a holiday or something to that effect.

Continue your efforts, much success with your shop!


Never understimate stupidity.
X-Cart Version: 3.5.2
Configuration: Virtual Dedicated Server || Intel Pentium 4 2.4 GHZ CPU || 1024MB PC2100 DDR RAM || Linux || PHP 4.3.2 || MySQL server 4.0.14
Reply With Quote
   X-Cart forums > X-Cart 4 > Changing and adding new features

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

All times are GMT -8. The time now is 05:59 PM.


X-Cart forums © 2001-2020