StyleWizard

EasyDNNStyleWizard

EasyDNNstyleWizard

EasyDNNstyleWizard is a DNN module designed to adjust DNN skins developed by EasyDNNsolutions, as well as to adjust predefined themes in EasyDNNnews module. You can use this WYSIWYG tool to change colors, fonts, borders, shading, backgrounds and much more, without having to manually edit CSS. All changes you apply will immediately become visible, and even if something goes wrong and you're not happy with the results, you can always start a new.

You will find EasyDNNstyleWizard immensely useful in your adjustments of EasyDNNnews module's themes. This tool will allow you to adjust any existing theme according to the appearance and colors of your own DNN skin.

1) HOW TO INSTALL EasyDNNstyleWizard

  • EasyDNNstyleWizard is available as a part of EasyDNNnews module and EasyDNNthemes collection.
  • EasyDNNstyleWizard's installation is included in the same ZIP archive that contains EasyDNNnews module or EasyDNNthemes collection.
  • EasyDNNstyleWizard needs to be installed separately.

Like any other module, EasyDNNstyleWizard is installed from the DNN menu Host > Extensions > Install new extension.

The recommended minimum for working with EasyDNNstyleWizard is IE10+ or another latest generation browser. Naturally, your pages will still be compatible with older versions of browsers; this recommendation only refers to working with StyleWizard, not the results of that work.

2) STARTING TO USE EasyDNNstyleWizard

After the module has been installed, it needs to be added to the page containing some of our skins, or a location where EasyDNNnews module is added, together with some of the predefined themes. After the module is added to the page, it will detect the editable elements there. You can also add the module to all the pages on your web site from the DNN menu Module settings > Advanced settings, where you should switch on the option Display module on all pages.

In that case, StyleWizard widget will be shown in the upper left corner. Clicking the widget opens the editor on the left side of the page.

On the right-hand side of the editor there are tabs with editable elements. They can include either EasyDNNnews, Skin or Containers. Availability of the elements to be edited depends on which elements there are on the page.
At the bottom of the editor there is the Save button, and next to it there is a menu where you can select All, EasyDNNnews, Skin or Containers. If you select All you will save the changes across all elements, and it is also possible to select a particular element you wish to save the changes for.

The module's settings determine who EasyDNNstyleWizard will be visible to. It is recommended that you set your licenses in such a way that the module is only visible to the admin and host users, who will therefore be the only ones to be able to save changes or upload background images.

 

 

 

3) ADJUSTING EasyDNNstyleWizard THEMES

StyleWizard allows EasyDNNnews themes to be adjusted, that is, their styles can be configured. Various themes can be selected in EasyDNNnews module's settings (Settings > 6. Template and theme selection), whereas StyleWizard can be used to adjust their styles.

To begin editing news themes, click on the tab EasyDNNnews in the StyleWizard editor. On the top of the editor there is a drop-down menu allowing you to select which news module on the page you wish to edit. (EasyDNNnews has a main news module and several satellite modules - EasyDNNnews Calendar, EasyDNNnews Categories Menu, EasyDNNnews Search, EasyDNNnews TagCloud i EasyDNNnews Widgets.)
A panel with predefined styles can contain several predefined styles. By clicking on one of them you can select the style to be displayed or additionally edited.

Each predefined style can serve as the starting point for additional adjustment. In order to adjust a predefined style it is necessary to click on the "Settings" button , followed by clicking on the button "Edit style" . This will open a menu with a large number of editable style sections. Any style name can be changed in the field Style Name.

Click on the style section you wish to change. If a style section contains several subsections, choose the style section you wish to edit. Based on the style section you are editing, change the values in the editor.

Clicking on the small + sign in the corner of the editor will enable you to use additional characteristics which CSS allows, but were not necessary in the original theme.

After adjusting one style section, you can adjust all the other style sections according to your needs. Upon completing your task, save changes by clicking the Save button. Prior to saving changes, you can select the desired saving option (All, EasyDNNnews, Skin or Container). If you select "All", you will save changes across all the elements (providing they have been made), whereas selecting a particular element will enable you to save only those changes made there. Selecting EasyDNNnews and clicking on "Save" will save only those changes made on a predefined theme of a news module.

After saving your first style, another tab will appear next to your Predefined tab - Custom tab. All the styles you have saved will also be available under Custom tab.

Useful tips:

  • Editing a predefined style and its saving creates a new style with a new name. The original predefined style permanently remains unchanged, and you can always select it anew. Original styles are available under Predefined tab, and your own saved styles under Custom tab.
  • If you have changed style for any particular module, this change is also visible in that module's settings.
  • In StyleWizard you can edit a theme selected from the module's settings. Themes cannot be changed in StyleWizard, they can only be changed in EasyDNNnews module's settings.

4) ADJUSTING SKINS AND CONTAINERS WITH StyleWizard

You can use StyleWizard to adjust skins developed from EasyDNNsolutions. We are currently offering several skins accompanying EasyDNNnews module. If you wish to use any of those skins, you first need to install EasyDNNstyleWizard module, or the skins won't work.

Skins usually have a few predefined styles that can be changed and adjusted through StyleWizard. If you're familiar with how skins work in DNN, you probably know that one skin is actually one file containing everything that is necessary for the design and appearance of web pages. That means that, should you change or edit a style via StyleWizard, all the changes will be visible across all the pages where that skin is used.

A useful feature of DNN is that you can use a different skin on each separate page. That means you can use the same skin on a single web page, but with a different style. To make that possible, you need to duplicate a skin file, set the duplicated skin file as the set skin for that page, and edit it via StyleWizard.

To start editing a skin with StyleWizard, it is necessary to add StyleWizard to the same page with one of our skins supported by StyleWizard. StyleWizard will recognize whether the page already features an editable skin. Click on the Skin tab. Select one of the predefined skins. Click on the "Settings" button , then on "Edit style" button .

This will open a menu with editable style sections. A style section can have several subsections. Select a style section or subsection you wish to change. Change the value via the editor. Upon editing one style section you can move on to edit another section. When you have edited everything you wanted, save your work by clicking on the Save button.

Containers are edited in the same way, with the only difference being that one page can hold several containers. Therefore, it is necessary to select the container you are editing from the drop-down menu.

5) IMPORTANT NOTES AND LIMITATIONS:

EasyDNNstyleWizard can only be used to edit news themes accompanying EasyDNNnews module 6.2 or later.

Free skins accompanying EasyDNNnews module will only be functional from version 6.2 onwards if you have EasyDNNstyleWizard installed.

 

> Demo site <

> Promotional video <