Custom Dotnetnuke (DNN) Skin Design

DNN skinning and WEB design blog

As you'll notice if you've visited this site before, I've just swapped skins to a new css based, Search Engine Optimised, sleek design.

I'll be making some amendments to the content, and further customising the blog module so it's laid out more like I want. However in the mean time I'd be really interested to find out what you guys think of the new design, so please leave a comment.

I'll be adding another post after I've finished all the customisation, outlining the advantages of the new design, and letting you in on a few future ideas.

I recently added a rollover effect to my site logo (if you rollover the rhoek.blog logo at the top you should see what I mean), and here's how it's done.

Overview.
The effect is created by using a transparent image for the physical logo uploaded to DNN and then using CSS to add a background of the logo image. This background contains both states of the rollover, the normal view and the rollover effect, which is then re-positioned using the a:hover pseudo-class, to create a rollover.

Step 1. Create the logo background graphic.

background image

Using photoshop, or whichever graphics package you use for creating artwork, design and layout 2 versions of your logo,1 for each of the 2 states. The key to remember here is that only half of the image will show at any one time, so make sure that the image is twice the height of the logo you use on your site, also make sure that each state is centered within its half so they line up when the effect is complete.

Image Sizes:
For the example shown my physical logo size is 225px x 78px and the backgr ...

Recently I had an enquiry into one of my container packs not centering content properly.

The Glossy Titles Version 4 containers are almost completely css based with only one table being used for the content pane. It turns out that the table was not 100% wide, and therefore when the content was aligned to the center using the settings in the module options, which adds a css class style of text-align:center, there was no effect because the containing element (the table cell) was collapsed. So having fixed the issue of the table not being 100% wide, I tested the containers on other browsers, to discover that the alignment doesn't work for firefox, opera, navigator, or safari.

The reason for this is that these browsers don't use the text-align css styles to align box elements like divs, tables and forms. To achieve centering for these items, which will work for many o ...

If you're looking for an email design service focused towards the DNN bulk email facility, this is a great place to start. The designers here will take your project from initial brief, through design proposals and refinements, to a finished HTML email which you can send through your dnn bulk email facility (also known as the newsletters facility).

DNNmail - Dotnetnuke email campaign design

We designed their skin and they designed our first newsletter.

Visit their site for DNN email design.

I've decided to add a new category to the blog for websites that I think need to be seen, not just for great design, but also for their relevance to website development.

The first one in here has to be the dotnetnuke website because it's where all the amazing stuff going on at DNN is put online.

I then have to mention snowcovered, because it's a great place to get DNN related stuff, especially my template skins and container packs.

Not all the listings in here are going to be for Dotnetnuke related sites, I will be adding links in here to pretty much any site which I really like, for instance the adobe labs Kuler site which I think is an amazing piece of web design resource for getting ideas, and inspiration regarding colour palettes for proposals.

 

 

Rhoek.com's design blog focuses on web design and dotnetnuke skin design.

We've been designing and developing websites and custom/template dotnetnuke skins since 2003 and have experience in X/HTML, CSS, javascript, DNN skinning, XML, XSLT, accessibility, usability, email design and building, and Search Engine Optimisation.

Login
Friday, March 12, 2010