Custom designing your SBI template

Do you want to customize your site's SBI Look and Feel template?

This is how you can do it:

Let's start with the beginning:

I. As you may know, an SBI template for blocks consist of 3 design elements:

1. The Top banner - generally called "logo"

2. The Left image, which gives the color of the left column underneath
the navigation buttons - generally called "leftimage"

3. The Back image, which gives the color of the site's background
- generally called "backimage"

* these images can be either .gif or .jpg files

II. When you choose a template (Look and Feel) for your site, you click on the button called
"Look and Feel Selector" from the Site Central, and go a page with different template styles.

Please keep in mind that whatever style you choose you will always have to follow 3
mandatory steps, in case you want to customize a style:

1. Upload Site elements

Here is the place where you upload the 3 design elements described above
(Top image, Left image, Background image)

2. Create/Customize Logo

Here is the place where you insert the name of your site and where you can choose
the font type you want to use, the type color and size.

- there are other options too like drop shadow, emboss, glow, etc. use those with caution, and only
if really needed, because you may clutter your top banner.

3. Create/Customize NavBar

Here is the place where you choose the shape, style and color of your buttons.

Let's go back to customizing your SBI Template:

* I made these explanations a longtime ago to help Alex from filmmakerstower.com with his post in the forums, but it can be used for any site.

1. Let’s say you decided to use the top banner you currently have. Right click your mouse and download it to your desktop.

It can look like this:

 2. Go to http://www.istockphoto.com (or other sites offering photos) and type on their search engine the keyword you are looking for (in this case I searched for "film makers").

– Find a photo that better represents your theme and buy it;

- lets say it would be this one (no: 2325626 from istockphoto.com):

3. Using a simple graphics/photo editor, open the banner you just downloaded to your computer and add the photo to it:

- Open both files into your editor. Select the photo and either copy and paste it on to the banner file, or just drag it to the banner file.

Resize it as needed. It can look like this:

Save the whole artwork on your desktop as logo.gif (or logo.jpg)

4. Using the same graphics editor make a small square and fill it with a color you pick up from your banner.

Let’s say like this:

Save it on your desktop as back.gif

5. Go to SBI site central - and click on Look & Feel selector. From there choose the "Food & Drink" style

6. Upload your customized elements:

6a. Click on "Customize Site Elements" and upload the logo.gif for the top image and the back.gif for the background image.

* Don't worry about the left image with this template.

- Follow the process by previewing what you did and if you are satisfied with the result, click on "Create/Customize Site Elements", and come back to this style for the next steps.

6b. Click on "Create/Customize Logo" and delete the everything you see on the small window next to "Enter Logo text". Preview you banner.

Finish this step by clicking "Create/Customize Logo". A window will open telling you that Your Site Elements have been customized.

Click on "go to Look and Feel Selector" and go back to the same style for the buttons.

6c. Click on "Create/Customize NavBar" and enter the colors of the buttons that will best match your design.

- on this example it will be: square, color white, text black.

- Preview your button and finish the process by clicking on "Create/Customize NavBar". A new window will open, telling that your NavBar has been customized. Click to " Go to Look & Feel selector" and go back to the same style.

6d. Choose left or center to align the entire site, preview - you should see this:

6e. Click on "Select this style" ...and - this is it.

NOTE: Go to your site and make the first heading black, or the color you want, because this template style has the heading red by default.

* Here is the code for changing the color of your heading:

<h2><font color="#000000">My Heading</font></h2>

Want to make the font smaller, here is the code:

<h2><font color="#000000" size="-1">My Heading</font></h2>


* I made a separate page with explanations on how to manage the font sizes on your web page, to help another SBI-er on the forums. Here is the link to it.

Want another example? - Here it is:

1. Take a graphic/photo editor of your choice, and create a file of 725 pixels wide by the height of your choice
(less or equal to 125 pixels). This one bellow is 100 pix. tall:

2. Fill it with the color that best match your design idea, let's say it will be green and we want to use the same green as in the banner before #002A3B.

3. Go to istockphoto.com or other site providing photos and choose an representative image, let's say it will be this:

4. Open it using the graphics/photo editor, flip it (as needed) and copy and paste it on the file where the green square is. Resize it a little to fit the banner(as needed).

It can look like this:

5. Put your text next. It can look like this:

* You will have to actually buy your photos and download the version without watermark.

6. Save the image as logo.gif

7. Repeat the process from the first example to create the back image and the color of the buttons.

7a. Let's say you choose the same color for the background that you used for the slogan of your banner: #ADA261.

it will look like this:

7b. And let's say you want your buttons light gray, beveled and the text black.

8. Repeat the process above to upload your design elements.

The final result will look like this:

* Change your heading from red to black or the color you want.

Do you want your left side color to go all the way down?
- You can choose the "Custom" style instead

TIPS: when using the style "Custom"

- your banner in this case should be no taller than 120 pixels.

- your background around the site will be the same as your background where your content will appear. * it is a good idea to make it white or a very light color.

1a. Let's say you chose the color white as a background, you will have to create a small white rectangle, similar to the ones in the examples above. It will not be visible here, since it's white...

Save it as back.gif

1b. And let's say you chose the same light gray: #CCCCCC for the left side image.

You will have to create another rectangle: 130 pixels wide, like this:

Save it as left.gif

2. Repeat the uploading process using all the time the style "Custom"

When you click on "Create/Customize NavBar" you can choose for the shape of the buttons: square, color #CCCCCC, type black.

Your final result will look like this:

This is it :)

Do you want a taller top banner?
- You can choose the style called "Learning&Education"

Learning & Education SBI general template is one of my favorite and I often use it for SBI-ers who want a custom L&F for blocks. You can see some examples here.

- The best is that it has the taller top banner (725x145pix.), and you can make the background of the navigation go all the way down.

- The little piece of CSS added to the pages to color the background outside the template, works very well, like in Melissa's case for example: www.how-to-boost-your-immune-system.com

However, if you don't want to go into the trouble of adding that piece of CSS to all the pages, the Food&Drink template allows you to have a colored background while keeping the content area white.

* The fact that the top banner of this template is only 125 pixels wide and the background of the left column (under the navigation) does not go all the way down, shouldn't be a big stop on your creation.

Fion for example followed my explanations above and used this template to customize her L&F by herself: www.great-inspirational-quotes.com

I think she did a great job :)

I wish you success!