Go back to previous page
Forum URL: http://www.dombom.com/cgi-bin/dcforum/dcboard.cgi
Forum Name: The New MadBomber Marketing and SEO Forum
Topic ID: 545
Message ID: 0
#0, 3 Intro to FatBomb Skins
Posted by Kurt on Oct-12-07 at 03:39 AM
LAST EDITED ON Oct-20-07 AT 04:12 AM (PST)
 
Unless you REALLY REALLY know what you're doing AND you have already driven plenty of traffic to your Fatbomb, I suggest you use one of the templates provided.

IMO, the BIGGEST mistake you can make is to spend an entire day making a site with ZERO TRAFFIC "pretty".

Get some traffic, then worry about whether it is "pretty" or not...

If you are an extreme noob concerning html and css, you better skip skins with images at this point.

Let's Get Started:

Upload the folder "styles" to the root/main folder of your website, making sure that the sub-folder "images" is inside.

Each example below is a basic layout, with each layout being able to be further modified using its associated CSS file.

Skin1 uses style1.css
Skin2 uses style2.css
Skin3 uses style3.css

etc.

You can use these CSS "style sheets" to completely change the color scheme of your site(s).

You don't have to know everything in the CSS file, as there's only about 12-15 things in each you need to worry about, which will descibe below.

I'm "color coordinating challenged", so I like to use this website to help me pick color schemes I can use with my CSS files:
http://wellstyled.com/tools/colorscheme2/index-en.html

Play around with this site and generate a color scheme you like, and well show you were to modify the CSS style sheets.

It is also suggested you download www.TextPad.com and use it, as it has a line number feature:
GoTo=> VIEW => Line Numbers

Using a text editor that let's you view line numbers will make it easier to get/give help customizing your templates.




Choose a Skin/Layout:

Skin1.html: (no images) two columsn w/Right menu
http://dombom.com/cgi-bin/fbs/fatbomb/fatbomb.cgi/?skin=skin1&length=20&keywords=test

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Skin2: 1 graphic two columns w/Right menu
http://dombom.com/cgi-bin/fbs/fatbomb/fatbomb.cgi/?skin=skin2&length=20&keywords=test

Skin2 uses the "panhead" graphics for the top border/background. You can choose from any of them, or create your own, then make sure you adjust the "panhead" number in style2.css for a variety of colors.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Skin3 No images two columns w/Right menu
http://dombom.com/cgi-bin/fbs/fatbomb/fatbomb.cgi/?skin=skin3&length=20&keywords=test

Skin3 is a simple/clean skin and is a good one for noobs to start out with. You can mess with all the colors for a variety of looks.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Skin4 - Two columns, right menu no images.
http://dombom.com/cgi-bin/fbs/fatbomb/fatbomb.cgi/?skin=skin4&length=20&keywords=test

This skin uses css "roll-overs" for links in the menu. Noobs should leave this skin for more experienced Bombers, unless you are satisfied with it "as is".

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Skin5- Two columns, right menu use "roll-over" images.
http://dombom.com/cgi-bin/fbs/fatbomb/fatbomb.cgi/?skin=skin5&length=20&keywords=test

"roll-over" images
side-img.gif
linkimg1.gif
linkimg2.gif

Messing with the colors and roll-over graphics isn't for noobs...Unless you want to use it "as is"/straight out of the box.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Skins 6-10 Only Available with Fatty 2.0!


Skin6 - A three column skin, with graphic at top.
http://dombom.com/cgi-bin/fbs/fatbomb/fatbomb.cgi/?skin=skin6&length=20&keywords=test

Notes: Skin6 uses two graphics:
columns6b.jpg
header_background6d.gif

The easiest way to modify these two images is to open them up in your graphics program and just delete the image and make/paste a new one over it, maintaining the same size.

Once you have new graphics, you can open style6.css and adjust the color scheme to match your new graphics.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Skin7 no graphics - two columns - left menu
http://dombom.com/cgi-bin/fbs/fatbomb/fatbomb.cgi/?skin=skin7&length=20&keywords=test

This is a pretty simple and flexible template and a good one for noobs to practice with.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Skin8 - No graphics - Two columns - Left Menu - CSS - roll-overs.
http://dombom.com/cgi-bin/fbs/fatbomb/fatbomb.cgi/?skin=skin8&length=20&keywords=test

This is a colorful skin with roll-overs. Moderate skill level is needed, although noobs can change some of the basic colors/links, or use it straight out of the box.

The narrow left menu make make it tough to add advertising, so you may want to add any ads to the main/right column to preserve formatting.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Skin9 - No graphics - Right menu - Two column
http://dombom.com/cgi-bin/fbs/fatbomb/fatbomb.cgi/?skin=skin9&length=20&keywords=test

This is VERY noobie friendly...Just change the color of the header in style9.css, as well as the color of the links.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Skin10 - No graphics - Right menu - Two column
http://dombom.com/cgi-bin/fbs/fatbomb/fatbomb.cgi/?skin=skin10&length=20&keywords=test

A clean and simple skin, that's very noobie friendly. Just change the color of the links and you're all set.




Customizing Your Skin:

After you've decided on a skin, open it on your hard drive in TextPad and:

1. Find: <title> % form.keywords as html %] by MySite</title>

Change/edit/delete "by MYSite" to something appropriate. Note that the code will enter the keywords searched for each SERP.

2. Look for this block of code in the header of you page:

<style type="text/css" media="screen">
@import url( http://dombom.com/style/style1.css );
</style>

Change the url to point to your domain, as well as the corresponding CSS file. If you're using Skin4.html, then make sure this URL points to style4.css.

3. Look for the "Menu" tag:

<div id="menu">

Add whatever you want after the menu tag...Whatever you put here will show up either in the left or right mene. Note: some layouts have BOTH left and right menus, the idea is the same.

4. Check for misc. instances of "MySite" and modify/delete them, as you wish.

5. Upload the modified version to your /fatbomb/skins folder.

Note: Optional...If you're a noobie, you may want to rename it:
default.html

This will make things easier concerning some other config concerns.