By Lee Sykes
December 2006
In this tutorial we demonstrate the various techniques you can use to troubleshoot your DotNetNuke skins using the Web Developers Toolbar.
The Web Developers Toolbar integrates with
Firefox,
Flock,
Mozilla and
Seamonkey you can download the toolbar for free from:
http://chrispederick.com/work/webdeveloper/
The techniques demonstrated here are the techniques used whenever we have problems with a skin covering elements such as:
- How to quickly find out which class styles an element within your skin
- How to test CSS code on the live website for troubleshooting
- How to edit the CSS code without affecting the original files
- This covers areas such as troubleshooting the Solpart menu and the layout of pure CSS skins
- Additional techniques are also introduced for checking the page code and images
Further details in the video contents:
Video 1 - Introduction, Edit CSS troubleshooting
- Introduction, downloading the web developer toolbar
- Introduction to the various menu options in the web developer toolbar:
- Disable
- Cookies
- CSS
- How to use ‘Edit CSS’
- Viewing all of the CSS files for a DotNetNuke skin
- Making live CSS changes to the skin
- Styling the menu, deleting styles
Time Length: 7min 1sec
Video 2 - CSS layouts, images, id and classes and additional tips
- Tips for layout problems using ‘Edit CSS’
- Adding borders to content areas
- Disable Styles
- How to disable the skin.css file
- Images options
- Disable images
- Display alt attributes
- Display image file sizes
- Information options
- Display id and class details
- Viewing the id and class details for various elements within a DotNetNuke skin
- Miscellaneous options
- Clear private data / clear cache
- Display ruler
- Edit HTML
- Outline options
- Outline tables
- Outline float
- Resize options
- Tools options
- Validate HTML
- View source
Time Length: 9min 34secs
Total Time Length: 16min 35secs
Recommended Reading:
We recommend that you also read these articles to help you troubleshoot your DotNetNuke skins.
Testing a DotNetNuke Skin
Introduction to CSS and inheritance in DotNetNuke skins