Like me on Facebook Follow me on Twitter Register or    (Why?)
You are here Articles

All modules are now open sourced, please see the announcement here

 

Articles

20

One of the questions I get asked most frequently is whether the Aggregator module can be made to look a specific way. In this tutorial we're going to make some tabs that look much like the tabs on the Yahoo home page.

Ok, first thing to do is install a premade skin that I have named 'Yeehaw'. Download the Yeehaw.zip file and unzip it into the skins folder under the DNNStuff - Aggregator folder. You can find the zip file in the skins download folder located here.

Now that you've got that skin in place, add an Aggregator module to the page along with two text modules (or any other module you wish to place in tabs). Add the modules to the Aggregator, pick the Yeehaw skin from the dropdown and then save the settings. At this point you'll have a couple of white squares with the tab captions in them. You should see that they are starting to look similar to the Yahoo tabs.

Next, we're going to add the images. In a previous article I explained how you could add images to the tab caption and that's exactly what we're going to do. Go into Aggregator settings and click on the edit button for the first tab caption. In the caption field enter the following:

<img src='[DNN:ImageUrl]/icon_bulkmail_32px.gif' align='absmiddle'>&nbsp;Email

<img src='http://[portal:url]/images/icon_bulkmail_32px.gif' align='absmiddle'>&nbsp;Email

This html adds the image, then a space and then the caption 'Email'. Click on the save icon for the tab caption and then save the settings for the module. Now you should see an image in the tab. Go ahead and change the other tab in the same way and you'll end up with something like this. As you can see, the Aggregator module is very adaptive and can support many differing styles.

Yahoo style tabs for DNNStuff Aggregator module

 

Post Rating

Comments

Paul Momoh
# Paul Momoh
Sunday, October 19, 2008 8:45 PM
when I used the Yeehaw skin, what I got was the tab captions highlighted in bright green not the boxes as described. I pressed on forward and upon entering the code into the cation of the first tab, the picture did not show. I just got a red X with the word email. what I'm I doing wrong?
Richard Edwards
# Richard Edwards
Monday, October 20, 2008 11:47 AM
The Yeehaw skin was specifically designed for Aggregator 4.x. I'll try and update the skin as soon as I can for Aggregator 5.x.
Sorry about that.
bytewiz9 bytewiz9
# bytewiz9 bytewiz9
Sunday, January 4, 2009 2:13 AM
hi,
have you corrected this behavior in the 5 versions?
Richard Edwards
Sunday, January 4, 2009 4:17 AM
No, this still hasn't been updated.
Richard Edwards (h)
# Richard Edwards (h)
Tuesday, January 6, 2009 10:18 AM
The article has been updated to work with the latest versions of Aggregator. I'm now suggesting you use [portal:url] to build the url to the /images folder.
Richard Edwards (h)
# Richard Edwards (h)
Tuesday, January 6, 2009 10:28 AM
Spoke too soon. I can see a few other problems arising now. I'll fix it up and post again.
tam
# tam
Thursday, February 16, 2012 3:15 AM
hi every body .
i want make a module tabs by dotnetnuke.plesae help me!
can you add nick yahoo of me . anhmuonnoilahay@yahoo.com
Thank you so much !

Post Comment

Only registered users may post comments.
Privacy StatementTerms Of UseCopyright (c) 2004-2015 DNNStuff
Page generated in 0.3281238 seconds!