Custom Dotnetnuke (DNN) Skin Design

DNN skinning and WEB design blog

picnik

While searching for web2.0 apps I came across this really nice piece of image editing software called picnick (www.picnik.com), which definately deserves a post in the cool sites category. It comes as a free version and an annual subscription based  premium alternative, boasting some fairly impressive tool sets to keep you entertained in the realm of non-technical post-photo-shoot tools for cleaning, and adding style to your photography.

I have been designing and building dotnetnuke skins for a while now, and I would like to offer my skills as a designer to the dotnetnuke user base.

If you're interested in finding out how I can help you with a custom DNN skin design, send me an email with information about your project and I will get back to you.

After having spent ages reworking the layout code and customising the blog module to fit into the new design of the rhoek.com layout, along comes another improved version of the module.

Released on the 8th of January this upgrade boasts many fixes and layout changes that are sure to please all of us using this module as opposed to the mainstream solutions such as movable type and wordpress, bringing the dotnetnuke solution closer to their likes in terms of functionality and layout.

Get up-to-date with the changes to the module, in the DNN blog release notes.

Download the blog module from dotnetnuke.

I'll be upgrading to the new version of the blog module within the coming weeks, because reckon I'll need to make some changes to the layout to keep it in-line with my new design, so I'll probably need a full day to work on it. I'll post after the change for two reasons:

1. to see how it performs, and; 
2. to let you know how it went during the upgrade.

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

 

 

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
Sunday, March 14, 2010