Responsive Design for DNN Websites, Installing Responsive Skin DotNetNuke, Importing DNN Content - Clarity Ventures



responsive-design-dnn

This article will provide an overview of responsive design by using a responsive DotNetNuke skin, highlighting the straightforward process that will keep development time down.

Installing a Responsive Skin on a DotNetNuke Website

To make the initial install, the developer will use the extension installation wizard that is built into the DotNetNuke platform. They will then navigate to the Appearance section of the Admin --> Settings panel, specifying their Portal and Edit Skins and selecting the “Enable Skin Widgets” button. Since responsive DotNetNuke skins use a lot of jQuery, it is also important to turn on jQuery navigation by checking “Use Hosted jQuery Version” under the Advanced Settings --> jQuery Settings tab. Then it’s a matter of syncing the responsive content to the website’s files, synchronizing root files, and specifying a default live demo page.

Importing DotNetNuke Content to a Responsive Skin

Once your website has a responsive skin, you can customize it all you need by using custom styles, which will override the default skin styles.

To import content, DotNetNuke uses what’s called an Exported Page Template. This allows the developer to reproduce live demo pages. The developer will navigate to Page --> Import, find the Templates folder, and select a page. Choosing “Replace the Current Page” and hitting the Import button will begin the process of content import. From there, it is fairly simple to sync up all website content with the responsive skin.

Customizing a Responsive DotNetNuke Skin

Once your website has a responsive skin, you can customize it all you need by using custom styles, which will override the default skin styles. Customization options include color, header font, background options, and more. Contact a Clarity responsive designer to get started.



Find out more about Clarity VenturesSee our Enterprise Web Portfolio