How To Create Html Template With Fixed Width

Editing a Template With a Fixed Width

Fixed outer content width for HTML websites

Fixed Width

Support for setting a stock-still outer width in your Allwebco website template and centering the text contents.

See Also…

Centering the logo & carte du jour

HTML 5 Example
HTML5 templates (new templates)
If your template pages take a <!doctype html>

All HTML5 Allwebco templates include an outer DIV for centering. You volition edit the CSS class to gear up a fixed width. The class will be named: "page-wrapper" or "pagewrapper" or "#wrapper" or something similar. Locate the class in your css file and edit information technology similar to the following using a max-width:

#wrapper    {                      margin: 0 auto;          max-width: 850px;                      border: solid #999999;                      border-width: 0px 1px 0px 1px;                      }

Or you tin can edit to something like the following with max and min widths:

            #wrapper    {                      margin: 0 auto;          min-width: 850px;          max-width: 1100px;                      border: solid #999999;                      border-width: 0px 1px 0px 1px;                      }

The "margin 0 auto" code centers the content. Yous may besides need to edit the ".pagewidth" class, and/or add a "margin: 0 motorcar" in the template css file.

Run across besides css editing for inner and outer backgrounds.

HTML 4.01 Example
HTML 4.01 templates
Some, only not all, Allwebco templates can be setup with a fixed overall width. We do not offering back up for this but hither are a few tips for this modification.

What templates exercise not work
Older pre-2007 drop menu templates (also see chrome models beneath) tin non have a fixed width setup because of how the menu is located on the HTML pages. (newer mail-2007 templates with CSS drop menus include a carte.css file or files and can have a fixed width) Templates with part of the carte layered over the banner images tin can also usually non have fixed widths.

What to edit
Check your template .css file. Some new templates include a "pagewidth" class. If your template includes this course you can edit your page width with this style course. Bank check "date location" info below.

If your template does non include a "pagewidth" class:

To setup a fixed overall width on a template you volition edit the first table width after the Trunk tag in each HTML page. This table usually has a notation indicating "OUTER TABLE" for the area of code to edit. Modify the 100% to a fixed number like "750". It is non suggested that you go whatsoever wider than 750 pixels.

Chrome CSS drop menu EXAMPLE:
In a chrome template like the ExecChrome, ChromeTech or other chrome drop menu templates you lot will first set up the date in your CSS file to be on the left side or to not brandish. Also see date notes beneath. In each HTML page edit the post-obit code:

<table cellpadding="0" cellspacing="0" edge="0" width="100%"><tr><td marshal="center" valign="height">

Border option:
Edit the higher up code to the code below to add together a edge on the right side, or run into the "Exterior area background" section below for more than background and border options:

<table cellpadding="0" cellspacing="0" edge="0" width="750" style="border-right: #FF0000 1px solid;"><tr><td align="center" valign="top">

Centering pick:
If y'all want to center the page you lot tin add a <CENTER> tag and full border around similar the following:

<Centre>
<table cellpadding="0" cellspacing="0" edge="0" width="750" fashion="border: #FF0000 1px solid;" ><tr><td marshal="centre" valign="pinnacle">

...and you can add together a </CENTER> to close the table nigh the finish of the page afterwards the "OUTER Folio Table" ends merely just before the </BODY> </HTML> tags. This stride is recommended just tin exist skipped.

Outside area background colour and edge (advanced users):
Once you have added a fixed width, you can setup the fixed width centre "content" area to take one background color and the outer area to have another.

Information technology is recommended that you make a backup of your template folder before you try this type of modification.
This is but an outline of the steps for backgrounds and not a modification supported past Allwebco. This modification may involve extra work in templates that already include background images. Run across notes below.
Add a new class to the body tag if your HTML page does not already accept i. Example: Course added to the body tag in an ExeChrome template.
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" course="outerbackground">
Add the above to your HTML pages, then add the class below to your template .css file. Y'all tin add together information technology at the bottom of the .css file. This is for the outer groundwork.
.outerbackground { background-color: #999999; }
Add a class to each HTML folio "MAIN Tabular array" or "OUTER Tabular array". This will be the commencement tabular array in each page:

<table cellpadding="0" cellspacing="0" border="0" width="750" class="innerbackground"><tr><td marshal="center" valign="top">
Add together the class beneath to your template .css file. Y'all tin add together it at the bottom of the .css file. This is for the inner groundwork.
.innerbackground { background-color: #FFFFFF; border-left: #000000 1px solid; border-right: #000000 1px solid; }
Note: If your template already has a background image in the "trunk" tag at the top of the template .css file, you may need to remove that line (or lines) in the .css file and instead add that to the new "body" class you accept added as outlined above.

Date location problems
In near templates the date included in the design is a floating date, significant that this can not be located properly in a fixed width template. You may demand to turn off the date. The template appointment aye/no option will be located in one of the template .js files. The option to turn off the date may exist located in the "sidebar.js", "carte du jour.js" or the "header.js".

For more details see the Re-sizing Template Tables support page.

Software for Editing:
Software Choices