There is more than one way to skin ...

[Hornblower]

I have had a bit of a look around this forum, but there are many posts so please accept my appologies if something like this has already been posted.

I am new to CubeCart so have come straight in on version 5.0.7 - because of this I have no baggage to bring with me, so you won't find any comments along the lines of "why did they do this, I liked it so much better before ..."

Like many of you I am frustrated by the lack of documentation (for "lack of" read "none") in the methods and ways of making this software present your products to the world in a manner that you find acceptable - or in other words re-skinning.

However, not being a novice in the ways of web development, I had a good look around and tried a few things and below is where I got to in the land of re-skinning I hope you who read this find it helpful.

I am assuming that you have an up a running version of CubeCart 5.0.7 and some sort of code editor and ftp client - I'm using Dreamweaver as that is what I am used to; if you don't have a decent IDE try Eclipse which was free and pretty awsome last time I used it.

Before altering anything see if you can get as close to what you want by just using the admin control panel. There are many options in here so spend some time playing around with these settings - although there is a fairly good wiki for this side of things (http://www.helpdocs.info/Main_Page) there is still a lot to take in.

Assuming that since you are still reading this, playing with the settings in the admin control panel wasn't enough so what next?

Decide which of the existing themes is nearest to what you want.

Find the folder for that theme in the "skins" folder on your local copy.

Copy the folder (and all its contents- I know that this is implied but sometimes it is worth just stating the obvious) and paste it back into the "skins" folder.

Rename the freshly pasted folder to something unique - let's assume you call it "myskinnamehere" (but don't call it this think of something better, you will thank me in the long run!).

Open the folder and you will find "config.xml". Open this file in you editor of choice - mine, as I have already said is Dreamweaver but if you are really hardcore you can use note pad.

Now be careful - get this wrong and this new skin won't work - concentrate!

Alter the line that starts with <uid> to:

<uid>[email protected]</uid>

then the lines that start <name> and <display> to:

<name><![CDATA[myskinnamehere]]></name>

<display><![CDATA[Myskinnamehere]]></display>

OBVIOUSLY use your own skin name - and watch for the capitalisation or lack of it on the last 2 lines above.

(The skin I chose had several colours choices available, I am not developing to resell just for my site, so this was totally unnecessary. So I deleted all the xml data beetween and including the <styles> </styles> tags; moved the relevant layout.css into styles folder directly from its sub-folder and did the same for all the relevant images in the images folder. - all of these folders are in the one you just created no need to go digging around. This will take a bit more sorting - making sure paths to images and layout.css are correct in the templates and style sheets)

Upload your shiny new folder and files to your choice of web server hosting.

Go and look at your site. Choose you new skin. If it works (or it is dispalying something and not an empty page) do a little dance of victory. If it doesn't reload (For restart your browser to make sure it is not a caching issue. If that doesn't work you, check your new files have uploaded then recheck your "config.xml" in your skins folder because this is where 95% of the problems will be at this stage.

Once you can see something go into site admin and choose your new skin for you site (probably a good idea to turn of the users ability to change styles - this lost me some considerable time and hair because I had changed which skin the site was using from the test site and not the admin site)

Now the real fun starts. (cont....)</display></name></uid>

[Hornblower]

Ok so your site is doing something but not quite what you want. All the files you need to change are in the folder you just cereated. If you can't do it with these files then it may be a bugged behaviour or a new feature request.

It is very dangerous to change any files outside the new shiny folder you just created.

OK so it may not cause you physical harm, but it could stop the software working completely; cause unexpected behaviours or completely trash everythig you have worked to do.

Also when you decide to upgrade to the latest release you will probably find all you changes will be deleted and may not, and probably will not, be present so unless you have kept a record of everything you did ....

However when you do an upgrade none of the files in your skins folder will be affected and should work directly with no alteration (unless it is stated to the contrary by CubeCart).

[Hornblower]

Ok I can almost hear you screaming 'which files do I change' at me now.

Here goes - in your 'myskinnamehere' folder there will be some sub-folders:

images : put your images in here!

js : absolutely no need to do anything with this folder - go on, just leave it alone.

styles : this is where you will be doing most of the work - cascading stye sheets, don't you just love 'em. (If you don';t learn to, this is mainly what makes everything tick. If you don't understand CSS go and learn now, it will save you so much time in the long run.

templates : this is the other folder you will be in and out of a lot.

and in the 'myskinnamehere' folder will be the solitary file called 'config.xml'. You have messed with this file once already. That was enough - no need to touch it again, and yes it does like being alone.

So 'styles' and 'templates' it is then. Let's deal with these one at a time:

NB: When altering any of these files, because they are 'dynamic' pages (in other words they work using live data), they will not display properly in your WYSIWYG editor's design view, get to know and love working in code view.

STYLES

There are three that you can safely ignore (certainly to start with) and these are ie7.css , print.css , and reset.css

This may only leave you with common.css, although I also had layout.css as this style I am adapting came in various flavours.

This last one (or 2) is where all the styling for you site happens.

TEMPLATES

In this folder are all the templates which generate or have the html code for all you pages. The files that do all the work getting the data form your database and doing some meaningful bits with the are mostly in the classes folder. Have a look at them if you really want to (sometimes it is useful to see variable structures) but remember if you change anything in here that should properly be called programming not reskinning. Unless you are doing something incredibly special there shold be no need to change these files.

The main file you will want to look at and work with is handily called 'main.php'. If you are used to HTML code there is not too much to frighten the horses here apart from those bits in curly braces vis: {$STORE_URL} . All of these are replaced with data when the page is requested. Earlier I said I had moved a stylesheet, it is in this document that I made the alteration:

<link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/black/layout.css" media="screen" />

to

<link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/layout.css" media="screen" />

This whole page seems a bit short and missing a whole lot of code comapred to what get shown to the user - where is it? In my code view in Dreamweaver scattered over the page in black colour coding are things like {$MAIL_LIST} and {$SALE_ITEM} these are 'smarty' requests. Go on google it, I'm not making it up.

All of these refer to, or call to be more precise, other smaller templates (may be useful to think of these as snippets of dynamic code). So for instance {$MAIL_LIST} calls box.newsletter.php and adds the content of that file to the page. Which one goes with which? The names are pretty descriptive and you normally get it right on the first guess. All of these smaller templates are littered with html (div's class's h's a's ol's ul's li's etc etc) more than enough for any css stylling junkie.

The other big call from this page is the {$PAGE_CONTENT} smarty call. This is different depending on which page has been called and this content is in the templates that are named content.something.php with something being pretty descriptive.

So think of it like this : your pages have CONTENTs surrounded by information BOXes which are held together by the MAIN.php and told what to look like and where to go by COMMON.css

[Hornblower]

Ok last but not least:

Debugging.

Bit of a thorny issue for me this one .... I don't like any of the debugging output I seem to be able to get. Please let me know if I am missing something!

There are 2 ways of getting debugging info I have found:

1) Turn it on in the admin section

OK so this is good if you want general messages about errors. It also shows the SQL calls. What it does show (or perhaps it does but I haven't found out how to access it) is what the data returned is. What variables are declared, set what type they are or what there value is. So I turned this off

2) Turn on SMARTY debugging

Add {DEBUG} at the end of main.php. Much more verbose popup, but stilll truncates data in arrays which was the bit I was intersted in.So I turned this off

I hope this post is of use - I know there are many out there with a much deeper understanding of parts of this software; but as I hadn't been able to find a quick guide as to where to start I thought this might be helpful.

My site: http://www.charsma-art.co.uk/index.php still under construction should be fully live in about 10 days so may still be buggy if you visit soon.