So we would like to open the child links module and create a side menu. For that we'll be using just the [NAME] token and the [DESCRIPTION] for the tool-tip (optionally).
<div class="side_childlinks>
<ul> //** put these two lines in the header of the html (at the module "view optlins".)
<li><a href="[LINK]" title="[DESCRIPTION]>[NAME]</a></li>///** put that line only at the body html*///
</ul>
</div> //*** put these last two lines in the footer of the html.**///
That's it!
Now all is left is to style the childlinks
CSS of childlinks:
.side_childlinks{} >#dnn_ContentPane
.side_childlinks ul{display:block;margin:0px;}
.side_childlinks ul li{height:26px;line-height:26px;margin-bottom:6px;list-style-type:none;}
.side_childlinks ul a:link{padding:0px 12px;text-decoration:none;border:1px dotted green;font-size:12px;color:green;}
.side_childlinks ul a:visited{padding:0px 12px;text-decoration:none;border:1px dotted green;font-size:12px;color:green;}
.side_childlinks ul a:hover{padding:2px 12px;background:green;border:1px dotted #d5a5a5;color:white;font-style:italic;}
.side_childlinks ul a:active{padding:2px 12px;background:green;border:1px dotted #d5a5a5;color:white;}
If you read the "CSS and child classes" you probably got the idea of what we were doing here.
parent class is "side_chillilinks".
So if you want to control that list only you should put it before the other classes:
.side_childlinks ul so it will effect only the ul which is inside the parent class, and so on with li and a (links).
Now, all is left is to add those classes to the skin.css.
After you have added the classes to your skin.css open the child links module insert the code from above to the template html and start playing with it live, using the web developer toolbar for fire fox, for example.
Here is how it looks with default styles:
That is how it looks with the classes we have added:
A few notes:
If you prefer you can replace the [LINK] with the [ICON]. It already contains the "alt" part of the img tag inside of it.
Other wise you will have to add an alteration for the image in case someone or something can't "see" it.
Like: <li><a href="[LINK]"> src="/images/anyimage.png" alt="[DESCRIPTION]</a></li>
Or as simple as:
<li><a href="[LINK]">[ICON]</a></li>
Also important: In the css above there is no difference between the a:link and a:visited for example. You must copy it other wise dotnetnuke takes/inherits classes from the portal or default css and you won't be able to understand where that bug is coming from. as you can see I had to add the "content pane" as a parent other wise I was not able to get clear of those inherits.
Good luck!.