Styling the Page Wrapper
The Page Wrapper contains everything that's part of your template, including the header, columns and footer, headlines, paragraphs, images and links.
Your template sits on what could be called a canvas. This area "underneath" your template (the part on either side of your template, known as the body) is not affected by any Page Wrapper styling.
Selecting the Page Wrapper area of your template allows you to...
-
add a border to the edges of the entire template, and give it one or more rounded corners
-
left-align it or center it in the browser window
-
position it slightly to the left, right, top or bottom in the browser window
-
change the background of everything that isn't considered "underneath" your template (you can change that part with the Body editor).
In the gray toolbar at the top of the editor, click on the small triangles to switch to the Page Wrapper editing tool (shown below).
If you're ever unsure what a button does, hover over it for a second. Its function will appear as a tooltip.
Border
You can add (or remove) the border or parts of the border from the outer edges of your template, change the border's width and color, and add rounded corners to one, some or all of the borders.
Unlike other design choices, this one isn't likely to have much of an effect on your visitor's experience on your site, unless your border color is so garish, or the width so wide, that the border distracts your visitors.
Keep the width to no more than two pixels wide, and use a color that suits your site's color scheme.
Border Width
- Click on the + button to make the border thicker. Keep clicking on the button to increase the width.
- Click on the – button to make the border thinner. Keep clicking on the button to decrease the width.
Your template may or may not have a border around its outside edges.
If it does, you can remove the border or change its width. If it doesn't have a border, you can add one and select a width.
Notice the red dashed lines outlining the template? If there's a border, it will be alongside all or any of those red dashed lines.
You can decrease the width to 0, effectively making the borders disappear. You'll see no borders next to the red dashed lines.
The four buttons that indicate the left, right, top and bottom borders (discussed below) will also change. The dark edge around each button will disappear, indicating that the borders have been turned off.
Click on the + button to increase the width of the border. This affects all the sides that have a border. You cannot increase the width of an individual border.
Click on the – button to decrease the width of the border. This affects all the sides that have a border. You cannot decrease the width of an individual border.
Border Color
- Click on the Color Palette button.
-
Click on the palette to select a color. Use the rainbow slider to reach the color base you want to use in the palette..
Or enter a 6 character hex value. Or, if you've already saved colors, choose one from Your Custom Colors.
Or click on Reset to Template Default to go back to the original border color. - Click Set Border Color to save this selection. Click Cancel to close the tool and make no change.
You can make the border stand out more by changing its color. Use a color that's part of your template's overall color scheme.
If your template is mostly green, or brown, choosing a brown or green will likely suit your colors. But hot pink or bright orange would not.
Click on the Color Palette button to open the color picker overlay window.
Select a color from the palette by clicking anywhere on the palette, or by dragging the small circle.
To reach the palette's color base you want (e.g., red, purple, green, etc.), click on and drag the rainbow slider.
The palette color you select appears in the square on the right.
If you know the exact color you want for the border, type in the 6-character hex value in the text box next to the # symbol. Enter only letters and/or numbers -- don't add the # symbol. The color you want will then appear in the square on the right, above the hex value.
If you've selected at least one custom color, you'll be able to select a color from Your Custom Colors as well. Hover over any color to see where else in your design that color has been used.
If, after a few color selections, you decide that you don't like any of them, you can start over again by clicking on Reset to Template Default. This will give the border the original color specified in the template's CSS file.
Once you're satisfied with the border color, click Set Border Color to save that selection. Or click Cancel to leave the tool without making any changes to the border color.
Tips
-
The color inside the small circle is indicated in the hex value box. Alternately, entering a hex value changes the location of the small circle inside the palette.
-
Dragging the slider in the rainbow column leaves the small circle in the same position on the palette, as the colors change beneath it.
-
As you set colors in the various color pickers (text, border, background), those colors will be added to the "crayon box" (called Your Custom Colors) for easy access when editing other parts of your template.
Borders On and Off
- Click on the left, right, top or bottom button to add or remove that part of the border.
You can have borders around all four sides of the template, around just one, or around two or three.
Turn on a border, or turn an existing border off, by clicking on its button.
Tip
-
Clicking on the – button until all borders disappear is the same as clicking on each border's button individually. Use + and – to turn all four borders on or off at the same time.
Advanced Styles
- Click on the gears button to open the Advanced Styles overlay.
-
Click on any of the four corner buttons to activate rounded corners for that corner.
Or click on the + button to activate all four rounded corners. - Click on the + button to increase the radius of the curve. Clock on the – button to decrease the radius.
- Click on the Revert button to remove all rounded corner styling.
- Click on any of the Style buttons to add that type of border.
- Click on the first Style button to remove any border you added.
- Click on the X in the top left to close the overlay.
You can add rounded corners to the four corners of your template using the Page Wrapper's Border advanced styles options.
You can also select the type of border you want (solid, dotted, etc.).
Rounded Corners
Click on the gears button to open the Advanced Styles overlay.
Click on any of the four rounded corner buttons to round that particular corner. Or click on the + button to apply rounded corners to all of them.
Click on the + button to increase the radius (the curve) of the rounded corner(s). Click on the – button to decrease the radius.
Continue clicking on the – button to remove all the rounded corners. Or use the Revert button to remove them in one click and restore your Page Wrapper to its last saved state.
If the Page Wrapper has a background image, adding rounded corners may look odd, as the border will then be sitting on top of the background image, or hidden below the image.
Background images for the header and footer will also cause problems for the Page Wrapper's rounded corners.
Border Style
You can also choose the type of border you'd like to have around your pages. There are four styles to choose from, plus no border (the first button).
-
A regular solid border.
-
A dashed (broken) border.
-
A dotted border.
-
A two-line border. Note that the space between the lines is "hollow" and will show part of any color or background image beneath it.
Important
If you turn a border on using one of these buttons (instead of the + button or selecting them individually), the border starts at a thickness of three pixels.
If you turn the border on with the + button, or select them individually, the border starts at a thickness of one pixel. Increase the thickness of the border to at least two pixels (three or more is best) to see the full effect of the border.
Alignment
- Click on the Align Left button to place pages on the left of the browser window.
- Click on the Align Center button to center your pages in the browser window.
You can have your pages appear centered in the browser window, with equal amounts of "non-page" on either side.
Or you can have them aligned to the left, with almost all of the "non-page" to the right (a small bit will appear to the left of the page).
Which you use is up to your taste preferences. Or ask your visitors which they prefer.
Position
- Click on the gears button to open the Advanced Styles overlay.
- Click on the Margin Left + button to move your template to the right, or type in a number. Click on the Margin Right + button to move your template to the left, or type in a number. Click on the – button to reverse the movement.
- Click on the Margin Top + button to move your template down from the top of the browser window, or type in a number. Click on the Margin Bottom + button to move your template up from the bottom of the window, or type in a number. Click on the – button to reverse the movement.
- Click on the Padding Left + button to add extra space to the left of the Nav Column, or type in a number. Click on the Padding Right + button to add extra space to the right of the Extra Column, or type in a number. Click on the – button to reduce the space.
- Click on the Padding Top + button to move your page elements away from the top of the edge of the "box" containing the elements, or type in a number. Click on the Padding Bottom + button to move the page elements away from the bottom edge of the "box," or type in a number Click on the – button to reverse the movement.
You can also fine-tune the position of your pages in the browser window.
This can create some unique looks, depending on how much positioning you add to your template.
Click on the gears button to open the Advanced Styles overlay.
You'll see + and – buttons for each of Margin Left, Right, Top and Bottom. You'll also see buttons for Padding Left, Right, Top and Bottom.
Increasing the margin puts space between a page element and the element next to it (to the left, right, above, or below).
Decreasing the margin reduces that space. For the Page Wrapper, the entire template moves.
Although you can't see the edges of a page element (unless you put a border around it), increasing the padding puts space between the element's edges and the content inside that element. Decreasing the padding reduces that space.
Each click of one of the buttons moves your template by one pixel. Continue clicking on that button to move the template in the same direction.
You can also switch from pixels (px) to percentages (%). Click on px and select % from the small menu. To switch back to pixels, repeat the process.
Background
You have several options for the background of your entire template. Keep it as is, or change its color, or upload a background image.
You also have full control over the positioning and tiling of any background image that you upload.
Background Color
- Click on the Color Palette button to change the background color of the entire template.
-
Click on the palette to select a color. Click the rainbow slider to reach a different color palette.
Or enter a hex value. Or, if you've already saved colors, choose one from Your Custom Colors. You can also select Transparent.
Or click on Reset to Template Default to go back to the original background color. - Click Set Background Color to save this selection. Click Cancel to close the tool and make no change.
If you'd like to change the background color of your entire template, do that here.
(You can also change the background color of any column, and the footer, individually. Click on one of those sections and click on its toolbar's Background tool Color Palette button.)
Choose a color that suits your template's overall color scheme.
Remember that this is a global change that will appear on every page of your site.
Click on the Color Palette button to open the color picker overlay.
Select your color by clicking on the palette or dragging the small circle around the palette. Click on the rainbow slider to reach the desired palette of colors.
Or you can enter a 6 character hex value for the color you want to use.
You can also choose from a color in Your Custom Colors, which is available after you've selected at least one custom color in any of the color pickers. Hover over any color to see where else in your design that you've used that color.
Another option in most of the background color pickers is to choose Transparent. This will make the background color of the Page Wrapper the same as the Body's background color.
Click on Set Background Color to save your change. The overlay window will close and your new background color will appear.
Upload Background Image
- Click on the Upload Image button.
- In the overlay tool, click on the Browse button (Choose File if you're using Safari). Navigate to the desired background image and select it.
- Click on the Upload Background Image button.
You can change the background image of your entire template, if it has one. Or you can add a new one if it doesn't.
Background images are usually small images, which are then "tiled" across and/or down your page. The image should look good when looking at all of these "tiles" (repetitions of your image).
If you decide to use an image as the background, ensure that it appears the way you want it to in Site Designer.
Click on the Upload Image button (second from the left). This will open an overlay window...
Click on Browse (Choose File if you're using Safari) to locate the file. Click to select the file.
Click on Upload New Background Image to upload it.
The overlay window will close. You'll see this section of your site with your new background image.
Remove Background Image
- Click on the Remove Image button to remove an image you uploaded.
If you added an image for the background and decide that you don't like it, use this tool to remove the image.
The background image appearing in the template will disappear, leaving you with the current background color.
Reset
- Click on the Reset button to return to the default image that came with the template.
You can also reset all the changes you made to the background image, which restores the default image that came with your template.
This resets only the background image settings for the Page Wrapper.
Advanced Styles
- Click on the gears button to open the Advanced Styles overlay.
-
Click on Position V and select from Top, Center and Bottom.
And/or click on Position H and select from Left, Center and Right. -
Click on the Down arrow button to activate image tiling vertically.
Click on the Right arrow to activate image tiling horizontally. - Click again on the Down arrow button to deactivate tiling vertically. Click again on the Right arrow to deactivate tiling horizontally.
If you uploaded a background image, you have full control over it.
You can change the position of the image (Position V or Position H) or tile it down the browser window or across the window (Down arrow and Right arrow buttons).
For the Page Wrapper, activate the tiling (there will be a border around the activated button) so that the image fills the entire width and height of your site, except for the header.
Note that the Page Wrapper may have a background image that also provides a background for the Nav and Extra columns. If you upload a new Page Wrapper background image, it will override that columns effect. If you want to change one column but not the other columns, upload a background image to that column only.
Shadow
- Click on the gears button to open the Advanced Styles overlay.
- Click on the Size + button to activate the shadow. Click again to make the shadow wider. Click on the – button to make it narrower.
- Use the Position arrow buttons to put the shadow where you want it.
- Click on the Blur Distance + button to increase the fuzziness of the shadow. Click on the – button to make it sharper.
- Click on the color palette button to change the color of the shadow.
You can give your site a bit of a three-dimensional look by adding some shadow to it. Note, however, that the current trend in web design is to a flat look (that is, no shadows).
Click on the gears button, then on the Size section's + button to activate the shadow. Make the shadow fuzzier by clicking on the + button to activate the shadow in the Blur Distance section.
You can also change the shadow's location by clicking on any of the Position arrow buttons.
Once you have the shadow size, blur and position, select a color for it by clicking on the color palette button and choosing a color that complements the colors in your template.
Using the Shadow tools may cause display problems with some templates, especially those with full width header images.