2. Background Techniques and Web Fonts

In this tutorial we walk you through how to customize premium DNN skins.

To purchase and customize a skin can be a much quicker process than to create a skin from scratch.

Many modern skins come packaged with some kind of control panel for basic customization but they don’t always allow you to fully customize the skin to your exact requirements.

With a few useful techniques you will be able to adapt pretty much any part of a skin. We will demonstrate how to change or add background images and patterns, pane layouts, color schemes, fonts and even skin objects such as breadcrumb trails and login links.

We will be taking advantage of the powerful developer tools within the Chrome browser to inspect and change our skin.

We demonstrate these techniques using the following skins:

• DNNGo - Unlimited Responsive 023
• DNN Skin Studio - Acumen Business Bootstrap 3 DNN Skin

This video contains:

• Understanding different background techniques
• Understanding layered semitransparent backgrounds
• How to override hardcoded styling
• Using Chrome's RGBA color picker
• How to include a different or extra web font (Google Fonts)
• Applying the new font to specific elements