Customizing a BANS Template
Customizing a BANS template can be quick and simple. And, if you’re really daring, you can completely overhaul the entire layout. This requires a bit of knowledge of CSS, and it doesn’t hurt to have a little knowledge of PHP programming, too.
But to just make some basic site changes that help to make your site stand apart from the rest of the crowd, there are a few quick things you can do:
1. Select one of the base templates. Any template will do. I usually select one that has the logo section centered on the screen, but you can choose any theme.
2. Create your own logo. This is important because the basic template includes a blank gray logo with the name of your site in large text. You want a good graphical logo. But even if you’re not an artist, you can use the graphics software of your choice to create an image 968 pixels wide by 180 pixels high. Even the Paint program that comes with Windows will allow you to create a jpeg image that will suffice. I prefer PhotoShop, but I also use Paint Shop Pro and GIMP. GIMP is open source, so it’s a good choice if you don’t want to shell out the cash for PhotoShop.
Now comes the fun part. You get to create the logo. And if you’re not an artist, you may want to get help with this part. You want your design to look professional.
Once you have your logo image finished, save your file as logo.jpg. You can easily upload the new logo to your website through the admin panel. Click the “Template” button to go into the editor and click the “Upload Logo” link beside your selected template. This will allow you to locate and upload the logo you saved.
3. Remove the title from the BANS template by clicking the header.php link beside your selected template. Don’t worry if you don’t know what you’re looking at. You don’t have to for this.
Just find the words <a href=”<?php print URL_PATH.”/”;?>”> <?php print SITENAME.”";?></a>.
Then delete that whole line. Don’t worry, it won’t break anything. That’s just code to print your site name and make it a clickable link. Be sure to click the “Save” button at the bottom of the page to save your changes.
4. Now you can customize the template even more by changing the style sheet. To do this, click the styles.css link beside your selected template. This will open up the style sheet file for editing. Then you’ll want to open Notepad, select all of the text in the style sheet editor and paste it into the Notepad window. This will preserve the original style sheet in case you make a change that you’d like to reverse.
Changing Colors
Now look for lines that include the word “color.” The number value beside the “color: ” tag is a hexadecimal value that indicates the RGB (red-green-blue) value to be used for a particular part of the website.
You can use your graphics program to choose a color and get the RGB value. This is the easiest way to get the number to use for a particular color.
The number is actually the combination of three values - one for red, one for green, and one for blue. So, if you see a value like #000000, this is black. The first two 0’s are the red value, the next two are the green value, and the final two are the blue value. They’re all 0, which means red, green, and blue are all turned off.
But the numbers are hexadecimal (base 16), so they don’t range from 0-9 like you’re used to. They range from 0-16. And since we don’t have digits to represent value greater than 9, we use the first several letters of the alphabet instead. So, A = 10, B = 11, C = 12, … F = 16.
Since all 0’s is black, it makes sense that white would be the exact opposite - all values turned on. And since F = 16, the value for white is #FFFFFF.
If you want red, you can use #FF0000. Green is #00FF00. And blue is #0000FF.
You can vary the values of each to get different shades. And combinations of red, green, and blue will give you just about any color you can imagine.
Changing Borders and Fonts
You can also change the borders and fonts of any section of the site. Just find the corresponding tag in the style sheet and change it to the value of your choice. After making a change, click the “Save” button at the bottom of the page to save your change. Then click the “View Store” link at the top of the page to see your latest changes.
Advanced Changes
You can make many more advanced design changes by altering the style sheet. If you learn the rules of CSS, you can learn how to move parts of the design around to completely alter the site layout. The sky’s the limit when it comes to the ways to customize a BANS template. I’ve seen many unique designs that in no way resemble the original BANS templates. Making these types of changes will help your niche store website stand apart from the crowd.
BANS template, CSS, niche template, web template