How to use CSS wizard

Find out how to create CSS templates and stylesheets using this wizard

 

 

 

Increase font size Decrease font size Reset to default

 

Last Updated
on 2012-11-18

 

 

 

Only one simple function at each step of the wizard
Watch a live demo link

Or ask a question in our discussion forum

Create new or modify existing

Licensed users can choose between creating a new set of stylesheets or browsing to their existing web site directory and modifying the existing files. ONLY files created with CSS wizard can be modified by CSS wizard.

Step 1 - Select the page layout

select layout screen

Select the type of template you require, we recommend HTML.

Click on one of the standard layout buttons or list of template masters on the right hand side. Most sites can be constructed from these as the content will be placed in each area later.

For ease of use all websites should work in a similar way so you'll find that 90% of websites can be produced from this limited range of basic layouts.

Experienced designers can add their own layouts by adding standard XHTML files, similar to those supplied, in the design files directory. You must use the same area names and include a corresponding stylelayout.css file in the stylelayout directory.

Step 2 - Placing the content

place content screen

Left mouse click to drag and drop each item of content into the desired position in the page. Do not cross over two areas or the item will appear in both.

Click the third column to add or remove it.

Right click on each item of content to customise its code as shown below.

Custom code includes

edit code screen

The code that appears when you right click will be placed at the location that item appears on the page.

Experienced developers can add their own library of codes into this area. The program always builds with the default code so save your code as default for it to be used.

All of the codes that make each template are stored external to CSS Wizard and can therefore be changed by anyone to make their own custom template. More importantly, if you update one area of the code all future templates can automatically include this upgrade.

Step 3 - Sample style sheets

select sample screen

Click the stylesheet names to upate the design. Experiment until you find the one closest to your needs then change the detail in later frames. To add your own stylesheets simply save them with the others in css wizard's install/designfiles directory; they must have an identical format.

The layout stylesheets may not work properly with all templates. DON'T switch between master layout 1 and 2.

More examples are available for download for registered users. Select the Other Resources-Extra Design Layouts and Styles menu to access these extra resources

Step 4 - Colour and size each area

color property screen

Click on any area to open its property panel. Change the colour, size and background picture etc. until you have the design you want.

You will probably spend most of your time working in this frame and if errors occur such as the content going completely out of place then you have probably added a width+margins+padding+border that is larger than the space available.

Blogger images need a full http: address but you can upload pictures with blogger and use the address it gives.

Only the main properties have been included in the editor. Experts can fine tune or extend the design at the end although this process will save you lots of time getting the base design correct.

To include extra background graphics add a custom tag within an area then define its size and background image. Alignment of sub elements sometimes requires more advanced CSS code so you may need to hand code the full CSS stylesheets to access and amend this. Superblogging's style sheet editor is ideal for this.

Step 5 - Customising the text format

text property screen

Fine tune each of the standard text formats in this screen.

It's important to use the standard H1, H2 structure correctly because search engines often use this as a guide to the importance of the words on your page and therefore what your website is about.

Step 6 - Button conditions

menu property screen

With static, active and live button conditions there are quite a lot of different options you will need to add. Fortunately the CSS Wizard makes this process a lot easier than it would otherwise be.

The button image name must be added to each position although generally only one image is used which is displayed at different positions.

Getting the menu buttons to display the same in all browsers can be very difficult and you may need to add the IE hack given in our tips section.

Step 7 - Picture layout, border and frame

picture property screen

You can specify the picture frame and border. You can also include images within the frame by simply importing a new graphic using the new image button. These images always use the same name.

To make things easier the code for these images is always used in the stylesheet so if you do not require picture frames then simply remove the frame graphics from your website images directory.

Step 8 - Columns and tables

hightlighter screen

Control the colour and layout of columns that can be placed in the middle of text blocks.

Also specify the colour of tables, used for data only in CSS2 standards.

Step 9 - Edit detail and Apply new design to your website

export screen

To add more detail to your design you may need to hand code. The apply screen has an editor to change each stylesheet, if you know how.

Export your new design to your website directory with the export button.

You can specify the root directory of your website, the design template name and the items you want to export.

Step 10 - Merge the design with your website content

After exporting we recommend you use Pure SEO CMS website builder to make your web site. CSS Wizard can produce special templates for this FREE website CMS software to make it much quicker and easier to design and finish the complete website.

Website builders basically hold all of the text and picture content within their own database and make it much easier to add and change this. When you are happy with the content you simply push one button to merge the template design with all of the website content. The builders automate this function saving lots of time and ensuring there are no broken menu links.

Step 11 - Upload web

Before you can upload you will need a broadband supplier.

You will also need someone to host your website and publish this to the world. For a simple website you should be fine with a basic hosting package from any ISP.

Build a CSS library

Productivity Tips

Next Page


Home | How it works | Tutorials | Examples | Purchase | Top
© Copyright Engineering Adventures , all rights reserved.