Borders are a bit of styling that wrap around a set of content on a page. They may wrap around either a Part or a single bit of content created by a Code Behind page.
In the following image, I've highlighted the borders in red:
In edit page mode, I can expand each bit of content and see the border that each is using:
The content on the left is using the default, or 'no border' option (the X) while the other one is using aborder that gives it ablue background and outline. The currently active theme in these screen shots has 3 borders setup - allowing me to switch between the different borders immediately by clicking on the different border icons:
Borders are setup similar to layouts. To create a border, create a new template file in your themes
borders\ directory.
You should name your borders borderNumber.tmpl.php. For example: border0, border1, border2, etc.
You
MUST name your border templates in ascending order in this way.
As a rule of thumb:
- border0 usually defines NO border
- border1 usually defines a border with title text above your content
Border templates have two special template variables passed to them:
$title - A title that (optionally) will be displayed above content
$content - The content that the border is wrapping
Like layouts, borders can access images for the template using the $theme template variable: "<?=$theme->getAbsDirectory()?>borders/images/MyImage.gif".
Usually border images are placed in your themes borders\images directory. Sample images for borders are ussually placed in borders/images/samples/border0.gif,etc.
Styling for your borders should be placed in your CSS file.
Below is a sample Border0.tmpl.php file, along with its CSS data:
Border0.tmpl.php
=====================
<div class="Border0">
<?=$content?>
</div>
Style.css
=====================
...
/* Border: 0 (Content Only)
(Must be in every theme) */
.Border0 {
margin-bottom: 10px;
}
.border0Sample{
background-image: url(<?=$directory?>borders/images/samples/border0.gif);
}
Below is a sample Border1.tmpl.php file, along with its CSS data. This border
shows content along with a title above it.
Border1.tmpl.php
=====================
<div class="Border1">
<h1><?=$title?></h1>
<?=$content?>
</div>
Style.css
=====================
...
/* Border: 1 */
.Border1 {
margin-top: 6px;
margin-bottom: 10px;
padding: 2px;
}
.Border1 .BorderHeader {
font-family: Verdana, sans-serif;
font-size: 20pt;
font-weight: bold;
margin-bottom: 5px;
color: #5A5A5A;
line-height: 120%;
}
.border1Sample{
background-image: url(<?=$directory?>borders/images/samples/border1.gif);
}
...
Below is a sample Border2.tmpl.php file, along with its CSS data. This borders creates a blue background and light blue outline around the content, like the navigation bar for this page.
Border2.tmpl.php
=====================
<div class="Border2">
<?php if($title!=""){?><div class="BorderHeader"><?=$title?></div><?php } ?>
<?=$content?>
<span style="clear:both"></span>
</div>
Style.css
=====================
...
/* Border: 2 */
.Border2 {
background-color: #E3F4FF;
border: 1px solid #7ECBFD;
padding: 7px;
margin-bottom: 10px;
}
.Border2 .BorderHeader {
font-size: 120%;
font-weight: bold;
}
.border2Sample{
background-image: url(<?=$directory?>borders/images/samples/border2.gif);
}
...
Border previews are the small icons that you can click to switch between borders in the Edit Page view:
These are small, 25x25 pixel images that you place within your themes border\images\samples directory.
In the above examples you probably noticed the following lines in the CSS code:
.border2Sample{
background-image: url(<?=$directory?>borders/images/samples/border2.gif);
}
These lines link your icon to show in the border sample.
Loading...