Editing content in DNN is easy, but how do you change the colors or the layout of a skin?
If you purchased a pre-packaged set of skin files and want to make some basic changes, like say, alter the background image or change all your fonts to Verdana instead of Arial, it’s a lot easier than you think. What will I need to edit my skin files?
1. Web Server FTP Access - You will need to access your web server so you can download your skin files. If you don’t already have this information you will need to contact your hosting provider to get the proper access.
2. At least an introductory knowledge of HTML and CSS or a really good tutorial book!
3. HTML Editor – If you are very well versed in HTML, you can actually just use Notepad, but a software package such as Dreamweaver or CoffeeCup can help immensely.
4. Access to a photo editing software package like Photoshop if you wish to alter any graphics.
Accessing your Skin Files
Your skin files are most likely located in 1 of 2 places and that would be in the /portal/0 or /portal/_default directory and will be located in the /Skins folder. If your instance of DNN has more than one portal created, you'll need to know which portal number to look for.
To find out which exact skin file your website is using, you’ll need to log into DNN as Admin and go to Admin – Site Settings – Appearance and you will see the skins set by your portal.
Host skins files are located in /portals/_default/… and Site skin files are located in /portals/0/…
Before you start editing your skin files, the best thing to do is make a backup after you download the entire skin package.
The Files You Will Need to Edit
The Skin File (.ascx)
As you can see in the above image, the skin folder this portal is using is called SpiffySkin. The actual skin file this portal is using is SubpageSkin2.ascx. This is the file you will want to edit in an HTML editor or Notepad. Some of the things you can edit in this file are adding or removing ContentPanes, adding or removing columns or rows, as well as changing the height or width of your website or ContentPanes, etc. Important Note: Make sure you always have a pane that is called "ContentPane" (ID="ContentPane"). If you don't, your skin will break and throw an error.
Stylesheet (generally skin.css)
This file contains all the design elements like font style, size and color as well as the overall colors, padding and background images of your website.
A Good Rule of Thumb when Editing your Skin Files
When you make changes to your .ascx skin files and FTP it up to your web server, the changes take place immediately. This is NOT a good way to test significant changes to your design.
A better way to do this is to make a copy of your skin file and call it something like MySkin_Test.ascx and then just send that up to your skins directory. You can then create a test page in DNN and apply that skin file to see what it will look like. When you are satisfied, you can then edit your main skin files, send it up, and all your pages will then have your new look.