DNN skinning and WEB design blog

Picnik - edit photos the easy way, online in your browser

Mon, 24 Mar 2008 19:49:38 GMT

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.

Custom Dotnetnuke skin design

Mon, 24 Mar 2008 19:17:12 GMT

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.

New Version (03.04.00) of the DNN Blog module available.

rick@rhoek.com — Sat, 09 Feb 2008 13:14:05 GMT

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.

New CSS based DNN skin and Blog customisation for Rhoek.com

Thu, 24 Jan 2008 17:27:48 GMT

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.

DNN site logo rollover effect

rick@rhoek.com — Sat, 19 Jan 2008 12:38:49 GMT

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.

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 background image size is 225px x 156px.

Note: If the two states don't line up you will notice a jump when the rollover occurs, if this is the case you'll need to move the logo in the artwork and re-upload the graphic used as a background.

Step 2. Upload the transparent logo.
Create a transparent gif the same size as your site logo (in this case 225px x 78px).

Through the site settings in the admin menu upload this image and set it as the site logo.

Step 3. Pointing to the logo image within the CSS.
The method for pointing the css to the image is known as targeting and to do this we can either apply a css class within the skin, surrounding your [LOGO] token, or add this as a css class to the XML file. In this example I've previously set the skin to have a css class so we'll use that. I'll explain at the end how to add a css class to the XML.

Within the HTML at the time of writing I have given the table cell containing the logo an id of "Logo".

To target the logo image you would tell the css to look within the "Logo" table cell for an anchor link containing an image.

td#Logo a img

Note: If you decide to use a class as opposed to an id replace the "#" with a "."

Step 3. Upload the background image.
Before we apply any css to the logo we'll need to upload and determine the url for the image. Use the DNN file manager or an FTP client to upload the image, then using your browser navigate to it. In this example, at the time of writing, the logo is in the root level of the server, so I can navigate to it through http://www.rhoek.comhttp://www.rhoek.com/portals/0/rhoek-logo-bground.gif. In the css I'll be referencing this relatively so I'll use /portals/0/rhoek-logo-bground.gif although an absolute path, as above, could be used.

Step 3. Creating the CSS.
When you are creating additional CSS for your dotnetnuke site, this can be added through the stylesheet editor in the site settings of the admin dropdown.

Within the css you'll need to determine 2 states to apply to the linking image background, one for it's general appearance and another for the rollover.

General

td#Logo a img{
background:url(/portals/0/rhoek-logo-bground.gif) scroll no-repeat top;
width:225px;
height:78px;
}

You can see here that we have applied the image for the logo as a background, not repeated it, and positioned the image to the top. As the physical image is transparent, this background shows through. We've also added a width and height because these aren't specified in the actual HTML img tag, and it's best practice to have these present.

Rollover

td#Logo a:hover img{
background:url(/portals/0/rhoek-logo-bground.gif) scroll no-repeat bottom;
width:225px;
height:78px;
}

Here we have changes the position of the background so it is positioned bottom. It is this change of position which creates the rollover effect.

Additioanl Information.

Adding css class to [LOGO] in skin XML file.
To specify a css class for the logo within the xml file, add a CssClass node to the token within which you can specify a CSS class name.

[LOGO]

CssClass
LogoCss

Image flicker in IE6.
An issue which occurs in Internet Explorer 6 is that it reloads background images if you change their position in the CSS for the rollover. This site shows you how to overcome this issue - http://www.mister-pixel.com/#Content__state=is_that_simple

Centering content in modules

rick@rhoek.com — Sun, 13 Jan 2008 14:50:45 GMT

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 of the standard modules (I've tested it on the login, feedback and others), you will need to target the box elements using css, and give them a margin setting of "0 auto", this will align them to the center of the container.

.DNNAligncenter table{
margin:0 auto;
}

If you are using Glossy Titles v4.0 the files on snowcovered has been updated with the new .zip for you to download.

DNNmail - Dotnetnuke email and newsletter campaign design

Mon, 31 Dec 2007 15:14:42 GMT

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

We designed their skin and they designed our first newsletter.

Visit their site for DNN email design.

Hot designs in the cool sites section

Sun, 02 Dec 2007 23:22:49 GMT

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.

Newsletter #01 - December 2007

rick@rhoek.com — Sat, 01 Dec 2007 14:24:59 GMT

View HTML newsletter

First official Rhoek.com Newsletter

Sat, 01 Dec 2007 13:36:12 GMT

I've been thinking of having a Rhoek.com newsletter for a while now (a way for me to keep you informed of developments in the site and new skin releases), and anyone who's visited the site recently may have seen the register button I added a couple of weeks ago, some of which have signed up. So thanks to everyone who has registering with the site, and today I sent out the first monthly rhoek.com newsletter.

For those who haven't signed up I'm going to be including a link to the HTML version after each issue, links for these will appear in the blog and on a new "newsletter" page which I'll add shortly.

So here it is - the first rhoek.com newsletter.

If you're interested in signing up for the newsletter you can register with rhoek.com here.