How to create a skin for DotNetNuke Video Tutorials
Posted by: A DotNetNuke blog for tutorials, tips & tricks,
on 12 Jan 2006 |
View original | NEW Bookmarked: 0 time(s)
This is a series of 8 videos detailing how to create a skin for DotNetNuke using Visual Web Developer 2005 Express Edition.
How to create a skin for DotNetNuke Video Tutorials
The skin files are included with the videos for you to download.
The videos cover:
Video 1 - Initial preparations and setup in VWD
* Creating a skin using Visual Web Developer 2005 Express Edition
* Explanation of the images exported for the skin
* Copying across the DNN-Blue skin files for editing
* Associating the skin.css file with the .htm skin file
* Enabling validation in Visual Web Developer to check for errors in the skin code
* Fixing the validation errors that are in the DNN-Blue skin before creating your skin
* Formatting the document
Time Length: 5min 47secs
Download Size: 4.6MB
Video 2 - Setting up the layout of the skin using tables
* How to create a content area where you can add modules to the page
* Adding a new row and table cells to create a new module content area pane at the top of the skin to enter a keyword phrase using the Text / HTML module to target the search engines
* Re-arranging the tokens to suit our own template arrangement
* Creating the section for the vertical menu and content pane area
* Adding a Links row
* And Copyright, Terms and Privacy Row
* Completion of the initial layout of the skin
Time Length: 14min 20secs
Download Size: 15.3MB
Video 3 - Packaging and uploading the first edit of the skin to a localhost installation
* How to package the first edit of the skin ready for installation
* How to automatically install the skin to a localhost installation of DotNetNuke
* How to assign the skin to a page on a DotNetNuke portal for testing
Time Length: 3min 50secs
Download Size: 3.2MB
Video 4 - Creating a skin.xml file and setting the menu to display vertically
* Creating a skin.xml file
* How to set the menu to display vertically
* Specifying the settings for the skin Tokens
Time Length: 2min 27secs
Download Size: 2MB
Video 5 - Styling the skin using the skin.css file and methods to quickly view the edits of a skin
* First edits to the skin.css file
* The PageMaster class
* How to quickly view changes to the skin.css file within your localhost installation without reloading the entire skin.zip file
* The different methods available to quickly view in your localhost installation any edits you make to a skin
Time Length: 5min 39secs
Download Size: 4.7MB
Video 6 - Styling the skin using the skin.css file continued (working with images)
Classes:
* Skin master - Set background colour
* skingradient - Set gradient image for links row. How to add an image to a table cell using CSS. Tips on using the repeat image feature and background colour, especially with gradient images. How to prepare the image for table cell overloads
* Viewing the changes Testing the skin against variable sized text (for people with visual impairments). Testing for overloading of table cells and background images. Testing for browsers which disable the display of images
* How to add comments to a CSS file
* Controlpanel How to change the background colour of the admin control panel
* Looking at the pane classes (areas where you can add modules to the page) Top Pane, Left Pane, Content Pane, Right Pane etc.
Time Length: 10min 35secs
Download Size: 11.4MB
Video 7 - Styling the skin using the skin.css file continued (the menu)
* How to create a class for the new contentpane - toppanese
* How to create a class for the new menupane adjusting the padding ensuring the menu and main content align correctly
* Menu container class
* How to add a background image and colour to the menu. How to repeat a gradient image to fill the menu which then fades through to the background colour
* Viewing the menu in the localhost install
* Viewing the top admin control panel with the new background colour
* How to specify the height for the background image of the menu
* MenuItem class - Experimenting with the settings
* How to specify the main menu text appearance
* Rest of menu items:
o MenuIcon class
o SubMenu
o MenuBreak
o MenuItemSel
o MenuArrow
o RootMenuArrow
* Standard Button How to change the colours of the buttons
* Viewing the results so far
* How to correct the problem of the menu and content pane moving up and down the page when there is no content
* Viewing the corrections
Time Length: 16min 16secs
Download Size: 18.3MB
Video 8 - Styling the skin using the skin.css file continued (adding the final classes and releasing the skin)
* Editing the Head class
* Finishing the CSS off adding additional CSS classes to style the:
o Content Pane title text and Control panel text
o Default text style for the main content
o Textboxes in the admin and edit pages
o Date
o Login and register, breadcrumbs, copyright, terms & privacy, hostname, search links
o H1, H2, H3 tags etc.
* Final check How to add a line break in between the menu and the first module in the menu pane for spacing
* How to package the skin for release into a production environment
* Naming the skin & Zip file (Naming Conventions)
Time Length: 10min 39secs
Download Size: 11.8MB
dotnetnuke
dotnetnuke skinning