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'> 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. 
|