Troubleshooting DotNetNuke skins using the web developer toolbar

troubleshooting DNN skins
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
web developers toolbar
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

You need to Subscribe as a member of DNN Creative Magazine and Login to download this video tutorial.

DotNetNuke Modules
RSS Feeds