Kryptronic Info Center

The Info Center has articles on everything you need to get your site up and running with Kryptronic software. Hundreds of articles are available which contain tips, tricks, software updates and release notes, and everything you ever wanted to know about eCommerce, but were afraid to ask...

Kryptronic

Training Wheels: Changing The Background

This tutorial deals with changing the background color and/or image in your ClickCartPro/EuropaCart 8 display skin.  There are many articles that focus on various points for updating the look and feel of your web site. This article will focus on:

– Changing the color of your background.
– Adding a new background image to your site.

trainback-1

Most of what we do here will take place in the admin of ClickCartPro/EuropaCart 8 and will deal with skins and scary terms like CSS and all of the confusing nooks and crannies that go along with computer languages.

This is not meant to be a tutorial in CSS…rather, just a brief explanation of how to tiptoe around in CSS, get what you want from it and not disturb the sleeping giant in the room.

Important First Note: Always remember that when you’re making changes to large blocks of code, that you copy the entire block and paste it into a word processor like Notepad before making changes. It will save you heartbreak and time in the end. If you mess something up, you always have a know starting point to return to. Heed these words, grasshopper…

Let’s go to the skins section to start our work.

You’ll want to click on the System | Displays | Display Skins menu:

trainback-2

Next, we’re going to select the Desktop Skin and click on the ‘Update’ link.

trainback-3

Here, you’ll see all of the various elements that make up the main display skin for desktop users. We’re going to scroll down until we find the Directory: /css menu, find the all.css file and click on ‘Update’.

trainback-4

Important: Always Back Up Before Making Changes!

We’re about to make changes to an area of computer code that we know little about. The first step we always take when working on code is to copy everything in that block and paste it into Notepad or some other text editor. Why? Because if we mess up, we always have a known point we can return to. It sounds like a bit of a hassle, but certainly much less than having to call tech support and pay someone to do it for you.

Now we’re looking at many lines of code that control elements of the display skin and how they appear. We’re going to scroll down until we find the heading that says ‘Skin Background’:

trainback-6

Now you’re going to be concerned with 2 lines of the code here – one says ‘background-color’ and the other says ‘background-image: url’. Keep in mind that the background image supersedes the background color, so if you have a background image, as does the default demo store, you won’t really see any colors until you either remove it or comment it out. Normally we recommend commenting things out so that if anyone else ever works on your site, they can see what’s been done previously.

To comment out the current image, we just essentially put CSS approved brackets around it.

While enabled, the line of code looks like this:

background-image: url(‘../media/background.png’);

To comment it out, we simply surround it as such:

/*background-image: url(‘../media/background.png’);*/

Note: We’ve simply put a /* before and a */ after

Now that we’ve commented out the onboard image, your store will lose those think gray diagonal lines on a white background, and the current gray background will appear:

trainback-6

Now we’re ready to add a new color. To see what colors are available, simply go to Google and look up ‘CSS color chart’. You’ll find about a million of them – just click on any one and you’ll see a chart of colors and the code you need to implement them in your CSS files.

They will look like this:

trainback-7

You’ll see a color and a code. Just select any color you wish to test and highlight the name of it and copy it. Let’s shake things up a bit and select blueviolet. I’m going to highlight the ‘#8A2BE2’ code.

Now we’ll return to ClickCartPro in our CSS for the skin. We’ll find the line that says:

#skin_background { background-color: #EFEFEF;

And we’ll paste our new color over the existing ‘#EFEFEF’ that is there. So now it should look like this:

#skin_background { background-color: #8A2BE2;

Let’s have a look:

trainback-purple

Isn’t that just purpley good? Love it or hate it – now you can do it.

Changing the Background Image

This should be easy – we now know where this image lives and we also know that we’ve commented it out at this point. All we have to do is upload our new image and activate the images that we commented out earlier.

First, let’s pick a new image.

Normally, you can find license-free images lurking on Google. Simply go to www.google.com and click on images. Then just type the term “background images” into the search bar. You’ll immediately be greeted by a ton of images. Just select the one you want, make sure it’s free and clear and then right click on it and save it to your hard disk. If you’ll recall, the artwork for the original image is in the ../media directory of your Desktop Skin. Let’s put our new image in there. ClickCartPro/EuropaCart 8 makes this very easy.

First, let’s return to our Display Skins directory:

trainback-2

Then simply click on ‘Update’ for your Desktop Skin:

trainback-4

Under the Functions Menu, click on the link that says ‘Upload File: Click here to upload a file to be controlled by this skin’.

trainback-9

Remember, we want to place this new background image in the ../media directory.

You’ll simply browse your drive to find the file you want and then select ‘/media’ in the Skin Controlled Directory Selection.

trainback-10

It should look like this once you’ve made your selection. Note…we are using a file called ‘grunge-background-2.jpg’.

trainback-11

Click on ‘Submit’ and your artwork will be copied to the ‘/media’ directory of your Desktop Display Skin.

Now let’s return to the all.css and click on ‘Update’.

trainback-4

We’ll navigate back to where we commented out the skin background earlier:

trainback-5

And this time, we’ll add the name of our new background.

It should now look like this:

trainback-12

Now let’s check out our handiwork.

trainback-13

It’s that simple…and the results look pretty darned cool…

Kryptronic: Security. Stability. Reliability