Here is my page Template it is a container.
{{head}}
{{main_navigation}}
<div id="empty_main_container">
<div id="links_graphic_container"></div>
<div class="box_news black">
<div class="corner TL"></div>
<div class="corner TR"></div>
<div class="corner BL"></div>
<div class="corner BR"></div>
<div class="inner">
<ul class="linkboxes">
[*content*]
</ul>
</div>
</div>
</div>
{{footer}}
Here is my wayfinder call in the container. The &startId is the id of the container and &rowTpl is my custom wayfinder template
[!Wayfinder? &startId=`24`&rowTpl=`wayfinder_tpl`!]
Here is my wayfinder template
<li><a href="[+wf.link+]" target="_blank">
<h1>[+wf.title+]</h1>
<span> </span>[+wf.introtext+]</a></li>
Each of the links is a weblink inside of the container, so that they are easily added, edited and deleted.
Here is the css used for the list
/* LINKS */
ul.linkboxes {
display: block;
width: 670px;
position: relative;
list-style-type: none;
overflow: hidden;
text-align: left;
}
ul.linkboxes li {
display: block;
position: relative;
}
ul.linkboxes li a {
display: block;
text-decoration: none;
padding: 10px;
color: #EFEAD6;
font-size: 13px;
line-height: 18px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #EFEAD6;
}
ul.linkboxes li a:hover {
background-color: transparent;
background-image: url(../images/div_hover_bkg.png);
}
ul.linkboxes li a h1 {
display: block;
color: #00CCCC;
margin-bottom: 2px;
font-size: 20px;
}
ul.linkboxes span { display: none; }
/* LINKS END */
Hope this helps.
