Table of Contents
I am a huge fan of DotNetNuke (DNN) and what you can accomplish with it. It is a wonderful framework that you can use to create websites where your users can quickly and easily take control of their own content. One of the greatest strengths of DotNetNuke is that it separates the content from the presentation via skins. You are given freedom to do pretty much what you want to with it.
This flexibility is also one of the greatest obstacles when first learning to skin DNN. The default skins that come with DNN use a gradient that makes the menus hard for me personally to read. So, I wanted to change it. After many hours and even buying a set of modules that promised it was going to be easy, I still couldn't change the one thing that I really wanted: the menus. So, I did what any good programmer would do. I wrote a program to solve the problem for me.
Most of the websites I work with have a following that really doesn't care how the site looks (family, small club and organization sites). They just want the content. I don't really have the time or the money to invest in learning Photoshop or similar programs. I just wanted a tool that would allow me to choose the colors and fonts for the basic elements of the site (background, titles, menus and footers). I also wanted to either set the logo of the site or just type some text and change the font and location of where it was displayed. All of that I wanted, plus an ability to see how it would look on a sample page so that I could see how the colors fit together.
Additionally, I really wanted to get into C# Express and .NET 2.0 to see what they had in them. So, I gave them a whirl and was really impressed. It actually restored a little bit of my faith in Microsoft, that they were actually giving away a program that you could write programs with and not pay $1000+. This, coupled with the boosted web browser control, increased my confidence that I could write something useful. Almost 2 years later, I finally finished something I could share with others.
However, before we get into the application, first let's go over a few of the basics.
I am not sure if this is official DNN nomenclature, but I call a ZIP file that contains skins and containers that are to be uploaded to a DNN site a "package." The skins are in a ZIP file called skins.zip and the containers are in a ZIP file called containers.zip. Additionally, I use this concept to group some of the styles that are used globally. DNN uses a group of CSS classes on its own pages and some modules use them automatically as well. These classes are stored in the skin.css file. Since they are in one file, they are shared by all of the skins in this package.
A skin is a set of files that defines how a web page on your DNN site looks. You can assign a different skin to every different page or assign one for the whole site. You can define multiple skins per package. Skins can define just about any aspect of how the site looks. The files that can make up a skin include:
- At least one ASPX or HTML file defining the layout of the page (Needed). This file will have areas defined where a user can place modules.
- A Cascading Style Sheet (CSS) file called skin.css (Needed).
- Images for displaying (Needed).
- An XML file to merge with the HTML files to help expand properties (Optional).
- Thumbnails of how the skin looks (Optional, but good to have).
All of these files are put into a single ZIP file with the name of the skin (e.g. MySkin.zip). All of this is done for you by the application! All you have to do is upload the skin via the interface.
Containers are the "window dressing" of each module in DNN. Each module can have a container or turn it off to stand on its own. The files that can make up a container include:
- At least one ASPX or HTML file defining the layout of the container (Needed).
- A Cascading Style Sheet (CSS) file called container.css (Needed).
- Images for displaying (Needed).
- Thumbnails of how the container looks (Optional).
Basic Skin Creator enables you to control the way that your site looks. You can create skins and containers, as well as edit some of the styles that DNN uses.
Main Screen
The application starts up with the window shown in the screenshot at the beginning of the article. A default skin and container are automatically created on startup. The screen is divided into two panes. The left pane contains two sections, the top section containing a tree with all of the items within the skin. The bottom portion of the left pane is a property grid that shows all of the editable attributes of the selected object. As you change the properties, the preview in the right-hand pane will change.
The right pane contains a preview of what the skin will look like in a browser. Keep in mind that this is not going to be exact. It is close, but it will not be exact. It also contains two tabs for the HTML and XML that the skin represents. This is more for debugging. I thought it might be useful for people who are trying to get into skinning more or wanted to know the format for each object. I will now highlight some of the more pertinent properties.
Currently, Basic Skin Creator supports two different layout types for skins:
- Horizontal Menu Five Pane has a horizontal menu with Top, Left, Content, Right and Bottom panes.
- Vertical Menu Two Pane has a vertical menu with Content and Right panes.
To change this property, click on the skin you wish to change the layout of and change the LayoutType property under the Appearance category.
Each of the sections is controlled by a style. The style tells how it will look. The following styles can be edited by Basic Skin Creator:
| Package |
Skin |
Menu (under skin) |
Containers |
|
Head
Normal
NormalBold
NormalDisabled
NormalRed
NormalTextbox
SkinObject
StandardButton
SubHead
SubSubHead
|
- FooterStyle
- LogoStyle
- Menu Styles
- PageStyle
- TitleStyle
|
MenuArrowStyle
MenuContainerStyle
MenuIconStyle
MenuItemStyle
MenuRootArrowStyle
MenuSelectedItemStyle
MenuSubMenuItemStyle
|
|
By setting any of the properties of these styles, you will change the way it looks in the web preview and, subsequently, the website.
Most of the styles are self-explanatory. Not so with the menus. The menus are one of the trickiest parts of the skin. Each element of the menu has its own CSS class that must be defined. A list of the menu classes that are editable by Basic Skin Creator and what they are for follows:
- MenuArrowStyle: DNN places an arrow beside the selected page.
- MenuContainerStyle: the backdrop of the menu.
- MenuIconStyle: each menu can have an icon assigned to it; this class surrounds it.
- MenuItemStyle: all of the non-selected menu items.
- MenuRootArrowStyle: DNN places an arrow beside the root menu item of the selected page.
- MenuSelectedItemStyle: the selected menu item.
- MenuSubMenuItemStyle: menu items underneath the item.
Note: Basic Skin Creator only works with the Solution Partners (SolPart) menu system. This is the default menu system for DotNetNuke.
Currently, the application supports four types of logos: Text, Image, DNN and None. These can be changed in the LogoType property. I hope to expand it to support both an image and text, but for now this is what we have. The Text and Image types are self-explanatory. You can select an image to be displayed as the Logo or write some text and align it as you like. DNN allows you to select a logo from the Admin -> Site Settings page. The DNN type will put a tag into the ASCX file that will get the image that you have selected from that page. None is also self-explanatory.
DNN allows you to add what are called SkinObjects. SkinObjects allow you to add functionality to your site without adding a module and they can appear on every page. The application allows you to add or remove them if you would like. The SkinObjects that you can add/remove for skins are (in alphabetical order):
- Breadcrumbs: shows the user where they are on the site.
- Copyright: shows the copyright notice on the footer.
- Date: shows today's date in the upper left-hand portion of the page.
- Login: shows the register/login links in the upper right-hand portion of the page.
- Privacy: shows the privacy link in the footer.
- Search: shows the site search toolbox and link opposite the menu.
- Terms: shows the terms link in the footer.
The SkinObjects that you can add/remove for containers (in alphabetical order) are:
- Help: shows the help icon on the right-hand side of the title.
- Icon: shows the module's assigned icon (if assigned) in the left-hand side of the title.
- Print: shows the print icon in right-hand side of the footer. This allows the user to print only the module on a page.
- Syndicate: shows the XML icon in the right-hand side of the footer. This allows users to point an RSS reader to the module to receive any changes.
- Visibility: shows the plus/minus sign in the right hand side of the title to allow the users to show/hide the module.
This application was originally inspired by making life easier on myself. So, why am I running all over the place making sure that all of the fonts are Verdana? Enter the Power Editor. You can make changes to the backcolor, font, font-bold, font-italic, font-size, font-name and forecolor to any style you wish. Or all of them. Just click on the Tools -> Power Editor menu item.
Once you like the way everything looks in the skins and containers, you can create the package. The application supports exporting either ASCX files or HTML and the supporting XML file.
You can create the package by clicking the Tools -> Create Package menu option. If you haven't created a package for this file before, the application will ask you for a location to save it to. You must use a *.zip extension and the name of the file will become the name of the skin. After it has completed, you can navigate to your DNN site. After you have logged in, go to either the Admin -> Skins or Host -> Skins page. Click Upload Skin on the module menu or at the bottom of the page. Browse to the skin you just created and select it. Once it has been selected, click the Save File link and it will upload it and process it. Both the skins and the containers will be processed.
Now that the skin is up there, you can select it to be used as the default to the portal. To do that, select the Skins combo box and select the name of your skin (the name of the ZIP file). All of the skins that you created will appear. Select the Apply button to apply it to all of the portal pages and the admin pages as well. If you do not want it to affect the admin pages, then uncheck the Admin checkbox next to the Apply To label below the skins.
Note that if you use only HTML files and then edit them, you must also put in the XML file to tell DNN how to process the files and get the menu colors right. The HTML files are processed by DNN into ASCX files.
All of the style types have Gradient as one of the background options. You must choose the BackgroundType of Gradient to activate this. You can specify a horizontal or vertical gradient. You can also specify an image size for the gradient that is different from the size of the style that you are working with. This enables you to have the starting color extend further down the page.
Another thing to consider when using gradients is that when you use a gradient as a background for a container, the admin containers are generally double the height of regular modules. You will want to create containers for admin modules with the appropriate height.
Here are some good sites for choosing colors:
Something to consider when making containers is that a lot the modules do not specify how wide they are and they flow with how wide the widest line is. This can make for messy sites. You can have two modules that are in the same "pane," but have different widths. Alternatively, the center pane can take over the entire screen and make the side modules look squished. I would suggest making several containers at different widths and one with no width assigned. This allows the admin to enforce some uniformity on the site and have the flexibility of not needing one. The module will be at least as wide as the width you have specified, but no less.
The following articles/code were very helpful in assembling this application:
|
|
 |
 | Problem with multiple font names and reloading a project.
kelly123 | 10:49 30 Oct '09 |
|
|
I created a skin and gave it multiple, three, font names for the title style. When I tried to reload the project I kept getting an error that it could not insert a duplicate name. Using a text editor I found where the project file had three "" nodes under the "" node. I deleted two of the nodes and the project loaded OK.
Before:
<TitleStyle>
<Font_Overline>True</Font_Overline>
<Font_Bold>True</Font_Bold>
<Height>50px</Height>
<CssClass></CssClass>
<Font_Underline>True</Font_Underline>
<BackColor>White</BackColor>
<Font_Names>
<name>Garamond (W1)</name>
* <name>Engravers MT</name>
* <name>Palatino</name>
</Font_Names>
<ForeColor>#0000C0</ForeColor>
<Font_Size>XX-Large</Font_Size>
<align>center</align>
<valign>middle</valign>
<Gradient>
<StartColor>MidnightBlue</StartColor>
<EndColor>White</EndColor>
<ImageHeight>5</ImageHeight>
<ImageWidth>50</ImageWidth>
<Mode>Horizontal</Mode>
</Gradient>
<BackgroundType>Color</BackgroundType>
<Image></Image>
</TitleStyle>
I deleted the two lines marked with *. One wierd thing though, when it did load the text had changed the underline to strikeout.
This program is very good. 
|
|
|
|
|
 | Good project
Ganbaatar_J | 21:06 16 Sep '09 |
|
|
Thank Richard Binnington.
I think make HELP of BasicSkinCreator.
|
|
|
|
|
| Error when setting backgroundtype to image
lange darm | 3:25 1 Apr '09 |
|
|
Dear R2B2,
What a briljant project. I'm a beginner in DNN and I was wondering why there wasn't some sort of interface that can create simple skins without knowledge of VB, CSS and the like. You filled that need. thanks.
When trying the Basic Skin Creator, I stumbled on an error when I tried to set the backgroundtype to image. When I try to save the package I get the error: an unprocessed exception has occurred in the application. The path has an invalid classification. (it's translation from Dutch). I would include a screenshot, but that is not possible in this message. Have you any idea what is wrong?
Thanks
Lange Darm
|
|
|
|
|
|
|
Hi Lange, hello R2B2
i've got the same error and found that my directory name used a special sign '&' which could not be saved in the XML structure. I have changes the directory name and could use the file.
But when i try to create the skins package there is a other error. System states: path has not usable forma (I#ve trie to translate from german). In the source i found, that the this_image is empty and therefore no fileinfo could be generatet from this. But unfortunately i'm not able to correct this.
Could you please check and chang or have a hint how to.
Regards
Juergen
|
|
|
|
|
|
|
Lange, thanks for the compliments, I am sorry for the late reply. I will take a look at it and see what I can come up with.
Juergen, Something to think about is, you may have some broken links if you didn't change them when you changed your path to not include & did your image paths change as well.
Thanks,
Richard
|
|
|
|
|
| Error when running a Basic Skin Creator
Nirav Chikani | 3:17 10 Mar '09 |
|
|
Dear sir,
when I am first time running a Skin creator on Visual Studio 2005
then it will give me following error.
"The type or namespace name 'ICSharpCode' could not be found (are you missing a using directive or an assembly reference?) D:\working data\Admin\My Documents\BSC_Source\SkinCreator\SkinCreator\Form1.cs 1 7 SkinCreator"
so what to do ??
please help me and Reply me as soon as possible.
niravchikani@gmail.com
Thanks,
Nirav Chikani
|
|
|
|
|
|
|
That is a reference to the Zip library that I use (SharpZipLib). I thought I had included that in the source, but apparently not. You can download it from here:
http://www.icsharpcode.com/[^]
Let me know if that doesn't work.
Richard
|
|
|
|
|
| Many Thanks. Great Start
zorob | 23:37 26 Feb '09 |
|
|
Hi,
This is a great little tool to have in your DNN development toolbox. As you said its a starter, not a full blown application. I use it to just get my skin started. Then open Dreamweaver, or Expressionweb, and then further refine it.
What this tool helps me achieve is to get over that initial start-up hurdle. Previously I would open a old DNN skin, then manually start to change it, or would have to start from scratch. This tool helps me put down the foundation building blocks to a great skin.
Thanks
Robert
|
|
|
|
|
|
|
I am glad you like it and it is useful to you.
Richard
|
|
|
|
|
| How to make changes to the Packeged Skin
ImranSyed | 21:42 8 Feb '09 |
|
|
Ones you craeted the package can you make furthar changes in Basic Skin Creator.
When you go to File-Open it only has *.xml file option.
|
|
|
|
|
 | Horizontal SubMenu
anand66 | 20:37 18 Jan '09 |
|
|
Nice tool
How can i get horizontal sub menu???
Thank you
Anandaraju
|
|
|
|
|
|
|
Thank you. You should be able to change the MenuSubMenuItemStyle style.
Let me know if that doesn't work.
Thanks,
Richard
|
|
|
|
|
|
|
Thank you
I am worked on that MenuSubMenuItemStyle style also, but I didn't get.
Thanks
Anandaraju.
|
|
|
|
|
| number of types
riclo | 13:35 5 Aug '08 |
|
|
First, this is a very nice tool.
There are only two types :
Horizontal Menu Five Pane and
Vertical Menu Two Pane
is it possible to have more types or is there a way to create own types
outside the application?
richard
|
|
|
|
|
|
|
Sorry about the delay I am out of town for a while. Currently there is no way of doing that outside the application. I have not come up with a solution that I like or have time to implement. A solution would be to modify the code to meet your needs/add types.
Richard
|
|
|
|
|
| One page Aligned on the left and the rest on the center!
alibaba069 | 0:39 4 Aug '08 |
|
|
Hi.
First thanks for this great tool.
I have a problem with one page that is aligned on the left while the rest of the pages are aligned on the center.
The property HorizontalAlign on PageStyle is "center".
This is anoying me, anybody now whats the problem?
Thanks!!
|
|
|
|
|
|
|
Sorry about the delay. I have been out of town (and still am). Are the left-aligned items in the title or the content? If the title, the title style will left align within the center aligned page.
Thanks,
Richard
|
|
|
|
|
| Importing Existing Skins
Justin Porteous | 23:14 25 Jul '08 |
|
|
I was wondering how I could import an existing skin to edit with this awesome tool you've created.
|
|
|
|
|
|
|
Justin,
Thank you for your kind words. I am afraid that functionality is beyond the scope of this project. This program was meant to be a basic skin creator, a beginning step for new users to DNN to change some the common colors and graphics. The program generates all of the html, aspx, and xml code from objects I have programmed to handle specific portions of the web page.
Here are some of the issues I ran into when I looked at trying to import an already created skin or container:
-Handling CSS designs
-Mapping the imported CSS classes to my objects
-Mapping where the insertion point is for the sample texts
-Skin objects and sample texts associated with them
-Multiple images per logo/title/background and how to lay them out (most designer would gasp at me touching their design)
That would be time consuming to program, and would most likely be incredibly complex and tedious for the user. That would move the program away from being a tool for the beginner.
I do appreciate the inquiry. I have thought about making an advanced skin creator/editor. I have not come up with any ideas about how to overcome the above issues (and there are more). I also would like also to be able to embed Firefox and Safari, now that it is on the PC, into the app so you can check cross-browser compatibility. I have not found easy ways to do that. From what I have seen, you basically have to build the a browser from the ground up for Firefox.
If you, or anyone else, has any ideas on how to approach these issues, I would love to hear them.
Thanks,
Richard
|
|
|
|
|
| A Few errors
bitfix | 11:51 8 Jul '08 |
|
|
Great work and a fine solution to a complex problem you found here.
I have a problem with submenues, where the cursor is a Ibar instead of a hand. How do I fix that ?
Then I get exceptions when I choose image for some styles. Maybe this is an unfinished part ?
Those who want most to speak up, are often those who have nothing clever to say.
|
|
|
|
|
|
|
bitfix,
Thanks for the kind words. I will look into the submenus issue.
As to the exceptions. This part should be working. Can you post the exception you are getting? What type of image are you using? This shouldn't matter, but sometimes it does.
Thanks,
Richard
|
|
|
|
|
| Errors when loading XML files
huylyanh | 23:14 22 May '08 |
|
|
Hello,
It is a wonderful tools, however when I use it to load some container or skin XML files from hard drive, it raises exceptions. Coould you please review your program?
Thanks a lot,
Huy.
|
|
|
|
|
|
|
Huy,
Thank you for your comments. This program was meant to be a basic skin creator, a beginning step for new users to DNN to change some the common colors and graphics. The program generates all of the html, aspx, and xml code from objects I have programmed to handle specific portions of the web page.
Here are some of the issues I ran into when I looked at trying to import an already created skin or container:
-Handling CSS designs
-Mapping the imported CSS classes to my objects
-Mapping where the insertion point is for the sample texts
-Skin objects and sample texts associated with them
-Multiple images per logo/title/background and how to lay them out (most designer would gasp at me touching their design)
That would be difficult to program, and would most likely be incredibly complex and tedious for the user. That would move the program away from being a tool for the beginner.
I do appreciate the inquiry. I have thought about making an advanced skin creator/editor. I have not come up with any ideas about how to overcome the above issues (and there are more). I also would like also to be able to embed Firefox and Safari, now that it is on the PC, into the app so you can check cross-browser compatibility. I have not found easy ways to do that. From what I have seen, you basically have to build the a browser from the ground up for Firefox.
If you, or anyone else, has any ideas on how to approach these issues, I would love to hear them.
Thanks,
Richard
|
|
|
|
|
| Question
PeterPanNL | 22:20 7 Feb '08 |
|
|
If I choose Logo type text and like to add two lines of text, like:
Welcome to
My Site
o How do I achieve that ? 
Regards,
Peter
|
|
|
|
|
|
|
I apologize for the late reply. You can actually enter the html for it into the title property. For your title you would put
Welcome to<br>My Site
into the Text property.
Hope this helps,
Richard
|
|
|
|
|
|
|
