Articles/Getting Started/Advice Columns

Advanced Template Customization

Veronica
posted this on March 17, 2011 16:13

So you've learned how to use our default templates in the Site Designer | Change Template, Background, Titles, Logos article. You even learned how to further customize your template through Motifs, Logos and custom CSS. Now you're ready to take it to the next level, so you can set your site apart from all the other websites on the internet.

In this article you are going to learn some advanced tips & tricks for designing a really unique template that can be used with the Webs Site Building tools.

It's important to remember that design is trial and error. You're being creative here, so your first attempt might not look the way you want. Be patient! Nothing is permanent and you can always revise your designs.

Note: This article is only meant to get you started. The third party applications mentioned in this article are the personal preference of the author. Our support team is dedicated to helping you with the default site building tools, but when you start to customize things, you're taking on ownership of your code and design concepts. Good luck and have fun!

Step 1: Familiarize yourself with the main components of a template

ComponentsOfTemplate.jpg

Header

In this section you can add a site title, tagline, and logo. The Site Designer allows you to modify the height of the header and font, spacing and size of the site title and tagline.

Navigation Bar

Also known as the NavBar, your visible site pages will appear as links in this section. It is also possible to make sub navigation. This is extremely useful for keeping your NavBar organized and uncluttered.

Tip: Some templates have the navigation bar at the top, others have it on the left or right side.

Sidebar

The sidebars, while optional, are very useful. Applications will automatically add new content to your sidebars. You can also add custom modules like a bookmark link, images, videos, etc.

Background

A background can be customized with a color or a pattern. This is a great and easy way to set your website apart. However it is a good idea to keep it simple, because you do not want the background to distract your visitors from the message of your site.

Content Box

The Content Box consists of a Title and a Content Area. This is where your.... content goes!

Step 2: Custom Header & Logo

All of the templates we offer are specifically designed to work with our Site Building tools. The first step is to select one of our templates from the Site Designer. Take a look at the overall color scheme, motif, and layout of the template and select the right one for you.

Template-NoMod.jpg

In the image above the template has the default settings for the header. However, below I have used a custom image and changed aspects of the Site Title / Tagline font to change the look.

Template-Header.jpg

How can I tell what the logo size is for a template?

Firefox has a very useful add-on for designers (and that's what you are now!) called "Web Developer" that will allow you to look at the CSS for a template to find out information like the logo dimensions, CSS classes, and more. 

WebDevToolbar.jpg

What is an Add-On? An add-on can be a new time-saving toolbar button, a shortcut to search, a themed look, and more. Add-ons make browsing easier.

The Web Developer toolbar is FREE to download. However the developer of the add-on wouldn't mind donations if you find it useful.

Download the Web Developer toolbar For Firefox here

Need Help with the Web Developer toolbar? Click here

Once you have downloaded and installed the Web Developer toolbar, it's time to figure out the size of your logo. Add the template to your site and publish the site. Then, view your site in Firefox.

Click the CSS option in your new Web Developer toolbar. Then, select "View Style Information" from the drop down.

ViewStyleInfo.jpg

Once you turn this option on, you will see a red box around any section you hover your mouse over. Click on the logo section, and the Style Information will appear.

Tip: The Logo in our templates always have the CSS class of .fw-logo.

StyleInformation.jpg

You will see the following code:

.fw-logo

{width: 560px;

height: 156px;}

This logo is 560px wide by 156px high. Now you can create an image that size to use as your logo. 

Note: There are a few templates that do not have logos. If you upload a logo and it does not show up in your template, you have probably found a template that does not support logos.

There are a lot more features to the Web Developer toolbar. You can use it to find the other CSS classes for use in the Advanced CSS edit option of the Site Designer.

Step 3: Advanced CSS

Ready to take it to the next level and write your own CSS codes? Almost all of the features of the template can be modified through the Advanced CSS option. Check out the example sites we post on the blog every Wednesday for some inspiration. 

Webs Blog - Example Sites

Now, if the idea of creating your own custom CSS code is too much for you to take on, one of our Webs users has created a great site and service for customizing Webs Templates.

Snedekerdesignz - Unlimited webs customization

The Webs Custom CSS Code

body {}

h1, h2, h3, h4, h5, h6, h7 {}

a:link, a:visited {}

a:hover, a:visited:hover {}

#fw-container {}


/* Header */

#fw-head {}

#fw-title {}

#fw-smalltitle {}

.fw-logo {}

 

/* Contains Nav, Content, and Sidebar */

#fw-blockContainer {}

 

/* Navigation */

#fw-mainnavwrap {}

#fw-nav-menu {}

#fw-nav-menu ul {}

#fw-nav-menu li {}

#fw-nav-menu li a:link, #fw-nav-menu li a:visited{}

#fw-nav-menu li a:hover, #fw-nav-menu li a:visited:hover {}

 

/* Content */

#fw-bigcontain {}

#fw-mainColumn {}

#fw-paragraph {}

.fw-title {}

.fw-text {}

 

/* Sidebar */

#fw-sidebar {}

#fw-sidebar .fw-title {}

#fw-sidebar .fw-paragraph {}


/* All Apps */

.fw-even  {}

.fw-odd {}

#searchDisplay {}

.navigation {}

 

/* Footer */

#fw-footer {}

#fw-foottext {}

.fw-footertext {}

 

/* DO NOT Delete */

.clears {clear: both;} 

Helpful Tip

Paragraph titles, particularly those represented by the (h3 tag) in CSS, that are colored in within "Edit website" portion of the site builder will override the custom CSS. To fix this add (!important) CSS rule to emphasize the color change.

Example:

.fw-title {font-family:Arial; text-transform:uppercase; color:#7bc4f4 !important; font-size:16px;}

 
Topic is closed for comments