Area Link Admin
Many Home Pages have an area of their page for links to
main areas of their site. Area
links have the following basic formatting applied within Dynamic HomePage
which can be extensively configured within your stylesheet.
Emboldened Title (hyperlinked)
Newline followed by paragraph of explanatory text
An image may also be added (see Technical
Details below).
Setting the Area Links
As a logged-in admin user,
click the Home Page Admin link
from the Home Page, and choose the Area
Link Admin option.
Output
this function to users' browsers can be turned on and off.
A column of icons down the
right-hand side of the page allow you to add, delete, edit or re-order
area links. (Bear
in mind that the effect of your changes may vary according to your stylesheet
settings.)
Adding
links: click the 
icon to add a new link. A
pop-up window will prompt you to enter the link title, target URL and
a paragraph (or more) of explanation. Click
OK after editing.
Deleting
links: click the 
icon to delete a link. You
will be prompted for confirmation before the link is deleted.
Editing
links: click on the title of the area link you want to change,
and then click the 
icon to it. The
current link title, target URL and explanatory text will be included in
the fields. Click
OK after editing.
Re-ordering
links: click on the title of the area link you want to change,
and move it up or down the list by clicking the 
or 
icons.
Area links can be previewed
before committing any changes you have made.
To confirm any changes you
have made, click Update. (Clicking
the Home Page or Home
Page Admin links will also confirm your changes.) To
cancel any changes you have made since the last update, click the Cancel Changes link.
Technical Details
These technical details are intended for web designers when setting
up a stylesheet.
The sample HTML output below shows how Area links are output. If
customised output is required for your home page implementation, please
contact the developers.
In the output Home Page,
the area links functions are marked between the comments <!--Area
links--> and <!--Area links
end-->, containing a main DIV
block with id="activities",
nesting any number of entries of DIV class="activity"
and an incremental id.
A linked image can be associated
with each area link. In
this case the image URL will be specified in the stylesheet.
Activity IDs are always numbered
in the order of output, but the class content can be re-ordered with the
interface. Bear
in mind that re-ordering items in the interface will not re-order any
associated images in your stylesheet.
HTML Output
<!--Area links-->
<div id="activities">
<div
class="activity" id="act_1">
<a
href="1st_link_url" title="activity"><div
class="act_img" id="act_img_1"></div></a>
<span
class="act_text" id="act_text_1"><b><a
href="1st_link_url">1st Link Title</a></b>
<br>1st Link Paragraph</span>
</div>
<div
class="activity" id="act_2">
<a
href="2nd_link_url" title="activity"><div
class="act_img" id="act_img_1"></div></a>
<span
class="act_text" id="act_text_1"><b><a
href="2nd_link_url">2nd Link Title</a></b>
<br>2nd Link Paragraph</span>
</div>
</div>
<!--Area links end-->
Sample Stylesheet Implementation
The stylesheet is individual to each implementation. The
code below is just an illustration of how it may be implemented.
div.activity
{
font-size:
19px;
border:
none;
padding:
2px 2px;
margin:
2px;
background-color:
transparent;
width:
250px;
}
#act_1, #act_2
{
position:
absolute;
right:
2px;
z-index:
1;
}
#act_1
{
top:
100px;
}
#act_2
{
top:
150px;
}
.act_img
{
margin:
2px;
float:
left;
width:
40px;
height:
40px;
border:
1px solid #000;
}
#act_img_1
{
background-image:
url(../images/ico_area1.jpg);
}
#act_img_2
{
background-image:
url(../images/ico_area2.jpg);
}