If this is your first skin, you really should be thinking about what editor you will be using. If you don’t already have an editor or the development environment for other coding you may be working with, the immediate choice that may come to mind is Microsoft Notepad, but there’s no need to put yourself through that type of abuse.
As we’re working with Microsoft technologies while working with DotNetNuke, the natural choice will be Microsoft Visual Web Developer (VWD) which is free. There are other choices for editors here, but VWD will be the one used by most in this context, so we’ll move on with it in our examples. If you are using Microsoft’s VisualStudio .NET (Microsoft’s premier development environment), you will notice that the screens and menus are virtually the same.
Before we can do anything, we’ll need VWD installed. If you have already installed VWD, feel free to skip this section. These are the steps for getting VWD installed:
If you encounter problems in the installation of VWD, you can find additional assistance at the http://forums.asp.net/discussion website.
E ven though we now have VWD and SQL Server, we’ll need the DotNetNuke files to set up before we can start skinning portals. Do so by using the following steps:
The following is what you should see so far:
If you encounter problems in the installation of the DotNetNuke starter kits, you can find additional assistance at the http://www.dotnetnuke.com website by clicking on the Forums link and then drilling-down to the Install It! link.
In almost any programming project, you will have two environments: the development environment and the post-deployed environment. While skinning, this is no different. Most likely, you will have a local computer where you work on your skin. When you are done with it and are ready to package and deploy it, itwill be installed on the target or live DotNetNuke website which will be your post-deployed environment.
To set up our development environment, fire up VWD. We’ll now create a new DotNetNuke install:
This is the screenshot of what you should see so far:
If you encounter problems in the installation of the DotNetNuke, you can find additional assistance at the http://www.dotnetnuke.com website by clicking on the Forums link and then drilling-down to the Install It! link.
Depending on the version of DNN you downloaded, you may experienced system message from DotNetNuke on the Home page titled Insecureaccount details. Although changing the default password as it instructs is always a good idea, it is not necessary on a development computer or a non-production implementation of DotNetNuke. However, if you don’t want it to nag you about it go ahead and change it.
This is our DotNetNuke portal that we will use to test the skins we will create. Move back over to VWD. Close the welcome page.
The skins for DotNetNuke will be found in ~Portals_defaultSkins. Go to that directory now as shown here:
Congratulations! You have now set up your development environment, and we are now ready for skinning.
We will now create a skin and record time. You may be impressed by how fast and easy it is for you to create a skin.
Remember when we downloaded the starter kits from DotNetNuke.com? One template is for creating a skin. As of the time of this writing, the current download’s template will produce a skin that looks just like the default skin. If this is what you’re looking for, you can achieve the same result by copying the DNN-Blue folder and renaming it to something else. Rather than doing this, however, we are starting from scratch.
[LOGIN][MENU]<div id="ContentPane" runat="server"></div>
Keep in mind that we only have one pane, the ContentPane. If this was a live site with modules on other panes, the positions may have been changed.
I know what you’re thinking: This has got to be the world’s simplest DotNetNuke skin. And you’re right. You may not be rushing to install this skin on your production portals, but you have created your very first operational skin!
Let’s go over what just happened, from creating our skin to seeing it in action. Skinsstart out as a simple HTML file. Just as with any website, an HTML file will have some degree of markup. Of course, we have not added much markup to our skin yet.
If you’re wondering from where DotNetNuke gets all the HTML structure such as the html, head, and body tags, take a look at Default.aspx in the root of your DNN install. This is the page used essentially everytime a page is served up. You can look in that file and find an ASP.NET element called SkinPlaceHolder. This is where our skin will be injected into each DotNetNuke page. Everything before and after this place holder is what will be served to any DNN page request no matter what skin is applied.
The code we entered for our skin is:
[LOGIN]
[MENU]
<div id="ContentPane" runat="server"></div>
Of the code we typed, [LOGIN] and [MENU] are special keywords to DotNetNuke,called tokens. The [Login] token will turn into the login link you’re used to seeing and the [Menu] token will serve as our DotNetNuke menu. Adding the [login] token will ensure that we’re not locked out of our portal after applying this skin. The <div> tag we added will be a simple ContentPane for now.
Notice the two attributes we added to this tag <div><em>—id and runat. These are attributes required by ASP.NET. The id is a unique identifier in the page and the value given to it (ContentPane) is recognized as name by DotNetNuke. The runat attribute tells the ASP.NET engine that it needs to be processed by it.
Recall when we clicked on a link to parse our skin. What DotNetNuke does at this point is take our HTM file and replace those tokens with ASP.NET user controlsthat have been predefined in DotNetNuke. At the end of this parsing process, the result is an ASCX file that becomes the real skin file, which is loaded into the Default.aspx at the runtime event of a page request.
Anytime after parsing the skin for the first time, you may go in and look at the ASCX file with a text editor, and even modify and see immediate changes without doing a parse. As tempting as editing the ASCX file may be (especially if you’re an ASP.NET developer and understand editing ASCX files), you really should not be doing that. This ASCX file is regenerated and is replaced each time a HTM skin file is re-parsed.We will also want to create our skins in a way that would be compatible with the future versions of DotNetNuke. Starting off with an HTM skin file puts us on the path to achieve this goal.
The next thing you will want to do is add more tokens and a little HTML to make yourself a little more proud of your DNN skin. To do this, go back to your HTM file and add two or three items from the list of tokens shown as follows:
[LOGO]
[BANNER]
[SEARCH]
[LANGUAGE]
[CURRENTDATE]
[BREADCRUMB]
[USER]
[COPYRIGHT]
[TERMS]
[PRIVACY]
[DOTNETNUKE]
For a complete list of all DotNetNuke tokens, please refer to the DotNetNuke Skinning Guide document by Shaun Walker. You candownload it from http://www.dotnetnuke.com/LinkClick.aspx?fileticket=2ptHepzmuFA%3d&tabid=478&mid=857.
Now add in some HTML. You may want to add in a few <hr>(horizontal rule) or <br>(vertical break) tags to separate things out. When you make changes and want to see them, remember to go to the Admin menu and then to the Skins page and re-parse the skin, then go to the Home page to see the changes.
The title for this article was Creating Your First Skin and that’s exactly what we did.There are many reasons why you couldn’t or wouldn’t use this skin for a live site. Ofcourse, any website needs a good design, and some graphics, but if you’ve managed a DNN site, before you know you’ll need some more panes and some precise positioning.
I remember deciding to pursue my first IT certification, the CompTIA A+. I had signed…
Key takeaways The transformer architecture has proved to be revolutionary in outperforming the classical RNN…
Once we learn how to deploy an Ubuntu server, how to manage users, and how…
Key-takeaways: Clean code isn’t just a nice thing to have or a luxury in software projects; it's a necessity. If we…
While developing a web application, or setting dynamic pages and meta tags we need to deal with…
Software architecture is one of the most discussed topics in the software industry today, and…