Editing a Template With a Fixed Width
Fixed outer content width for HTML websites
Support for setting a fixed outer width in your Allwebco website template and centering the text contents.
See Also…
See Also…
HTML5 templates (new templates)
If your template pages have a <!doctype html>
All HTML5 Allwebco templates include an outer DIV for centering. You will edit the CSS class to set 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 it 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 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. You may also need to edit the ".pagewidth" class, and/or add a "margin: 0 auto" in the template css file.
See also css editing for inner and outer backgrounds.
HTML 4.01 templates
Some, but not all, Allwebco templates can be setup with a fixed overall width. We do not offer support for this but here are a few tips for this modification.
What templates do not work
Older pre-2007 drop menu templates (also see chrome models below) can not have a fixed width setup because of how the menu is located on the HTML pages. (newer post-2007 templates with CSS drop menus include a menu.css file or files and can have a fixed width) Templates with part of the menu layered over the banner images can also usually not have fixed widths.
What to edit
Check your template .css file. Some new templates include a "pagewidth" class. If your template includes this class you can edit your page width with this style class. Check "date location" info below.
If your template does not include a "pagewidth" class:
To setup a fixed overall width on a template you will edit the first table width after the BODY tag in each HTML page. This table usually has a note indicating "OUTER TABLE" for the area of code to edit. Change the 100% to a fixed number like "750". It is not suggested that you go any wider than 750 pixels.
Chrome CSS drop menu EXAMPLE:
In a chrome template like the ExecChrome, ChromeTech or other chrome drop menu templates you will first set the date in your CSS file to be on the left side or to not display. Also see date notes below. In each HTML page edit the following code:
<!-- OUTER PAGE TABLE-->
<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="center" valign="top">
Border option:
Edit the above code to the code below to add a border on the right side, or see the "Outside area background" section below for more background and border options:
<!-- OUTER PAGE TABLE-->
<table cellpadding="0" cellspacing="0" border="0" width="750" style="border-right: #FF0000 1px solid;"><tr><td align="center" valign="top">
Centering option:
If you want to center the page you can add a <CENTER> tag and full border around like the following:
<!-- OUTER PAGE TABLE-->
<CENTER>
<table cellpadding="0" cellspacing="0" border="0" width="750" style="border: #FF0000 1px solid;" ><tr><td align="center" valign="top">
...and you can add a </CENTER> to close the table near the end of the page after the "OUTER PAGE TABLE" ends but just before the </BODY> </HTML> tags. This step is recommended but can be skipped.
Outside area background color and border (advanced users):
Once you have added a fixed width, you can setup the fixed width center "content" area to have one background color and the outer area to have another.
- It is recommended that you make a backup of your template folder before you try this type of modification.
- This is only an outline of the steps for backgrounds and not a modification supported by Allwebco. This modification may involve extra work in templates that already include background images. See notes below.
- Add a new class to the body tag if your HTML page does not already have one. EXAMPLE: Class added to the body tag in an ExeChrome template.
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" class="outerbackground">
- Add the above to your HTML pages, then add the class below to your template .css file. You can add it at the bottom of the .css file. This is for the outer background.
.outerbackground { background-color: #999999; }
- Add a class to each HTML page "MAIN TABLE" or "OUTER TABLE". This will be the first table in each page:
<!-- OUTER PAGE TABLE-->
<table cellpadding="0" cellspacing="0" border="0" width="750" class="innerbackground"><tr><td align="center" valign="top">
- Add the class below to your template .css file. You can add it at the bottom of the .css file. This is for the inner background.
.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 "body" 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 have added as outlined above.
Date location problems
In most templates the date included in the design is a floating date, meaning that this can not be located properly in a fixed width template. You may need to turn off the date. The template date yes/no option will be located in one of the template .js files. The option to turn off the date may be located in the "sidebar.js", "menu.js" or the "header.js".
For more details see the Re-sizing Template Tables support page.
Software for Editing:
Software Choices