RalphWilliams.com

Turn DNN Announcements Module into a jQuery Slider

me@ralphwilliams.com — Fri, 04 Jun 2010 03:34:00 GMT

DotNetNuke has come a long way recently with making things much more w3 compliant. This has allowed for more than just cleaner code; it has also allowed for much more control of your website through jQuery and CSS. Also, according to the forums, it looks like things are getting even better for compliance and control.

One of my favorite updates of DNN modules to this new compliance, is the DNN Announcements module. With the latest release, we now have the ability to set up the announcements as a list and apply some cool jQuery to it. When I started looking into what I wanted my slider to be, I decided that I wanted to have my main image fade in and out and the title and description to slide in from the bottom. I came across the s3Slider jQuery plugin which seemed to provide exactly what I was looking for.

I have outlined the steps below on how to add it to your site. I did not go into much detail on how things are set up...

Tags: slider,jQuery,CSS,skinning,announcements

Category: Skinning

Category: jQuery

Create a non-Award Winning DotNetNuke Skin (pt. 3)

me@ralphwilliams.com — Sat, 13 Mar 2010 02:34:00 GMT

This is part of a three part series on skinning my Reasonable Design Skin from the 2010 DotNetNuke Design Challenge Skinning Contest.

Part 1 was Slicing the design for the DNN Skin.

Part 2 was writing the HTML for the skin.

Here, in part 3, I will go over the CSS for the skin. If skinning with CSS is new to you, be sure to check out my post An Introduction to Skinning in CSS for DotNetNuke.

The CSS

Now that we have all of the HTML in place, we need to style it. The first thing that I do, is to apply my “pre-fab” tools. I will not go into much detail with these as there are plenty of available resources out there.

Category: Skinning

Create a non-Award Winning DotNetNuke Skin (pt.2)

me@ralphwilliams.com — Fri, 12 Mar 2010 04:38:39 GMT

Continued from Part 1 – Slicing the Design.

Setting up the HTML for my skin.

Because of some of the design elements that the annoying designer (me) had in the design, there is a small bit of complexity to it.

There are a few things at work here.

the content area needs to be centered on the page, which means it needs to be wrapped in a div that is centered.
To center a div, you must set a specified width and set the left and right margins to auto. (ex. margin:0 auto; shorthand for margin-top:0px; margin-right:auto; margin-bottom:0px; margin-left:auto;)
the gradient spans the full width of the page in the lower content area that holds the bottom three content panes.
The footer does the same thing.
I want the footer to always be at the bottom of the browser.
I want to use as little code and nesting of divs as possible.
It needs to act the same across all browsers.

Category: Skinning

Create a non-Award Winning DotNetNuke Skin (pt.1)

me@ralphwilliams.com — Fri, 12 Mar 2010 04:34:00 GMT

So, I entered into the 2010 DotNetNuke Design Challenge Skinning Contest with the Reasonable Design Skin. I didn’t win. But, to be honest, that isn’t such a bad thing. I was pretty happy with my entry and even I didn’t think that mine was the best, not even in the category of Personal that it got entered into. This means that there are quite a few of other DotNetNuke skin experts out there. The quality of DNN skins are definitely going up and I see no reason as to why DotNetNuke should be considered sub-par in terms of flexibility in design.

Earlier, I gave an Introduction to Skinning in DotNetNuke with CSS which discussed the basics of laying your site out with Divs and CSS, completely eliminating the need for tables in your layout. So, I figured that I would go more in depth and walk through the skinning process of my (non-award winning) skin.

Slicing The Design

The first thing that I needed for this contest was a design. Most of the DotNetNuke sites that I skin are template designs that I have bought, so creating the design was the first obstacle. Once I finally settled on something I liked, it was time to start slicing the design. I typically use Adobe Photoshop for all of my design work, including skinning, but I realize that it is a bit expensive. Another one that I like, especially the CS4 version, is Adobe Fireworks. Definitely not the cheapest, but personally, I like it.

Category: Skinning

Rendering the DotNetNuke Menu as Unordered List & Styling It

me@ralphwilliams.com — Fri, 26 Feb 2010 04:19:00 GMT

When I first started using DotNetNuke, it was somewhere in version 3.x. Learning this new system was a bit of a challenge at the time. Probably my biggest issue was the core, SolPart menu. I had so much trouble with it. Not much later our company switched to the RadMenu by Telerik, and I never looked back for about 4 years. That is, until I was working on my skin for the DotNetNuke Design Challenge. I wanted to use the core menu and did some digging to find a post on the DotNetNuke forum (see Jan Olsmar’s post) discussing how it can be rendered as an unordered list. You can also check out the blog post by Mike Van der Meulen “New CSS Menu Features In DotNetNuke 5”. This blog gives a nice description on the available attributes and class names which I will be referring to in my style sheet.

Half of the Battle

Okay, getting the menu to show up as an unordered list is great! But, that just means you get an ugly bulleted list of your menu. Enter Css. We can make our bulleted list look just like a normal menu. As a matter of fact, this is the accepted, or should I say, expected way to display a website’s menu.

Category: Skinning

What I add to a Fresh DotNetNuke Installation

me@ralphwilliams.com — Thu, 25 Feb 2010 17:00:00 GMT

I was setting up a new install of DotNetNuke today and started thinking about what modules do I add to my install before working on it.

Here are some that I add right away (These are all FREE - although, please consider donating to them):

Category: General DNN

An Introduction to Skinning in CSS for DotNetNuke

me@ralphwilliams.com — Wed, 17 Feb 2010 06:08:00 GMT

Recently we started a new DNN User Group in Tampa, the DotNetNuke Tampa, and at our first meeting we discussed what topics we should talk about. One that sort of surprised me was the topic of skinning in DNN. I guess that I have started to take for granted what I have learned in the past few years. But as I looked back, I realized that it has been a rough long road to where I am today.

When I first started at my job, I had not heard of DotNetNuke. So, I had to learn all of the basics of skinning and how to add that to what I knew about making a website, which wasn’t much. Right about the time that I started to get the hang of it, I realized that I could produce better sites by skinning without the use of tables. So, just switch from using rows and columns to boxes. Simple, right? No way! I struggled and struggled and struggled and finally gave up. Shortly after giving up, we hired an Internet Marketing manager and the first thing he told me was, “Those tables have gotta go!” Needless to say, that friendship was off to a rocky start!

So, why did I have to change? Well, I shortly became educated that search engines put higher weight on information that is at the top of the page. I started looking at my code and saw that my actual content was not at the top of the page, but was quite a ways down. Not only that, now that I have embraced the tabless skinning, I feel that I have much more flexibility and it’s much easier to tweak. I realized that it was time to bite the bullet and make the change. There were a few things that really seemed to hold me up as I went down this new road of tabless skinning.

Category: Skinning

Striking a Balance between Design, SEO and DNN - Part 2

me@ralphwilliams.com — Thu, 03 Dec 2009 05:34:00 GMT

I have been seeing quite a few references to Google talking about website speed lately. It seems as though Google is going to consider your websites speed in an effort to "make the web faster." (read article here) I like it.

I think there should be more of an emphasis on making the web more usable and speed is a major factor. This can seem like a challenge when it comes to DotNetNuke because so much of it is out of our hands (mostly because I am a designer and skinner, not a programmer).

Category: SEO

Category: Skinning

Dynamic Quick Links with DotNetNuke and Telerik RadMenu

me@ralphwilliams.com — Thu, 15 Oct 2009 23:43:00 GMT

"It needs to be dynamic." That is what my boss is always saying to me when it comes the newest bit of usability that I want to add to my latest DotNetNuke site. He keeps telling me that whatever I do, it needs to be automatic for our client using the website. So, the latest bit of usability that I wanted to add was, having a list of quick links in the footer of each page. Basically, I wanted to take the clients services and make them a list in the footer and hey, DNN should allow me to do this easily, right?

I posted this question to Twitter and received no response, other than someone else was looking for and answer as well. So, I had to do some digging on my own. Ugh. I am using the Telerik RadMenu and went through the Skinning Whitepaper. I finally came across the ShowOnlyCurrent attribute which didn't sound like what I wanted. This is great for sub menus and I use this all the time. But, this great tool also allows you to use specific page's child items. Perfect! So, here is how you do it:

Category: Skinning

Striking a Balance between Design, SEO and DNN - Part 1

me@ralphwilliams.com — Thu, 24 Sep 2009 15:00:00 GMT

Something that constantly comes up for me while working on a DotNetNuke Site as a designer, is making the site look good, being friendly toward the Search Engines and yet still keeping all of the dynamic capabilities of DNN, which is why we use it, instead of straight HTML, right? I have come across a few little tricks in which I will share in my next few posts.

One of my favorites is also very simple. It replaces the default title of a container. Doing this will remove a decent amount of the code bloat around the title, leaving it open to place directly into a header element of your choice. This also leaves it open to more easly target your title with CSS, without having other classes and elements getting in the way.

Category: Skinning

Category: SEO