SBI! Template Supporting Documentation
Contents
SBI! Template Supporting Documentation
There are several "take it as far as you like" levels of documentation for the CSS-based templates available for your site. These include...
-
The Full CSS Action Guide package
-
The CSS Action Guide "Lite"
-
Help for making simple customizations to your selected template (i.e., skip the CSS Action Guides and just get it done!)
-
Adding SBI! Include tags to your template
-
Additional Guidance
The Full CSS Action Guide Package
The Full CSS Action Guide package is a downloadable folder that you can use as a "learn as you practice" tool. It's for you if you know some HTML, but little or no CSS.
Fairly intensive, it's designed to take you from knowing no CSS to knowing as much CSS as you are ever likely to need.
The package contains...
-
CSS-Action-Guide.html, an HTML-based guide that discusses CSS and the various styles that these templates use.
-
style.css (found inside the support-files folder), the file used to design and modify a Look and Feel. This version is a practice version. Make as many changes to it as you'd like, viewing those changes with...
-
template.html, the page that displays your customizations. From your browser, select File > Open from the menu, and choose template.html. After every change in style.css, refresh template.html to view the changes.
Right-click to download the package.
Important Note
Although the original template (found in the CSS Action Guide Package) had the Content Column set to 600 pixels, many of the available designs have a narrower content area. If you're converting your site from block-built pages, check that your image sizes are narrower than the width of #ContentColumn for your selected template. You can check that in Section 2 of style.css for your template.
Look for the margin: line. If there are four numbers, add the second and fourth. If there are only two numbers, double the second number. Then subtract that sum from the width: number for #ContentWrapper or #ContentColumn. That's the usable width of your template's #ContentColumn.
The CSS Action Guide "Lite"
CSS Action Guide "Lite" is for those with some CSS experience. It has just the information you need when designing a template or customizing one of the templates.
It assumes a certain level of knowledge, so it does not go into "Full" depth. If you find you can't keep up with this version, you may need the "Full" CSS Action Guide.
css-action-guide-lite.html is also part of the download package. Click on the link above to access it.
Important Note: If you know CSS (or if you read the Full guide and learn CSS), you can use style.css to create your own Look and Feel, totally from scratch. (Or hire a SiteSell Professional to create one for you.)
But it's best to "get started with content ASAP." With a CSS-driven site, it's very fast and easy to refine, even totally re-do, your site design later. So let's talk about...
Making Simple Customizations (Skip the Guides)
Many SBIers only need or want to make a few simple, but important, changes to their selected template without learning a lot of CSS. If that sounds like you, you can skip both Action Guides and click here for help that covers the following customizations...
-
Add a logo to your header image.
-
Globally change the color of fonts on your pages.
-
Move (or remove) the extra navigation at the top of the template.
-
Change the vertical navigation bar color.
-
Find and change the main images.
-
Change the buttons.
-
Switch to 2 columns.
Before you make any customizations, save a copy of the style.css file in your template folder. If you mess up, you'll have a fresh copy waiting! This is a good practice to repeat whenever you achieve a version of your site design that you like.
By the way, if you do decide to skip the Action Guides, you can always read one later to find how to use particular CSS items in your style.css file (ex., an AdSense box). Meanwhile, here's the most important lesson to be learned from the Action Guide...
When you use CSS to style your site, design and content are no longer in the same file. You divide site design and site content into two...
-
Your CSS file "does design."
-
Your HTML file "does content."
Something else the CSS Action Guide contains is instructions on how to create your own logo image or modify the one that came with your template. You'll find it in Section 3 - Page Structure Details.
This means that, should you ever decide to fine-tune, or even totally change, your site design, all you (or a SiteSell Professional if you skip the Action Guide and want to do more advanced changes than the "common basics" covered in this section) will ever have to do is make changes to the style.css file. Your entire site's design will instantly change!
So you don't have to obsess about making your design "perfect" right away. Tweak it at any time. If you're careful, you could even "peek" into the Action Guide and figure out a little change here and there later. (But do keep a backup copy of style.css if you do that!)
Since your HTML file focuses on your content, consider switching to a text-based HTML editor. You will not be doing any fancy HTML, so you don't need a WYSIWYG editor (they tend to leave messier HTML, too). And many have a live preview function where you can see changes to your page as you make them.
The HTML template is so simple that a text-based HTML editor becomes very simple to use. Just fill in the Title, the Meta Tags, add a headline and paragraphs and the occasional bold or italics tag.
Also, the style.css file is set up so that you can use a simple text editor to make the changes discussed, whether you "keep it simple" here or use the Action Guides for more advanced work.
So... design or content, both can be handled with a simple text-based HTML editor. Taking this route is our recommendation (more on text-based HTML editors below).
Click here for help that covers the 7 simple but important, basic customizations.
SBI! Includes
SBI! Includes make changing information common to several (or all) pages quick and easy. You may want to add, change or remove AdSense ads, or add tracking code to each page, or change the copyright date in your footer. If that information is in an SBI! Include file, you can change it on every page with just a few mouse clicks.
Your masterTemplate.html file has 21 SBI! Include tags coded into it. This foresees just about any possible future need for site-wide changes. Click here for more information about using SBI! Includes with your template.
Additional Guidance
Below are two articles for further guidance and tips.
-
2 Columns vs. 3 Columns for Your Site Design -- a discussion on how to decide which is best for your site.
-
Choosing and Using Text-Based HTML Editors -- These templates are so easy to use that you don't need a WYSIWYG editor (although you can use one if you want). Many text editors have split-screen live previews, so you can see changes in your HTML immediately. This article also includes links to other TNT HQ articles about the HTML needed to create certain features on your pages, like lists and links.
SBI! Forums and SiteSell Professionals
The HTML & CSS forum is a great place to get extra help, if you need it.
https://forums.sitesell.com/viewforum.php?f=8
Or you might consider using a SiteSell Professional to create your site design or customize a template. SiteSell Professionals are especially good value when you need a one-time setup (like customizing your design) by those who have the specialized talents and skills, skills that you don't need after you're done (you focus on content and links, important work "forever after")...