How to create a skin for DotNetNuke Video Tutorials
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
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
posted by Lee Sykes at
11:16 am
1 Comments:
This comment has been removed by a blog administrator.
By
WebHost4Life, at 4:08 am
Post a Comment
<< Home