This document shows you how to create a 3-column, CSS-driven Look & Feel like this...
This CSS Action Guide "Lite" is for those who are already familiar with CSS, but want a handy document they can refer to when needed.
If you are not familiar with CSS, but are ambitious and want to learn about it, this pared-down version is not for you. Instead, click here for the full version of the guide, which will help you learn all about CSS). If you are a CSS pro, you likely don't need either version of the guide.
This guide assumes that you are already uploading your own HTML, which means that...
In addition to this CSS Action Guide Lite (css-action-guide-lite.html) and style.css, you will find the following files/folders in this package...
Important Note
If you have selected one of the 285+ SBI! templates for your site's Look and Feel, the HTML file that comes with your download package is called masterTemplate.html. Use that file to build your site. And use the style.css file included in that package to customize the design (if desired).
The location of template.html and style.css, as well as the above folders, are all part of the typical "local setup" for uploading your own HTML into SBI! (see this SBI! help for a refresher).
Here is an image "map" of the basic structure of the HTML template (template.html), and how it relates to style.css...
Reminder
In the SBI! template you selected, or will select, to use for your site, the HTML file is called masterTemplate.html.
And here is a close-up of how the "liners" form an edging around the header, columns and footer (footer not shown) to keep text and other contents away from the edges of each major box that makes up your page...
Together, these help you to understand how the major sections (listed in the style.css file) all fit together to form your page. You'll find easy-to-understand style and class names in the style.css and template.html files. This is called "semantic" naming—"semantic" merely means choosing terms that reflect what the style represents (i.e., its purpose). There is a more detailed discussion on semantic naming below.
Ready? Let's go! Open the style.css file located in the support-files folder. We'll review it here. As we reach each section, experiment by making a change in style.css and then seeing how template.html is affected, by viewing it in your browser.
The style.css sheet is broken down (in comments) into the following 7 sections...
Set the body background color. The background-color
is the color of the part of the browser window that your page will not occupy (i.e., the color around the outer margins of your Web page). Here it is set to #f0f5fb
...
body {
background-color: #f0f5fb;
}
Click here for an excellent chart of named colors, along with their "hex" codes.
Do not change the margin
and padding
(both set to 0) in the body
selector of Section 1.
You also set the font family, font size and font color here for your entire site. Let's start with...
The font-family
property has been pre-set to a sans-serif family...
'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;
The "sans serif" family is a good choice for Web reading. "Lucida" is especially readable. Of the two most common versions, "Lucida Sans Unicode" is available in 94% of Windows systems (and not Mac), "Lucida Grande" in 90% of Mac systems (and not Windows).
So we include Verdana and Arial as safe backups (they are cross-platform). And we place the generic sans-serif
at the end, in the extremely rare case that a system has none of these fonts.
Tip: A good "font strategy" is to lead with a font that you like the most for your site. In general, try to choose from fonts that are on at least 80% of Windows and 80% of Macs, preferably 90%. You may have to specify two versions of the same font if one version is only available on either Windows or Mac (ex., Lucida).
A serif font is "fancier" due to small decorative strokes ("serifs") that cross the ends of the main strokes. Here is a serif font family...
'Times New Roman', Georgia, 'Palatino Linotype', Palatino, serif;
The above family uses a similar selection strategy, first choice at the beginning (not the most common font, but still common—say 80% of greater).
If you choose a font in Windows that is not listed in Mac (or is listed very low), choose a variation of it in Mac that is used in most Macs (ex., the two Palatino fonts in the serif family above). And vice-versa.
A cursive font emulates handwritten letter forms. A cursive family is...
'Monotype Corsiva', 'Apple Chancery', cursive;
Monotype Corsiva (Windows) and Apple Chancery (Mac) are good lead-off choices, similar to each other. List both in a cursive font family since the Monotype Corsiva is on more than 80% of Windows machines, but very few Macs. And vice-versa for Apple Chancery.
There are not that many common cursive fonts. 'Comic Sans MS' is found on more than 90% of Windows and Mac systems, but gives a different, less "flowery," effect. Change 'Monotype Corsiva', 'Apple Chancery'
to 'Comic Sans MS'
to see the difference.
A monospace font emulates typed letters. A monospace font family is...
'Courier New', Courier, monospace;
Your choices of common fonts are also limited here. Choose according to desired effect.
More on font families? Click here.
Next, set the color and size of the font for your site in this section.
Color Tip: A dark font on a light background is the most readable option, by far. So set a dark font color here. Black (#000) or dark gray (#333) is a good choice. Choose black if you are using an off-white background color such as the light purple you see in template.html).
Size Tip: There are 4 ways to set font size. But we will focus only on one... percentage. Any browser's default setting will render body text at 16 pixels in size if style.css (or an HTML tag) does not specify a font size here. That's too large for most audiences. Here's how to adjust the base font size in style.css...
Go to Line 11 of style.css. You'll see font-size: 85%;
, which is 13.6 pixels, which rounds to 14 pixels, a very comfortable reading size for most people. Some designers prefer a smaller font (looks more "sophisticated"), and 80%, which rounds to 13 pixels, is indeed a good choice if most of your readership is younger (i.e., with good eyesight).
All other font sizes that you set are based upon this base font size.
Note: There is one big advantage to using percentages to set font size. Any of your visitors can reset the font size easily with their browsers, even users of Internet Explorer 6 ("IE6"—still a substantial percentage of Web surfers). Mac users and PC users don't see fonts at the same size, in any event. So using percentage is a good idea—you stay flexible and put power into the hands of your visitor.
<h>
tags (<h1>
to <h6>
)
Modifications you make here apply to all <h>
tags on your entire site, except the specialized ones, such as your .Navigation h3
selector in Section 4.
Change the color to match your site's color set. You can also add or modify background color, font family, borders, text alignment, and so forth (any property that applies to text).
Start by defining what is common to all headlines. Then set whatever is special about an individual headline type, such as your <h1>
.
And note how special <h4>
's have been styled in this section for the left and right columns. Here's the CSS styling for the left one...
#NavColumn h4 {
font-size: 90%;
color: white;
margin-top: 0;
}
<blockquote>
You can see how the blockquote is styled by looking at Line 41 of your style.css.
The monospace font family gives this a "typewriter look." Changing it to a serif family delivers a "newspaper feel."
<code>
Unless you have a website that deals with HTML, web design, and other assorted "techy" subjects, you may never need to use this. <code> is an HTML tag that gives your text a monotype font. However, to make it stand out a little more, we have changed the color of this to navy. If your site concept is unlikely to need this tag, delete this from the stylesheet.
Line 53 of your style.css file defines the border around the images on your site.
img {
border: 0 solid #ddd;
}
a:link img {
border: 0;
}
Want to go a step beyond with image borders? Read this article.
We chose not to define line-height in this section. It leads to needless complexity. Let the browser do the work with its default setting of 110%-125% of the font size (it varies from font to font). That is why you will not see a line-height specification in Section 1. (Your selected SBI! template may, however, have line-height set here. If so, change it to suit your preference, or remove the line from style.css.)
You will set line-heights in styles used later on (ex., in stylings for boxes, blockquotes and captions). It delivers a dramatic effect and differentiates those pieces of text from the main body copy of your page.
"General link styling" (see the a:link, a:visited, a:hover
selectors) sets the classic blue, purple and red (all of them underlined) stylings for text links that are unvisited, visited, and hovered-over-by-mouse (respectively). Although many sites deviate from this color scheme for links nowadays, especially to make the links' colors more consistent with a site's overall color scheme, a site is generally most usable when links follow this traditional format.
We'll talk a bit later about the tension between elegant design and usability/monetization. But link-coloring is a good example. Blue-purple-red is a classic link-coloring scheme that visitors are used to. But they may not "look good" with your particular overall color scheme. That said, there is little point in styling links in such a way that they can barely be distinguished from your non-link text, just to make your page look cleaner.
There are only a few values that you should need to modify in this section of style.css. The "Global Page Structure" is the master header/3-column/footer layout of your Web page and should remain as is. The exceptions to this are the height of your header, and the borders of your #PageWrapper
and #Footer
. Change these to suit yourself... instructions for that are below.
This section sets up the basic skeleton of the page. You will be able to modify everything in Section 3 (ex., background colors, font sizes, etc.).
#PageWrapper
border
This sets the width ("2px" currently in style.css), type ("solid") and color ("#8f8fb3" - chosen from any color-matching site) of the border that defines the outer margins of the template. Widen it and change the style and color, according to the desired effect. Or reduce it to a single black keyline by reducing it to 1 pixel and using black color (#000), or eliminate it by setting width to 0.
Modify the width of the page where you see width: 960px;
under #PageWrapper
. The default page width set here, 960 pixels, is within a narrow optimal range of acceptable choices. Two columns of 180 pixels, one on either side, are optimal (for their customary purposes). The center column holds your content—600 pixels is a comfortable reading width.
#Header
Change the height of #Header
to match the height of your header image-logo. You will read more about this image in the next section, so no need to change this for now.
#ContentColumn
, #NavColumn
and #ExtraColumn
You may change any of the column widths later in this section, but keep the following in mind...
width
to more than 980 (which allows for the extra padding and margins of the browser window itself). And don't set your width
below 860. That would leave less than 500 pixels for your center column. It becomes awkward to flow text around images. Headlines break in undesirable ways. Things start to become a tad crowded.#ContentColumn, #NavColumn, #ExtraColumn
.Bottom line? You can adjust your page width. The advisable range is 860-980. Set left and right column widths according to how you plan to use them (180px meets most needs). That leaves a reading range of 500-620 pixels for the main center column.
#Footer
Like the center column (#ContentColumn
), you can set the background color/image and set borders, horizontal only this time, with this line of code...
border-top: 1px solid #f0f5fb;
#Liner
Do not adjust the values in the #Liner
selectors (there's one for the page's header area, one around the columns, and one for the footer).
Want a flexible width template? One that changes width according to the browser window width? It's possible (simply replace the width
parameter with min-width
and max-width
. Your code would now look like this...
#PageWrapper {
max-width: 960px;
min-width: 910px;
}
But we do not recommend it. Why not?
max-width
and min-width
). IE6 stretches the template to the full width of the viewer's window. The left and right columns remain as is, while the center column widens to occupy the space. This beyond-the-limits flexing introduces design problems that require complex workarounds.Note: Some people do prefer a flexible ("fluid") template. Ask yourself if your typical visitor is really going to get some extra benefit/value, and in return reward you for this. If you do think they will reward you, please start a forum thread on a fluid design's benefits and the workarounds needed.
Best advice for this section... Don't touch anything in Section 2 except the height of #Header
(set it to the same height as the the header image-logo that goes here—see the next section).
You may also change the width of the page, but you will have to adjust the background.gif image to "fit" the new width. This image "tiles" the 3 columns and is discussed in Section 3.
Do you want to turn your 3-column L&F into a 2-column one that's 960 pixels wide? Here's what to do...
In style.css, go to...
/* ------ Section 2 - Global Page Structure ------- */
Go to #ContentColumn
, where you will see this...
margin: 0 180px 0 180px;
Change that code to...
margin: 0 0 0 180px;
Next, go to #ExtraColumn
and add this line...
display: none;
It should look like this...
#ExtraColumn {
display:none;
float: left;
width: 179px;
margin-left: -180px;
}
Not all of the 121 templates have a Content Column that can be widened easily. Some have the Extra Column in the middle, so you'll have to change the last number in the margin
, instead of the second number. Others have the width of the Content Column set by graphics. So you'll have to make changes to the background images, and possibly to the header and footer images, depending on the template you selected.
If you want to make a template narrower, down to 780 pixels (don't go any narrower than that), see this TNT article for details on what you'll need to do...
http://sbitips.sitesell.com/3col-to-2col.html
This could be an option for some people. Suppose you want to have 3 columns for the majority of your site. But on some pages, 2 columns is a better choice. A page holding a video is a good example. A third column may not be necessary.
So how exactly can you "mix and match" both 2- and 3-column pages? After all, you are using only one stylesheet, and the stylesheet is where you either hide or display that third column, and make the adjustments with your margins.
One solution is to use two stylesheets, one for your 3-column pages, and the other for your 2-column ones. So you might have style.css and style2.css for example.
If you choose to do this, put the stylesheet reference tag (in the <head> section of the template) into an SBI! Include (there's already an Include in the template, for that purpose, but you may want to add a new one for these 2-column pages). That way, if you decide at a later point to go back to entirely 3-column pages, the 2-column stylesheet tag can be easily replaced with the 3-column tag in the Include.
Here you set your background colors or background images for your header, columns and footer. See the Layout Map image above to refresh your memory about these areas.
Note: You set your site's general font color in Section 1. In Sections 4, 5 and 6, you will set specific styles for the other content that will appear inside each part of your site (i.e., left column text, headlines, navigation, etc.). So do not add any of those specific properties here.
Tip: For a professional color-coordinated set of background colors, font colors (ex., headlines), borders, and so forth, use a color-matching system. Here are three good sites for this...
Professional Tip: Pick an existing color from the main photo (your header image-logo most likely) on your site. Pick the color that is the most prominent and that appeals to you. It should work well with your header image-logo and Site Concept.
Pro designers match everything to the prominent color from their main image. This can be done by eye or by getting the hex code of that color and using that to generate a family of related colors.
Use one of the above color matching applications to generate a family of related colors from the hex code. Color Picker gives you an excellent, gradient range of family colors. Color Match gives you a number of coordinating colors. And Color Schemer gives you some contrasting colors that "go" with your prominent color.
The two key rules...
#PageWrapper
This wraps around, positions and contains your entire web page. Here is the breakdown of the properties (note that you change the border in Section 2)...
margin
Set where a page sits in the browser window. It is currently set to "24px auto"...
The "24px" means that the Web page is positioned 24px from the top and bottom of the browser window. The "auto" means that it automatically centers left-right in the page (background color on both sides).
background-image: url(../image-files/background.gif);
background-repeat: repeat-y;
The image, background.gif, is a thin horizontal strip composed of the same 3 columns and colors that you see when you view template.html in your browser...
#Header
The #Header
is the container where your header image-logo goes. It "spans" across the three columns of your web page. There is no margin
property because it would upset the layout (so do not add one).
Simply create an image-logo as wide as the 3 columns of your page (960 pixels is recommended). Enter the file name of your header image-logo file into the #Header
, like this (the red part)...
background-image: url(../image-files/header-image.jpg);
Reminder: Enter the height of your header image-logo in the #Header
part of Section 2, as mentioned above, and not in Section 3.
If you don't have the graphics tools to create an image-logo, hire an SBI! coach to create a gorgeous header image-logo for you (or even to fine-tune your entire CSS L&F for you, for that matter), or....
First, create a background header image...
i) Go to istockphoto.com (or your personal bank of digital photos) and find an image that fits your Site Concept. Make sure the image is at least the width you want your page to be. And then...
ii) Go to picnik.com and reduce and/or crop it to the desired width. So far, so good.
Note: See the full TNT HQ article with "how-to" screenshots.
iii) Crop the height, not too narrow, not too broad... just right.
iv) Use the text tool to pick a font and size. Enter your domain or site name. And then position it.
v) Save it and label the file with your Site Concept keyword in the file name (ex., anguilla-header-image.jpg). Then download the file.
Place this new header image file into the "image-files" folder.
Enter that file name into #Header
, like you see in this part of Section 3 of style.css...
background-image: url(../image-files/anguilla-header-image.jpg);
Note: The file name will be "your-site-concept-keyword-header-image.jpg" instead of "header-image.jpg." And...
#ContentWrapper
The #ContentWrapper
is the container for all three columns of content... everything from below your header to above your footer. The only property you set here is a background image or a background color. Please note...
The code here only fills in that color (or image) if you do not specify background colors for the individual 3 columns (4, 5 and 6, coming next). If you do, each column color specified there will override what you set here until the column content "ends" (remember, the lower/nittier-grittier that you go, the higher the priority in the cascade).
In this simple version, you see the following two lines of code specified for the #ContentWrapper
container...
background-image: url(../image-files/background.gif);
background-repeat: repeat-y;
This code is identical to the 2 lines in #PageWrapper
just above. It's not absolutely necessary here. CSS purists consider this duplication to be "clunky," so feel free to remove it.
If you delete it, your visitor will see the "browser background color" for a second or three before the 3 columns appear. If you keep it, your visitor immediately sees the 3 columns, a smoother effect.
If you leave this style in, remember that when you make a change to this image reference, make it in both places.
#NavColumn
This is the container for the left column of your web page. Like the #ContentWrapper
, you can set a background color or image. The image has been set to "../image-files/nav-background.jpg" with vertical repeat ("repeat-y").
Want to see a different look for the left column? Change it to the following...
#NavColumn {
background-image: url(../image-files/nav-background-fading.jpg);
background-repeat: no-repeat;
background-color: transparent;
}
Finally, see what happens when you set the background-color
to, say, green, "blanking out" the background image and repeat...
#NavColumn {
background-image: url();
background-repeat: ;
background-color: green;
}
What do you "put" in the left column? It should normally contain...
#ContentColumn
This is the container for the large center column of your Web page that contains your content. Like #NavColumn
, in style.css you can set a background color or image.
Reminder: Since your content goes here, it's good readability practice to set this column with a light background color. A dark-colored font on a light-colored background is easiest to read. And avoid these two mistakes...
Click here for an excellent chart of named colors, along with their "hex" codes. Click on any color to see how it looks with a wide variety of font colors.
#ExtraColumn
This is the right column. Like #NavColumn
and #ContentColumn
, you can set a background color or image. This column of your HTML template will normally contain...
Important Note on Design vs. Usability and Monetization: There is a constant "tension" between elegant design and usability/monetization. Good design is subtle, clean and simple. Nothing "glares" at you.
And that is certainly something to strive for. However, now that we are discussing the right column, it's time for a couple of warnings...
i) AdSense Ads In an ideal design world, you'd tuck those ads into your right column and leave your content clean and "uninterrupted." However, that would also cut your income substantially. The SBI! Monetization HQ shows you how to place AdSense to get noticed. "Getting noticed" is often at odds with "clean and elegant."
ii) Clutter You must be careful not to jam too much into that right column (too much navigational help, too many ads, etc.).
Good design vs. usability/monetization? It's not "one or the other." However, there is definitely some give and take. You often have to sacrifice a bit of one to let the other do better. In general, err on the side of usability and making money.
Seek balance.
#Footer
The #Footer
is the container for the entire width of the bottom of your Web page. Like the Header, it spans all 3 columns.
What belongs in the footer container? Here are some ideas...
.ExtraNav
), consisting of links to About Me, Contact Page, Privacy statement, even your blog and e-zine subscription page (note the Site Concept keyword in "Anguilla Blog" and "Anguilla e-Zine" since these are text links).#NavColumn, #ExtraColumn, #Footer
Each is set to have a font size that is a percentage of the main font size (85%, or 14px) that we specified in Section 1. You can change the percentage to your liking, add a color property, line-height, etc.
For a complete list of all possible text settings, click here.
"Left Column Navigation" is a container (.Navigation
) with a specially styled h3
and a styled list of links. This is all contained in the left column (
, styled earlier in style.css).
#NavColumn
.Navigation
This is the container. It sets the overall width of your text navigation. Normally, you don't touch this.
.Navigation h3
This is a special h3
tag that enables you to create Navigation Headers. Why would you use these?...
To separate your navigation text links into categories, each category consisting of a Nav Header and a new list of links (a new <ul>
grouping) that relate to that category.
The result? Instead of one long list of links, your navigation is organized logically into groups of links.
.Navigation ul
Text links in your Left Column Navigation are presented as one or more HTML lists (<ul>
groupings), which go to your important TIER 2 pages.
The list-style-type is set to...
list-style-type: none;
The padding (0 0 8px 5px;
) indents the group of text links to the right (padding-left) by 5 pixels, and sets an extra 8 pixels at the bottom of each group (<ul>) of links.
The values for margin
(-6px 0 0 0;
) pull the entire grouping up 6 pixels. Fine-tune these values to your liking.
Note: Always maintain the 3-TIER hierarchy. The left hand nav enables your visitor to navigate back to home or to a TIER 2 page from any TIER 2 or TIER 3 page. Your visitor navigates from TIER 2 to TIER 3 from one or more of the following...
.Navigation li
This is where you style the individual nav list items. It is currently set to have a light tan background (background-color: #ffc;
) and a 1px solid darker-purple border (border: 1px solid #8f8fb3;
).
The margin-bottom
property is used to create vertical space between the list items (i.e., between each text link). It is currently set to 3px to provide a bit of space between each text button (preventing mis-clicking).
Try setting it to -1px (minus 1) so that the borders meet perfectly. Or set it to 0, for a double-line thickness between each button.
Your left hand navigation is an important part of usability. Design the best-looking L&F possible, but don't sacrifice usability.
.Navigation a
This is where you style the individual navigation text links. Let's break down these properties...
color: blue;
display: block;
padding: 3px 0 3px 4px;
text-decoration: none;
margin-bottom
in .Navigation li
, enables you to set how much the NavBar "breathes.".Navigation a:visited
This one is simple enough...
color: purple;
display: block;
padding: 3px 0 3px 4px;
text-decoration: none;
The classic purple of a "used link" tells the visitor that s/he has visited that Web page already. "No underline" is maintained, as is the padding.
.Navigation a:hover
color: red;
display: block;
padding: 3px 0 3px 4px;
background-color: #d3e4fb;
text-decoration: underline;
The "hovering values" here change the block's text-link color to red, the background color to the same light purple of the center column, and the link to underline while hovering.
Choose some or all of these visual "you-are-about-to-click-this-link" hints. The key point is to leave enough signs of hovering so that your visitors know which link they are hovering over.
This class (.ThumbnailLink
) is useful for providing navigation with captioned thumbnail images in the right-hand column. Use it to lead visitors to key pages from your Home page, and to lead them to TIER 3 pages from TIER 2s.
This styling uses the .Caption
class to caption images. View the source of the template and review this part of style.css to see how to compose a vertical navigation scheme in the right column. Note how the text links "light up red" when hovering over the image.
This NavBar has been set up as a "horizontal list" through an "inline" display property...
.ExtraNav ul li {
display: inline;
Keep the styling similar to the Left Column Navigation "text buttons" for the sake of consistency, which increases usability.
What type of link belongs here? Anything that is not "theme content" (i.e., it is not directly related to your Site Concept). For example, use it for links such as About Me, Contact Page, and Privacy Statement. Folks will find these when they become interested enough to know more about you, want to contact you, and/or want to know your privacy policy.
Placing the link to your Blog It! blog and your e-zine subscription page may also be a good idea for your horizontal NavBar. Since you are now dealing with a text link, include your Site Concept keyword where it makes sense to do so (ex., "Anguilla Blog" and "Anguilla e-Zine").
To summarize... Reserve your left-hand vertical NavBar for TIER 2 pages with subject matter directly related to your site theme. Your bottom-of-page horizontal navigation is best saved for pages that are not directly site-concept-related.
The template.html file comes complete with a top nav, placed flush with the top right corner of your header. (The masterTemplate.html file in your SBI! template has this top nav, but it may be in a different location.) You can position the top nav wherever you like. Top, bottom, left or right.
Consider trying this if you want to be more aggressive about visitors contacting you or clicking on whatever "buttons" you decide to include here.
The potential downside? Ideally, you would prefer to start your site with your body copy that contains each page's Specific Keyword, not with links in a NavBar. Engines are getting smarter at recognizing these for what they are and not confusing them with your content. So if it's important, try it. Be sure to include your Site Concept keyword in one or two of the NavBar links.
Take a look at the top navigation. It's positioned top right of the header. Want to put the nav in a different position? Simple. Just open your style.css and look for the #Header .ExtraNav
#Header .ExtraNav {
font-size: 85%;
position: absolute;
top: 0;
right: 0;
}
You can place the nav in any of the four corners, or in the middle just below your image-logo.
If you want a 5 pixel gap between the navigation links and the edges of the header, it's very simple to do: just change top: 0;
to top: 5px;
to move the nav down 5px.
There is ONE class to cover both top and bottom navigation. If you decide to use both, they both will have the same styling. So... what happens when you want a different look to your top and bottom navigation links?
#Header
and #Footer
IDs
Look in Section 5 of your style.css, and find the header and footer IDs.
#Header .ExtraNav
and #Footer .ExtraNav
Each of these has its own properties and values. This means you can have separate rules for the top and bottom .ExtraNav
classes.
Callout Box
The .CalloutBox
class, when applied to a <p>
tag, creates a centered white box that is 85% of the width of the column it's in, with a dotted border. It is an effective way to "call out" important paragraphs of copy on your page.
Note the positioning...
margin: 18px auto 24px auto;
Note the padding...
padding: 4px;
You will see seven other boxes in this section of style.css... .ReminderBox
,.AdSenseBoxLeft
, .AdSenseBoxRight
and .AdSenseBoxCenter468
,.AdSenseBoxExtraColumn
, .ReturnToNavBox
, and finally, #RSSbox
. These boxes each have their own special purpose.
.ReminderBox
Examine the CSS for this box carefully in style.css. Then study how it is used in the template, where there is more discussion about .ReminderBox
.
.AdSenseBoxLeft
, .AdSenseBoxRight
, .AdSenseBoxCenter468
, and .AdSenseBoxExtraColumn
Use these to place AdSense ads. Examine the CSS for these boxes carefully in style.css and how they are used in the template...
All four are first styled together, according to the properties that they share. You can set padding and border as you desire. Next, you'll notice...
The .AdSenseBoxRight
class is identical to the .AdSenseBoxLeft
, except for the float and the left and right margins. Their margins inset slightly to "intrude" a touch more upon the flow of the eye.
The .AdSenseBoxCenter468
class has a difference that is important... Its width must be defined. Unlike the "left" and "right" AdSense boxes, the centered box will not "collapse" horizontally to the width of the ad. So you have to create one for each size ad that you want to center.
The .AdSenseBoxExtraColumn
is the simplest, designed to place a skyscraper ad in the right column.
Tip: Be familiar with these AdSense-maximizing strategies.
Tip: Place the .AdSenseBoxLeft
class in a <div>
tag, not a <p>
tag. You could put it into a <p>
tag, but don't. Why? Because we don't know what Google may put in here later that might break a <p>
-coded box.
Tip: Generally, do not place AdSense code into an SBI! Include. You won't be able to use custom channels to track which ads are doing well. Google provides channels so you can track each individual ad. So putting the code for one ad into an SBI! Include would result in the same channel site-wide, which is useless for tracking. (You could create an AdSense custom channel and an Include for each TIER 2/ TIER 3 mini-site, so you would at least be able to track each group's statistics.)
.ReturnToNavBox
This box has an important function, providing an obvious and consistent box at the bottom of each page to link TIER 2s back to the home page, TIER 3s back to their relevant TIER 2(s), and linking to other pages that are highly relevant to the page that was just read by your visitor.
This helps pull "sub-niches" or "related pages" into a mini-site within your main site and provides valuable navigation help, in the eyes of both the engines and your visitors.
#RSSbox
Get the HTML for your RSS box from RSS/Blog It!. Copy-and-paste your own HTML for your RSS box into the correct spot in this container, replacing the "placeholder anguilla-beaches.com code" that is there now.
Adjust the CSS values of this box to color and position appropriately. You can also customize the HTML from RSS/Blog It! to fit the left column or wherever you choose to place the RSS box (it does not have to be in the left column).
Of course, you could also use the ***RSSIT*** tag, which uses the RSS box that you built in Blog It!. If you like it "as is," you could even remove the "RSSbox" id from the <div> tag.
.formbody
Styling Your FBI! Forms
Would you like to customize your FBI! forms? Maybe add some background color? Every FBI! form that you create has a simple class attached to it: .formbody
.
Take a look at the source code of any page that contains a form. You will see that some CSS has been added to the auto-generated code.
<STYLE type="text/css">
.formbody {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;}
</STYLE>
Remove this styling from your form code in the HTML file. Then create a new class in your style.css, called .formbody
. Now style this how you wish. An example is shown below...
You can add this new class anywhere in the style sheet, as position won't affect how it works. However, if you keep everything neat and tidy, it makes life much easier when you make changes at a later date. Keeping that in mind, .formbody
is probably best placed into Section 6, which deals with styling boxes.
.formbody {
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;
font-size: 90%;
color: #ccc;
background-color: #fff;
}
.formbody
Class
The HTML that is generated when creating a form includes a lot of inline styling. To get full control over how your form looks, remove this inline styling, and use your newly created
.formbody
class in style.css.Over time, the HTML snippets will be revised and overhauled. This means that in the future, you won't have to worry about inline styling being placed on your page. However, in the meantime, you need to remove this manually.
Two important points about naming new classes...
1) Name your styles so that they are easy to remember, easy to code.
Duplicate, modify and rename any style in this style sheet. If you see a style you particularly like in another site, you can do the same. Find the style in that site's style sheet, copy-and-paste it in the appropriate section of style.css, and then modify/rename it.
When you re-name it, name the style to best describe the purpose. Keep the name short and easy to remember. When you use it, it will be easy to remember and type.
You may be tempted to name it according to how it looks (ex., .BoldBlueBorderCenter). But even after your 18th use of this style, you will find yourself constantly referring to your style sheet when writing your content.
2) Semantic naming also forces you to think about why you are using this style.
Put yourself in your visitor's shoes. Name the style according to its purpose. When you do that, .ReminderBox
, for example, becomes a site-wide, reusable object that...
Get into this habit to achieve professional symmetry between design and content.
The styles in this section are for frequently used HTML elements. They provide functions that are best used as "style sheet classes" and not inline styles.
If you find you are going to use more than one version of a style, duplicate it, adjust the properties and re-name it (semantically).
The .Clear
styling clears text or images of preceding text or images..
.Caption
Use .Caption
for placing captions below (or above) your images. View the source of the template file to see how it is placed in your page.
Note: Don't miss the font-weight option here (in the CSS file).
You'll see 3 float classes in style.css... .ItemLeft
, .ItemCenter
and .ItemRight
.
Use these 3 classes to float your images left or right of adjacent text or to center them. Each centers text or a caption under the image (if you choose to include a caption).
Note: The .ItemCenter
class has no float property since there is no such thing as a float: center
property. Instead, the text-align: center
property centers both the image and the text.
Apply this style to a <p>
tag, a <span>
, or a <div>
, and then place your image inside of it.
View examples of this in the source of the template, where all three are well-demonstrated.
We did not style lists in template.html (except for the navigation lists and the footer list). Applying styling is a little more tricky that it first appears. Gecko-based browsers, such as Netscape and Firefox, use margin-left to set the indenting of a list. Internet Explorer, on the other hand, uses padding to achieve the same thing.
What this means is that all browsers will display lists in a similar fashion, until you start to change the left margin and/or padding. Even with a reasonable knowledge of CSS, you may find it difficult to understand how this works. Sometimes, it's just better to let the browser choose how to display something, rather than creating complicated CSS.
However, just because we have chosen not to style the lists doesn't mean you can't! For example, do you want to have more space between list items? Some very simple CSS will achieve this effect...
li{
margin-bottom: 5px;
}
Tweak the px value to get the gap you like. We don't recommend altering the indenting unless you absolutely have to. Once you start altering that, then the differences between Firefox's margins and Internet Explorer's padding come into play. If you decide you need to do this, check and test your lists in as many browsers as you can. Otherwise you leave yourself open to lists displaying incorrectly in some browsers.
Puzzled about what happened to our old HTML friend, the Horizontal Rule (<hr>
)? While browsers will still interpret it for years, it's being dropped from the next official version of HTML.
If you think you need it, Ask yourself why you need it (i.e,. what's the purpose). Then achieve the same effect using borders with headlines, or whatever else makes sense. When you "think purpose," it's easy to come up with a way to achieve what you want to do through CSS. Then simply call the style from the style sheet.
Let's move to your second hat, template.html (remember, you'll be using masterTemplate.html with your selected SBI! template).
Important Note
There are no SBI! Includes in template.html. You would not be able to see the horizontal navigation at the top and bottom, or the vertical navigation on the left, if we replaced them with Includes. So this discussion is about your masterTemplate.html file.
One of the great advantages of a CSS-driven site is that you don't have to change all your Web pages when you want to make a design change. You merely change style.css—all your pages automatically change to the new style! Ah, paradise!
To take full advantage of that, to totally prepare so that you never have to re-upload all your pages again when you make a site-wide change, the masterTemplate.html file for your selected template has 21 SBI! Include tags coded into the file. And each Include file (they all start with "z-") is included in the folder you downloaded.
Read this help for an in-depth discussion about your template's SBI! Includes before you start working with these files.
You can also add other SBI! Includes, wherever you think you might need them. To avoid making page-by-page site-wide changes, foresee any such need in the future. Place "empty" Includes in all the right spots. Why is the word "empty" in quotes?
Because the Include is not really empty. It contains a few commented words about its future contents (open one of the existing Include files to see how it's formatted). So when you create each SBI! Include and add it to your template file, it will not show up when visitors look at your Web pages when it's "empty" (i.e., you are not yet using it for anything).
Note about HTML "comments": You've seen, by now, how we use commented words in the template.html file. Those words are ignored by the browser. And the visitor won't see them. And the engines ignore comments. But if you view the source, you will be able to see the comment. This verifies that your Include is placed and working properly (i.e., it inserted its comment in the correct location).
Bottom line? SBI! Includes and style.css give you maximum flexibility and easy site-wide changes. You will be able to change not just your L&F, but any part of your site that appears on every page of your site (ex., NavBar text, footer text, RSS box, ad locations, site search, e-zine subscription, etc.) without having to change all 1,300 pages!
Between CSS and SBI! Includes, you'll never have to make a site-wide change to each page again.
Important Tip About SBI! Includes: We've added the Includes we think you may need. However, you have to decide where to put additional SBI! Includes based on your needs.
Think ahead! Put Includes everywhere.
And that's it! You're ready to start building your site.
Note: Need some help with your CSS or HTML? Check the HTML & CSS forum. Or, for affordable professional assistance, book some time with an experienced SBI! Coach.