Tableless Banners in DotNetNuke
Categories: DotNetNuke |
Author:
David O'Leary |
Posted:
6/9/2010 |
Views:
7532
A quick conversion of the DNN Banners Module to Tableless Display
We've been working on our first site that really makes heavy use of DotNetNuke's Banners module for displaying revenue generating ads. Today I was trying to get the banners module to work for a Newsletter piece (more on that later) of the site that has a very tight layout but the way Banners is implemented didn't allow me to do what I needed. Currently, the banners module renders banners in a table and the only way to add spacing between banners is by setting cellpadding and/or cellspacing. We needed a solution where we could ad space between the banners without adding space on the sides of the banners. This wasn't possible with the current implemenation (other than by adding whitespace to the banner images which we didn't feel was a good solution) so we needed another solution.
I could have gone in and made a couple quick changes to the banners module to get it to do what I needed but then, we would've have had to reapply the changes every time we upgraded the site.
Instead, I spent about 10 minutes creating a new module based on the existing banners module. Luckily, DNN makes this easy.
The change to the code is the easy part (though really it was all very easy). I just changed the RepeatLayout attribute for the DataList to "Flow" instead of the default "Table" and then added a class to the label within which the banner is implemented.
The more involved process was copying and renaming the files and class. In all though, it took less then 10 minutes to think up and implement this solution.
The following steps assume you have a decent understanding of DNN's Module Definitions. This isn't really intended for novices as they generally won't understand the whole point of this.
The basic steps you need to take are:
- Find the code that drives Banners module. The code consists of only two files, banner.ascx and banner.ascx.vb in the Admin/Skins directory.
- Create a new directory under the DesktopModules directory called TablelessBanners and copy the two banner files into the new directory.
- Rename the files to TablelessBanner.ascx and TablelessBanner.ascx.vb
- Update the class name in both the ascx and ascx.vb files to TablelessBanner (instead of Banner). You could also just change the namespace instead. Just something to avoid duplicates.
- In the ascx file, add the following to the DataList definition, RepeatLayout="Flow". This will cause the DataList Control to render semantically rather than as a table.
- To the lblItem label, add, cssclass="tablelessBanner".
- Now, in one of your css files (usually the css for your skin), you'll need to define the styles for the tablelessBanner class.
- Now you just need to create the module definition for the module through the Host->Module Definitions page and add the new module to your page.
That's it. You should now be able to style your banners the way you want through your class. You can of course modify the code further to give greater flexibility in rendering and layout.
I'm hoping to develop this module further and then make it available as a free download and/or donate it to DotNetNuke corp for inclusion in the core.