Image Borders

This documentation will walk you through adding and editing HTML and CSS to produce image borders around content.

This documentation applies to ZetaBoards only.

Side Border

The HTML

Before content in Theme Layout.

<div id="main_content">
<div id="side_l"><div id="side_r"><!-- content start -->

After content in Theme Layout.

<!-- content end --></div></div>
</div>

The CSS

CSS must be added to the end of the Theme Appearance.

Where #HEX appears, enter the hex code for the main content background.
Where width:100% appears (apart from #main_content), do not edit.

#main_content{width:100%;margin:auto;}

Replace 100% with a different percentage, or a fixed px width. This will set the width for your board.

#side_l {background: url( LEFT SIDE IMAGE URL ) repeat-y left;}
#side_r {background:url( RIGHT SIDE IMAGE URL ) repeat-y right #HEX;margin-left:0px;padding-right:0px;
}

Margin-Left: Enter the width for the left image.
Padding-right: Enter the width for the right image. Increase the px of the margin and padding (by the same amounts to ensure the content remains centered) to increase the space between the content and the borders.

#wrap,#nav,#foot{background:#HEX;border:0;}
#foot{margin-top:20px;}

Include this to adjust the margins of areas of the default layout.

The side borders cannot go around the copyright.

Full Image Border

A full image border can be seen here: - image -

Both the HTML and CSS must be added and edited for this to work. Simply adding the example shown here without modification will not change your board.

The HTML

Add the following code before anything in your Theme Layout.

You may actually add this after any of the default tags within the Theme Layout. e.g. add the code after the <!– TOPMENU –> so the top menu isn't included within the image borders

<div id="main_content">
<div id="header">
<div id="header_l"><!-- top left corner --></div>
<div id="header_r"><!-- top right corner --></div></div>
<div id="side_l"><div id="side_r">
<!-- content starts -->

Anything you want to be inside the image borders should be after the <!– content starts –> tag.

To close the borders, add the following HTML at the very end of your [b]Theme Layout[/b].

Like with adding the starting HTML to another area of the layout, you could also end the image border elsewhere. e.g adding the end HTML after the <!– NAVIGATION –> to include only the header and navigation within the image border.

<!-- content ends -->
</div></div>
 
<div id="footer">
<div id="footer_l"><!-- bottom left corner --></div>
<div id="footer_r"><!-- bottom right corner --></div>
</div></div>

The CSS

CSS must be added to the end of the Theme Appearance.

Now you've added the base HTML, you'll notice your theme hasn't changed it's appearance, therefore you need to style the HTML using CSS. Please refer to the following diagram showing the different areas of the image border.

#main_content {width:100%;margin:0px auto;}

Change the width from 100% to either a set width or a percentage.

For the following, you must insert the image url into the background brackets, and set the width and height of the images for the corresponding areas.

Where #HEX appears, insert the hex code that'll appear behind the content the image border compasses.
Where width: 100% appears, do not edit the values.

/* repeating background image of the header */
#header {background:url(HEADER_URL);height: 0px; width:100%;}
 
/* top left corner */
#header_l {background:url(TOPLEFT_URL);height: 0px; width: 0px; float:left;}
/* top right corner */
#header_r {background:url(TOPRIGHT_URL);height: 0px;width: 0px;float:right;}
/* left side border */
#side_l {background:url(SIDELEFT_URL) repeat-y left;}
/* right side border */
#side_r {background:url(SIDERIGHT_URL) repeat-y right #HEX;margin-left:0px;padding-right:0px;}

The margin-left: 0px needs to be the width of the left side border. The padding-right needs to be the width of the right side border.
However, you may increase these values to increase the space between the side borders and the main content. Both values must be the same in order to keep the content centered.

/* repeated footer background */
#footer {background:url(FOOTER_URL);height:0px; width:100%;}
/* bottom left corner */
#footer_l {background:url(FOOTLEFT_URL); height: 0px; width: 0px; float:left;}
/* bottom right corner */
#footer_r {background:url(FOOTRIGHT_URL); height: 0px; width: 0px; float:right;}
 
/* this will remove the spacing and borders from the default layout. Is essential for image border to appear correctly */
#foot_wrap {margin:20px 1% 0px;}
#main,#nav,#wrap {background: #HEX;margin:0;border:0px;}
.drop_menu { margin-bottom: 0;}

If you require help with this, please feel free to send a support ticket or create a support thread in the appropriate forum.



themes/borders.txt · Last modified: 2014/11/03 15:09 (external edit)