Contact

DotNetNuke Tips for Skinning, CSS, and Design

Ralph Williams Blog

Author: Created: Wednesday, June 10, 2009 8:17 AM RssIcon
RalphWilliams.com blog focuses mostly on skinning DotNetNuke websites. Tutorials for design, CSS, skinning, and some use of the DotNetNuke modules.
By Ralph Williams on Monday, June 10, 2013 4:04 PM
So far we have set up our DNN skin to use Bootstrap, as well as create the basic scaffolding of our skin.

With the advent of the DDRMenu to DotNetNuke, we have had much more control over what is rendered by the menu. This has allowed for a much more semantic menu and custom styling for simple menus to mega menus. There are various ways to create the template that the DDR uses but we will be using the token based templating as it is very simple.

Menu Template (Bootstrap Nav) I copied the Simple folder from the Gravity skin that comes with DNN 7, which includes a manifest file “menudef.xml” and the “SimpleToken.txt” file. I updated the SimpleToken.txt file as follows: Note: this isn’t a tutorial on DDRMenu, just how to implement Bootstrap.

...
By Ralph Williams on Monday, June 10, 2013 12:26 PM
Creating a responsive DNN skin requires some upfront planning. Based on the complexity of your site’s design, this could be just a simple wireframe, or full design comps for mobile, tablet portrait and tablet landscape. As a matter of fact, if you are starting with a fresh design, it would be a good idea to think about designing your site with a mobile first design approach. If this doesn’t sound like fun to your graphic designer, I don’t think starting in Photoshop with mobile is required. I would start the wireframe process with mobile first, then start moving up in device size. This way the important content is thought of at the beginning and the mobile user won’t be treated like a 2nd class citizen.

Once you have your design, it’s time to start skinning!

Scaffolding with Bootstrap After setting up Bootstrap in your DotNetNuke skin,...
By Ralph Williams on Monday, June 10, 2013 9:32 AM
Creating a responsive skin can seem like a large task to take on when you think about the fact that there are several views to create using the same content. Now, I typically have not been a big fan of using HTML grid systems as I have felt I am able to write a much more lean skin on my own. However, with the new requirements of having flexible skins for multiple devices, I have felt that it is better to use a tool that helps me to be able to achieve great skins with only a bit of overhead.

Bootstrap is a grid system that is technically a 960 grid with views for devices with smaller screens such as tablets and mobile phones as well as a view for larger screens. Bootstrap allows for true responsive (fluid) layout as well as adaptive (what I call step-down) layouts. I tend to like to use the adaptive layout as I feel it still gives me a bit of control on my layout for each targeted screen size.

Why did I choose Bootstrap? There are several grid frameworks out there that give you some tools to structure your responsive skin. However, Bootstrap is not just a grid system. It also has a lot of different components that are available to help in making the process much easier. Instead of having to create controls and JavaScript for things such as a collapsible menu on mobile view, if you structure your menu as Bootstrap does, it just works! Of course, you can still customize your menu on top of what is there with your own CSS and JavaScript, but it really just simplifies things quite a bit.

Implementing Bootstrap into DotNetNuke Before we can actually begin skinning our design, we must build our Bootstrap package. The Bootstrap website has a great tool for customizing your Bootstrap package for whatever configuration you have. As I mentioned previously, there are quite a few components in Bootstrap and including the whole mess can really provide some overhead that you just don’t really need. You can go through the Customize page and un-check all of the components that you feel you  will not be using. Also, on this Customize page, are quite a few variables that can be adjusted to fit your project. For example, column and gutter widths for each step in screen size and colors for the components that you included in your package.

Once you have customized your package, click the download button at the bottom (it’s ridiculously large and blue). This zip file will include 3 folders for CSS, JS and images.

I typically create a “js” folder within my skin folder and extract the zip file in there so that the path is (relative to root) /Portals/[PORTALID]/Skins/[SKINNAME]/js/bootstrap/(js/css/img), where [PORTALID] is either _default or your portal name and [SKINNAME] is the name of your skin folder.

References and Dependencies in the Skin Now that we have our Bootstrap in place, we can start getting into the actual skin. Create a new skin file (ex. Default-Layout.ascx) and insert the required declarations for your skin and skin objects.

Below are the common ones that I use:

...
By Ralph Williams on Thursday, April 18, 2013 10:28 AM
FriedDNNLogoI am a geek. One of my favorite things to do each year is to go hang out with a  bunch of other geeks and talk about a product that I use at work, DotNetNuke. But, DotNetNuke is much more than a product or tool, it’s also a community of great friends. Last weekend was Southern Fried DNN, an event that wrapped a day of hands-on training with the Day of DotNetNuke....
By Ralph Williams on Wednesday, August 08, 2012 3:44 PM

rewind-accordionA while back I posted how to set up The Announcements Module and jQuery as an Accordion. I decided to revisit this and update it for DNN 6. This method makes use of the built in DotNetNuke 6 styles so that your site will be consistent throughout. I’ve also documented how to Turn DNN Announcements Module into a jQuery Slider.

By Ralph Williams on Friday, June 08, 2012 9:01 AM

Last weekend I attended and presented at the Charlotte Day of DotNetNuke. This is my third Day of DotNetNuke that I was able to attend and present. Actually, the Tampa Day of DNN 2009 marks my first time presenting on DotNetNuke. These events have been great on balancing experienced, known experts as well as locals who are new to speaking at these community events.

I have been hearing a lot of praise for this year’s event being the best yet, and I must completely agree with that! The level of effort and quality that went into this event was amazing. It seems like each event builds on the last and only keeps getting better. This year the Queen’s City DotNetNuke User Group was in charge of organizing the event and I give them a lot of props!

By Ralph Williams on Monday, November 28, 2011 9:02 AM
dnnworldThis year marked the first year that I was able to attend the annual, official DotNetNuke Conference. And what a conference it was! This was the first year that DotNetNuke decided to host the event apart from the Microsoft DevConnections and they did a fantastic job!

There were several high points around the conference. The sessions were great and I was able to gather some important information in many different aspects of DNN including some insights...
By Ralph Williams on Thursday, October 06, 2011 3:16 PM

BruceMosherWith the latest major update to DotNetNuke, there have been some questions as to what has changed in skinning for DotNetNuke 6.0. One big change has been the introduction to the new Manage button automatically into the containers. Some love it, some hate it, and others seem to still be undecided.

By Ralph Williams on Friday, July 22, 2011 10:26 AM
I got the inspiration for this blog about 8 months ago from a Smashing Magazine article entitled, “Designing for Content Management Systems”. So, why write another blog but, specifically for DotNetNuke? Well, they did a great job on their post but, they were generic to just CMS’s in general, and we all know that DNN has some challenges of it’s own.

The main challenge that I have found to be when designing for DNN, is planning for unknown content. You just never know what’s going to happen once you hand the keys over to the client. So, a lot of my designing is actually trying to plan ahead for the many different amounts/content of what could be added to the site. This includes not just content panes, but also menu items. For some reason, once a client gets access to adding their own content, one of the first things they do is create new main menu items. Now, some of my designs have been very specific and the site structure has been discussed w/ the client and they actually understand that they need...
By Ralph Williams on Thursday, June 30, 2011 10:55 AM

Be forewarned, I WILL be throwing out some link lovin’ in this post because I owe a lot of thanks for all of this.

Arrow-Consulting-and-DesignWednesday, May 18th marked a brand new chapter in my professional and personal life. I started working with Arrow Consulting and Design!

Way Back When

A little backstory on me… I used to drive trains; I was a conductor and then engineer at CSX Transportation for 8 years. I decided there was more to life than working on call 24 hours a day, 7 days a week, 365 days a year with only a 2 hour notice. Not fun. So, I decided to do the next closest thing, web design…

By Ralph Williams on Friday, October 22, 2010 9:51 PM

I have found another great use for the DotNetNuke Announcements module and jQuery. Using it create a dynamic accordion. In case you missed it, this is the second time that I have gotten the DNN Announcements module and jQuery together. See my previous post on how to Turn DNN Announcements Module into a jQuery Slider.

This time, I needed to create a solution where I could have a jQuery accordion yet it could be easily updated by the client. So, I thought about the different core modules that were available and picked the Announcements module due to the ability to easily template it out. Now, if only the DNN Blog module were fully template driven (*hint *hint). This module has spots to place a header, repeatable item, alternating repeatable item, separator, and footer. We will be using only the header, item, and footer.

By Ralph Williams on Friday, September 24, 2010 12:04 PM

The problem I was having.

I was working on making some visual changes to Blog Calendar and Blog Categories modules through CSS yesterday and was getting very annoyed having to use the ID that DNN generates to get any specificity for those modules. These modules, along with quite a few other core and non-core modules, are not what I consider “skinner friendly”. They use generic styles and are set up to display the way the developer wants it to show up, not the way I want it to, i.e. tables, inline styles and no use of module specific class names.

One thought that came to mind was to create a container for each module with a class name in the container so that I could specify that module when in that container, but that would mean that I would have to create several new containers, and everyone knows excessive containers can be very annoying and confusing.

By Ralph Williams on Wednesday, September 15, 2010 9:29 AM

Building Websites with DotNetNuke 5Earlier in the year I was contacted by PACKT Publishing to review an upcoming DotNetNuke book, Building Websites with DotNetNuke 5 by Michael Washington and Ian Lackey. This was my first book review, but there was no way I was going to turn down a chance to check out a new DNN book!

I received the book leading up to a holiday weekend and thought it would be a perfect opportunity to dive headfirst into it. I began reading it and saw very quickly that it was a book that would be a valuable resource for an Administrator of a DotNetNuke website or someone who is just getting into DotNetNuke. To be honest, I had been hoping for something more advanced, but it was a very comprehensive book for a beginner. And, I only read the first half of the book. But, more on that later.

By Ralph Williams on Thursday, June 03, 2010 10:34 PM

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

By Ralph Williams on Friday, March 12, 2010 9:34 PM

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.

By Ralph Williams on Thursday, March 11, 2010 11:38 PM

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.
By Ralph Williams on Thursday, March 11, 2010 11:34 PM

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.

By Ralph Williams on Thursday, February 25, 2010 11:19 PM

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.

DotNetNuke Menu as an Unordered List

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.

By Ralph Williams on Thursday, February 25, 2010 12:00 PM

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

By Ralph Williams on Wednesday, February 17, 2010 1:08 AM

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.

Send me a message.

Name:*
Email Address:*
Message:*
Security Code:
CAPTCHA
Enter the code shown above in the box below
* required Submit   Cancel