Intro
In this blog I want to give an example of what can be done with Modules that support templates.
1. To show designers / (custom) skinners, there is a lot you can do without hardcoding it in the skin.
2. To convince module developers, they will make their module a lot more flexible and useable if they support templates.
Example
A question I have seen quite often in the skinning forum is, "how do I create the icons on top of Dotnetnuke.com".
Although hard coding this in the skin is easy the disadvantage is that you have to edit the skin to change the icons.
As an example I want to show how this can be done using the Announcements module (4.0+).
An Announcement can have a Title, Image, Description and Link, exactly what you need for the icons.
Templates in combination with CSS give you virtually unlimited options to style them.
The advantage is that an admin can add links and / or upload new images.
The result I'm after is this:
(My favorite open sources tools, besides DNN)
I had to use some "don't try this at home" techniques to show the result in this blog BTW
The Template I used:
Header Template
<div class="MyLinks">
Item Template
<div class="MyLinkBlock">
<a class="MyLink" href="[URL]">
<img src="[RAWIMAGE]" alt="LinkIcon" />
<span class="MyLinkTitle">
[TITLE]
</span>
</a>
[EDIT]
</div>
Footer Template
</div>
<div style="clear:both;">
</div>
You would have to add this in Module Settings > Announcements Settings
I'm using divs and float:left to get them horizontal, the div with clear:both (in the Footer) is needed to clear the float, so the MyLinks div gets the right height.
To keep this XHTML compliant all elements inside the link <a> have to be inline elements, and their rendered as block elements using CSS (display:block).
Without the CSS this doesn't look like the example but with the CSS it does.
CSS
.MyLinks a img{
border:none;
}
.MyLinks a, .MyLinkTitle{
display:block;
color:#F00;
}
.MyLinkBlock{
float:left;
width:60px;
text-align:center;
}
.MyLinkTitle{
padding-top:5px;
font-weight:bold;
}
a:hover.MyLink .MyLinkTitle{
color:#000;
}
.MyLinks a:hover img{
opacity:0.7;
}
* html .MyLinks a:hover img{
filter:alpha(opacity=70)
}
You would have to add this CSS to one of the CSS files;
-portal.css (using Admin > Site /Settings > Style SheetEditor)
-skin.css
I change the opacity of the image if a link is hovered, but you could also change the image, or use a background image and change that on hover.
You would have to use:
<span style="background-image:url([RAWIMAGE])"></span>
In your template for that.
You can think of many more applications for the announcements module and I hope it shows modules can be styled in many ways as long as they support Templates.