DotNetNuke

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.

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.

How to add an ICON area for dotnetnuke containers

rick@rhoek.com — Sun, 28 Oct 2007 23:30:10 GMT

After recently receiving an email regarding icons not showing up in my template DNN containers, I thought it best to explain why they aren't included in my current container packs, and the solution for including icons if they are necessary (This is a small piece of HTML that needs to be added to the container .html file in the skin pack).

1. The reason they're not included in my current container packs is so the design of the containers won't break when icons that are too large for the space provided is used. Understandably the main point of templates is to offer the most amount of functionality within the skins, however I felt that this wasn't one of the main pieces of functionality that the containers needed to provide so I didn't include it.

2. The solution for including the icon space in the container skins - As with all the dynamic areas of dotnetnuke skins, this is added during the design process through a DNN skin Token, in this case the [ICON] token within the container skin HTML file.

If you unzip the main container skin files and locate the html for the specific container you are adding the icon to, and open this so you can edit the html. Find the area within the html code where you would like to see the icon, I'd assume this to be somewhere near the [TITLE] token if you are going with popular trends in design. Insert the [ICON] token, including the brackets and save the html. replace the existing html file in the upload zip with this new one and upload the whole skin file as a container upload if you're uploading individual containers, or a skin file if the containers are part of a skin upload. the dotnetnuke framework will now parse this new information and update the container.

Now when you select an icon for a container it will show where you inserted the [ICON] token.

Web/Site search options - how to turn them on and off in your XML file

rick@rhoek.com — Sun, 23 Sep 2007 14:58:35 GMT

The search functionality of DNN has recently gone a good upgrade, which has seen it include the ability to search both the local site and the entire web.

Being a skin designer this has posed slight constraints on my previous designs as it requires additional space for two new form controls. This additional space has pushed some of my previous designs to breaking point and I've therefore been on the hunt for a method of turning this functionality off, rather than simply hiding it with css.

Below is the required code, to be placed in you skin XML file, for turning the display of these options off, as default the search will still cover the local site so there's no need to worry about having them not show as long as you don't need the ability for web search.

[SEARCH]


showWeb
    False


    ShowSite
    False

Performance setting issue (04.05.03)

rick@rhoek.com — Wed, 19 Sep 2007 18:11:33 GMT

A couple of days ago I went to the effort of adding a couple of blog entries, and decided to try and make my site perform a little better, or at least change some settings and see if there were any noticeable improvements.

So ahead I went and looked in the host settings, checking out the options for performance and proceeded to swap them around. After publishing the tweaks I left the site alone so my cache wouldn't pick up the saved version of the site instantly and came back to it every now and then to see how things were speeding up.

Well they didn't really, if anything the site was reacting slightly slower than usual, so I went in and tried to change the settings back. To my dismay, by my changing the Page State Persistence: to Memory I'd created a bug in my site that stopped it from working (at this point I couldn't make any changes as none of them were saving).

After panicking, thinking that all was lost I ended up having to restore the db back to a copy from the day before and it was sorted. All that is except for the additional blog entries which I'll add again shortly. So if you're thinking of making this change please be careful otherwise you may need to make a restore back to an older version.