Who's where?
Visitor [1] : Search Results
Visitor [1] : News channels
Visitor [55] : Blog|Tutorials
Visitor [1] : Premium membership
Visitor [2] : Catalog
Visitor [1] : Wizards|playground
Visitor [14] : Twitter backgrounds
Visitor [1] : Ajax child links demo
Visitor [1] : Join
Visitor [1] : Local search map wizard
Visitor [1] : Encode url wizard
Visitor [1] : Image gift
Visitor [1] : Itune latest gadget
Visitor [1] : Avi's stumbles
Visitor [1] : Avi's diggs
Visitor [1] : Avi's friendfeed
Visitor [1] : Dotnetnuke templates
Twitter backgrounds gallery
background6
background10
background9
background8
background7
background4
background5
background3
background2
Support, Tutorials, Articles

"Child links" template tutorial.

   

OK,

Lets start.

This is the code which you should put inside the "template". (it is in the view options of the module.)

<div id="childlinksbox"> ( this line only is in the HTML Header: )

<div class="childlinks">

<div class="childlinksleft">
<div class="childlinksicon"><a href="[LINK]" >[ICON]</a></div>
</div>

<div class="childlinksright">

<div class="childlinksname">
<a href="[LINK]" >[NAME]</a>
</div>
<div class="childlinkstitle">[TITLE]</div>
<div class="childlinksdescription">[DESCRIPTION] </div>
<div class="childlinkssmall">
<a href="[LINK]" ><span>[NAME]...</span></a>
</div>
    
</div>
 
 </div>

</div>( this line is in the HTML Footer)

Now for the CSS for that code. Again you can try it, and so on. There are other ways to do the same.

Generaly speaking when you want to make sure something works fine, check it in : Firefox, IE7, Opera, Safari and the last one and the most  "fun" one...IE6.

So here is the CSS: (which you can see any way using "developers tool bar")

#childlinksbox
{
       
        background:#FEFEFE;
        padding:3px;

}
.childlinks
{
        margin:6px;
        margin-bottom:0px;
        padding:4px;
        border:1px solid #F9F9F9;
        border-right:0px;
        background:#FDFDFD;

}
.childlinksleft
{
        width:62px;
        float:left;
}
.childlinksicon
{
        margin:0px;
        width:60px;
        height:68px;
        padding:2px;
        border:1px dotted #698495;
        border-top:0px solid #F9F9F9;
        background:#E4E7EA;
}
.childlinksright
{
        margin-left:72px;
        display:block;
        margin-bottom:25px;
}
.childlinksname
{
       
        height:18px;
        line-height:18px;
        text-align:left;
        border-top:0px dotted #003366;
        border-bottom:0px dotted #003366;
        padding-bottom:4px;
        margin-left:14px;
        padding-left:0px;
        background-color:#F8F8F8;
}
.childlinkstitle
{
        float:left;
        width:240px;
        padding:6px 12px 8px 12px;
        text-align:right;
        font-style:italic;
        font-weight:bold;
}
.childlinksdescription
{
        padding: 6px 4px 6px 12px ;
        text-align:justify;
}
.childlinks a
{
        font-size:14px;
            color:#003366;
            font-weight:bold;
}
.childlinks a span
{
        font-size:10px;
            color:#003366;
            font-weight:bold;
            font-style:italic;
            text-decoration:underline;
}

That's it more or less. One more thing: In case you do not have the child links you can put that code into plain fck module, replace the [tokens] with some "real" contentand it will look just the same... Also ...I am using icons with measures of 60px on 68px. Good luck!.

posted @ Saturday, September 29, 2007 8:26 AM by Avi A