DnnDeveloper Slider DNN Module User Manual

WHAT IS DOTNETNUKE MODULE

DotNetNuke is a program that runs on Microsoft ASP.NET. It is also a framework, meaning, it is a program that is designed to be extended. One of the ways to extend the framework is through custom modules. Various functionality and features required as per various business needs, it can be incorporated to DNN Framework with the use of DotNetNuke Custom Module.

WHO ARE DNNDEVELOPER.IN

We are a group of dedicated and enthusiastic professionals who offer the full range of creative services for the DotNetNuke and ASP.Net MVC, C#, SQL Server with years of cumulative experience in web based development that include DNN/DotNetNuke module development, DNN/DotNetNuke Skin solutions, and DNN/DotNetNuke maintenance services. Please visit us at http://www.DnnDeveloper.In

SLIDER MODULE

Considering the appeal of the slider for the DotNetNuke portals, DnnDeveloper.In has developed a custom module that provides a feature to render multiple slides along with animated Image, Header text, and interactive buttons.
Considering the complexities to configure and manage the DNN module for the DNN Portal Webmasters, we bring an easy to manage and maintain approach. We considered the user-friendly path to serve better with creative solutions.
Below is the list of features DnnDeveloper.In Slider provides for the current version.
– Automatically slide and pause on mouse hover and control the speed of slide interval
– Change the Slider Transition Effects (Slide / Fade)
– Use Default font of skin or choose from Google Fonts library
– Add black shadow to the font from settings
– Adjust header text (H1 to H6) font size from the settings
– Very user-friendly interface to edit/add/delete the slides
– Adjust the Left, Right or Centred content (image object, header text, and interactive button)
– Immediately see the image preview for the uploaded image in the Edit form
– Multiple (two) Header text (H1 to H6) can be added to the each slide
– Add Animate effect for the each of the Header text
– Choose the color for the Header text
– Multiple (two) interactive button can be added to the each slide
– Navigation/Redirection link can be assigned to each button
– Animation Effect for the each interactive button
– Bootstrap button style can be selected for the interactive button
– Image object (small image) can be added with animation effect to the each slide
– Image object can have Maximum size and Animation effect
– Slide and Image object can be Disabled or Enable
– Ajax enabled to get better performance

INSTALL DNN MODULE

If you need to install a module on your DotNetNuke website you can follow the steps below for the DotNetNuke version running on your site.
#1 Installing a DotNetNuke 9.x Module

– Log into your site as either HOST or the superuser level account.

Expert DNN Module Developer

– Open Settings -> Extensions

Expert DNN Module Developer
– Click “install extension”

Expert DNN Module Developer
– Drag and drop the package into the window, or click to browse and select the install package (.zip file) to upload the module.

Expert DNN Module Developer
– Click the next button, accept the license and continue through the install. When finished click on the Return button.

Expert DNN Module Developer
– Click the next button, read the release note it describes features and known issue summary.

Expert DNN Module Developer
– Click the next button, after accepting the license if you are agreed.

Expert DNN Module Developer
– Click the Done button, module installed to be configured to DotNetNuke Portal.

Expert DNN Module Developer

#2 Installing/Updating a DotNetNuke 7.x & 8.x Module (Video tutorial: https://www.youtube.com/watch?v=xDRjzFrKECA)
– Log into your site as either HOST or another superuser level account.
– Navigate to the Host menu and select Extensions.
– Click on Install Extension Wizard.
– As directed browse to the zip file that contains the data for your module, select it then click Open.
– Click next, accept the license, and continue through the install. When finished click on the Return button.
#3 Installing/Updating a DotNetNuke 6.x Module
– Log into your site as either HOST or another superuser level account.
– Navigate to the Host menu and select Extensions.
– Hover over the title Extension for a few seconds to generate the Manage button. Click Manage.
– Click on Install Extension Wizard.
– As directed browse to the zip file that contains the data for your module, select it then click Open.
– Click next, accept the license, and continue through the install. When finished click on the Return button.
#4 Installing/Updating a DotNetNuke 5.x Module
– Log into your site as either HOST or supers user level account.
– Navigate to the Host > Extensions. From this page, you can see all of the modules or extensions that you have installed on your site. You can also see the version information and whether or not it is in use.
– If there is a DNN registered update or upgrade to the module or extension, it will be listed on the right side of the page.
– Click the link and the site will either take you to a module installation page for the module or walk you through an automatic upgrade of the module.
Installing DotNetNuke module is a simple wizard process and tutorial can be found by searching online.

5 SETTING/CONFIGURING SLIDER MODULE
DotNetNuke framework allows the module to have separate module level or tab module level
configurations which call DNN Module settings, here below are the settings we have provided to for
the DnnDeveloper Slider DNN Module.
#1 How to use DnnDeveloper Slider module on the page to configure
– Navigate to the Page where Module needs to setup.
– Add the module on the page
– Click on the Add Module button at the bottom of the page (for the DotNetNuke 9.X)
– Enter the DnnDeveloper text at “Add Module” popup overlay/window

Expert DNN Module Developer
– Click on DnnDeveloper Slider Module, Drag and drop the module on the Panel you want it to
be located on the page.’

Expert DNN Module Developer

#2 Settings section of Slider Module
– Mouse hover the settings icon at top right corner of Module, Click on Settings Submenu

Expert DNN Module Developer
– The superuser can navigate to the last tab names “DnnDeveloper Slider Settings” to see the configuration details for the module

Expert DNN Module Developer

– Admin can change the Slider effect as Fade effect or vice versa by selecting it from the dropdown control as Slider Effect.

Expert DNN Module Developer
– If the superuser wants to change the time interval each slide getting a swap, it can be set from the Settings section of the Slider where time is in a millisecond.

Expert DNN Module Developer

– By default, slide font will be same as Skin or Portal but it can be overridden to google font by just unchecking theDefault font checkbox control.

Expert DNN Module Developer
– The Superuser can remove the flag of checkbox Default font and select the Google Font; Slider will take effect with the selected font face/family from Google Font library. Only checking default font checkbox work. It’s not required to remove the Google font from the select font controls.

Expert DNN Module Developer
– If the Superuser wants to show shadow to the font, check the font shadow checkbox from the settings section. Only black shadow will be applied.

Expert DNN Module Developer

– Header text which is basically H1 to H6 tag for the HTML can have specific font size. The Superuser can set the required font size from the settings section. Configured font size will be applied to the all the slide headers.

Expert DNN Module Developer
#3 Edit section of Slider Module
Slider module has edit section which is available only for the users who has edit rights for the module and page.
– The slider can be managed to edit content and images from the Edit Section. Edit section can be open by clicking on Edit Slider sub menu from the Action menu of the DnnDeveloper Slider Module.

Expert DNN Module Developer

– New slides can be added very easily by just uploading the Slide Image, It’s file upload control where user have to select the main image file and pressing “save” button at the end of the form.

Expert DNN Module Developer
– Header text is the animated text appearing on the slider, any text can be entered up to 200 characters. Maximum two headers can be assigned to the single slide.

Expert DNN Module Developer

– Various sizes can be applied to each text by just selecting the tag from H1 to H6, the font size of each header tag (h1 to h6) can be set from the settings section of the module.

Expert DNN Module Developer
– We have about 75 animation effect from which user can select to show animation effect on the slide. Each header text can have a different animated effect.

Expert DNN Module Developer

– Every header text can have a different color, the user can pick the color by clicking on the textbox where color picker will open and allow to select the color or entering the color name or hex color code.

Expert DNN Module Developer
– The slide can have multiple interactive buttons, buttons will be rendering on the slide with the animated effect and by clicking on them by visitors it can navigate to new tab/page as per configured URL/link. The button will show on the slide only it caption declared at the edit slider form.Maximum two buttons can be assigned to the single slide.

Expert DNN Module Developer
– Each button can assign a separate link/URL to open in new window/tab when visitors click on the button.

Expert DNN Module Developer

– Each button can assign an animate effect, we have about 75 animation effect of assigning button.

Expert DNN Module Developer
– The superuser can set the button layout; bootstrap button layout will be applied on the slide for the selected button.

Expert DNN Module Developer
– Every slide can have a maximum one image object. Image object could be a small image symbol or logo. It can be uploaded and see the preview once it uploaded at the very same place.

Expert DNN Module Developer
– The Superuser can set the image object animation effect which will in action on the front end slider. If the superuser does not want to assign image object, it’s not required to upload the image or at the edit slide form, it can be disabled.

Expert DNN Module Developer
– The Superuser can set the size – maximum size of the image object. If the image is already small it will not go to stretch to meet the configured height.

Expert DNN Module Developer
– Once details filled to the add slide form, the user can save the form to add the slide. Immediately it will appear on the front-end slider as a separate slide.
Expert DNN Module Developer
– There will be the last tab as “New Slide” where new slide can be added, all the existing slides will be listed as a separate tab allowing opening and editing the details.

Expert DNN Module Developer
– Content for the slider like header text Image Object and interactive Button can be aligned or positioned at Left, Right or at Centre from the edit slide by just clicking on the selection/radio box.

Expert DNN Module Developer
– At the Edit slide mode, the superuser can change the old image replacing by uploading a new one. The superuser has to click on upload button only after choosing the new image file.

Expert DNN Module Developer
– At the Edit slide mode, the superuser can change the header. The superuser has to click on save button only for the each changed header row.

Expert DNN Module Developer
– At the Edit slide mode, the superuser can change the button. The superuser has to click on save button only for the each changed button row.

Expert DNN Module Developer
– At the Edit slide mode, the superuser can change image object by selecting a new image. The superuser has to click on upload button only for the changed image object for the slide.

Expert DNN Module Developer
– At the Edit slide mode, the superuser can disable or enable the image object by clicking on disable/enable button.

Expert DNN Module Developer
– At the Edit slide mode, the superuser can change the image object configuration like image object animation effect or maximum size of the image object, save button need to click after the change.

Expert DNN Module Developer
– At the Edit slide mode, the superuser can disable or enable the slide by clicking on disable/enable button at the end of for form.

Expert DNN Module Developer
– At the Edit slide mode, the superuser can delete the slide permanently by clicking on delete button at the end of for form

Expert DNN Module Developer
– At the Edit slide mode, the superuser can close the edit form by clicking on the close button at the end of the form.
Expert DNN Module Developer
– Edit Slide Preview

Expert DNN Module Developer
– Settings Slider Preview
Expert DNN Module Developer
– Slide Preview

Expert DNN Module Developer
– Mobile Preview

Expert DNN Module Developer
TERMINOLOGY:
THE SUPERUSER – ANY DNN USER WHO HAS EDIT PERMISSION TO THE MODULE
IMAGE OBJECT – SIMPLE TRANSPARENT IMAGE THAT CAN BE APPEAR ON THE SLIDE AS AN SEPARATE
ANIMATED OBJECT
INTERACTIVE BUTTON – BUTTON THAT NAVIGATES TO EXTERNAL URL OR INTERNAL PAGE

0 Comments

Leave a reply