Feeds:
Posts
Comments

Archive for April, 2011

DNN Twitter Search Widget module provides quick and easy way to add twitter searches to your website. You can specify the tweet search and this module will do the rest for you. This module relies on standard Twitter Search Widget. You can control how the widget is displayed from module settings page.

This blog post will describe the simple steps on how to use DNN Twitter Search Widget module in DotNetNuke portals.

View Live Demo

Step-1: Install Module

Once you have downloaded DNN Twitter Search Widget, you can install it in your portal by logging in as Host and going to Host -> Module Definitions -> Install Module. If you are not familiar with DotNetNuke module installation, please read following articles:

Step-2: Add Module to a Page

Once the module is installed, it will be available in the Module drop-down. You can add Twitter Search Widget (DZ_TwitterSearchWidget) to your desired pane.

Add Module to a Page

Add Module to a Page

Step-3: Module Settings

This module is added with default settings and configuration. You can go to module settings page and scroll to bottom section “DNN Twitter Search Widget”. This section contains settings specific to this module. See following screen for setting details.

Module Settings

Module Settings

To customize theme, we provide java-script based color picker:

Customize Theme using Color Picker

Customize Theme using Color Picker

Following table describes the available settings.

Setting Description
Search Query Keywords to search twitter
Title Title of the DNN Twitter Search Widget
Caption Caption of the DNN Twitter Search Widget
Panel Dimension Width and height for the panel where scrolling twitter feed will be displayed
Panel Alignment Alignment of the twitter panel in the content pane
Show Twitter Logo Show or hide twitter logo in the footer
Show Twitter Link Show or hide twitter link in the footer
Tweet Interval Tweet Interval (milli-seconds) betweet tweet scroll
Poll for new results Select to poll for new results during scrolling
Show Top Tweets Show Top Tweets
Show Avatars Show or hide twitter profile images
Show Tweet Time Show or hide the time that the tweet was sent
Show hashtags Show or hide the hashtags
Loop Results Select to loop results
Include Scrollbar Select to show scrollbar
Shell Background Color Choose the color for shell background
Shell Text Color Choose the color for header and footer text
Tweet Background Color Choose the color for tweets background
Tweet Text Color Choose the color for tweets text
Links Color Choose the color for tweet links
Include jQuery Select this setting, if jQuery is not available in the portal

Step-4: Twitter Search Widget View

You are all set – now you can go back to the page where you added the module and now you can see the Twitter Search Widget in action.

DNN Twitter Search Widget

DNN Twitter Search Widget

Possible Issues and Quick Resolution

Twitter Search Widget not working:

Make sure jQuery 1.4.x or later is available in your DNN portal. If you are not sure, turn on the check-box “Include jQuery” from module setting page.

Read Full Post »

Another interactive & user friendly module developed by DnnZone. This is a very simple to use module for your banners and images. You can upload multiple images for the banner section and this module will rotate images. Rotation and other properties can be set from module settings page.

This blog post will describe the simple steps on how to use Nice Banner Rotator module in DotNetNuke portals.

View Live Demo

Step-1: Install Module

Once you have downloaded DNN Nice Banner Rotator, you can install it in your portal by logging in as Host and going to Host -> Module Definitions -> Install Module. If you are not familiar with DotNetNuke module installation, please read following articles:

Step-2: Add Module to a Page

Once the module is installed, it will be available in the Module drop-down. You can add Nice Banner Rotator (DZ_NiceBannerSlider) to your desired pane.

Add Module to a Page

Add Module to a Page

Step-3: Module Settings

After adding the module, you can go to module settings page and scroll to bottom section “DnnZone Nice Banner Slider Settings”. This section contains settings specific to this module. See following screen for setting details.

Module Settings

Module Settings

Following table describes the available settings.

Setting Description
Skin Select the skin/template for the slider control: 

Effects You have the option to select All, Random or Mix mode effects for your slider. For Mix mode, you can choose multiple transition effects for your slider: 

  • Blind X
  • Blind Y
  • Blind Z
  • Cover
  • Curtain X
  • Curtain Y
  • Fade
  • Fade Zoom
  • Grow X
  • Grow Y
  • Scroll Up
  • Scroll Down
  • Scroll Left
  • Scroll Right
  • Scroll Horizontal
  • Scroll Vertical
  • Slide X
  • Slide Y
  • Toss
  • Turn Up
  • Turn Down
  • Turn Left
  • Turn Right
  • Un-cover
  • Wipe
  • Zoom
Time Between Transitions Time between slide transitions (milliseconds)
Transition Speed Time taken by slide transitions (milliseconds)
Show Next Previous Show Next Previous buttons
Show Bullets Show navigation bullets
Show Captions Show image captions (if specified while uploading images)
Pause on Hover Pause transitions when mouse is inside the slider area
Stop on Last Slide Stop transitions on last slide
Randomize Images Select this check-box, if you want a random auto navigation order.
Slider Dimensions Specify the width and height for the slider area. Please note, slider will not resize images, images should be of the same size.
Container HTML You can write your custom HTML. It can serve as wrapper around the slider. Use [DNN_CYCLE_SLIDER] in a place where you want to show the actual slider.
Include jQuery Select this check-box, if jQuery is not already available in the portal
Resolve jQuery Conflict Select this check-box, if you are also using other java-script frameworks.

Step-4: Manage Images

Now you are ready to add images to the slider. You can click the “Manage Banner Items (Pencil Icon)” link on the newly added module. This will show you image listing, you can upload images. You can specify caption, link and order of display for images in this section. See following screens for reference.

Manage Banner Items

Manage Banner Items

Add Image

Add Image

Step-5: Banner Rotator Display

You are all set – now you can go back to the page where you added the module and now you can see the nice banner rotator in action.

Nice Banner Rotator

Nice Banner Rotator

Possible Issues and Quick Resolution

Rotation not working:

Make sure jQuery 1.4.x or later is available in your DNN portal. If you are not sure, turn on the check-box “Include jQuery” from module setting page.

Conflict with other java-script frame-works:

This module relies on jQuery, if your portal is also using other java-script frameworks (like moo-tools or prototype etc.), you should select the check box “Resolve Conflict” in module settings.

On DNN 04.xx.xx, please always select the “Resolve Conflict” settings.

Images are not displayed well inside slider:

Please make sure all images added to the slider are of the same size. Please use the same dimensions in module settings.

Read Full Post »

DnnZone’s GoogleMap is an easy to use DNN Module. It helps you to embed Google Maps into your DotNetNuke portals without messing with html, java-script or the Google API. Look and feel of the map can be customized from module settings page.

This blog post will describe the simple steps on how to use GoogleMap module in DotNetNuke portals.

View Live Demo

Step-1: Install Module

Once you have downloaded GoogleMaps for DNN, you can install it in your portal by logging in as Host and going to Host -> Module Definitions -> Install Module. If you are not familiar with DotNetNuke module installation, please read following articles:

Step-2: Add Module to a Page

Once the module is installed, it will be available in the Module drop-down. You can add GoogleMaps (DZ_GoogleMap) to your desired pane.

Add Module to a Page

Add Module to a Page

Step-3: Module Settings

After adding the module, you can go to module settings page and scroll to bottom section “GoogleMap Settings”. This section contains settings specific to this module. See following screen for setting details.

Module Settings

 

Following table describes the available settings.

Setting Description
Google Maps API Key You need to sign up for a Google Maps API key.
Default Map View Latitude and Longitude on which the viewport will be centered. If not given and no markers are defined the viewport defaults to world view.
Default Map Type Choose the default map type when map is loaded. Following types are available:

  • Normal (Map View)
  • Satellite View
  • Hybrid View
Map Type Controls Choose how the Map view selector will be displayed on the map:

  • None – do not show the map view selector
  • Normal Tabs – show tabs on top right corner of the map
  • Menu – show a drop-down menu on top-right corner
  • Hierarchical – show tabs on top-right corner but combine Satellite and Hybrid view into one tab
Navigation Controls Choose the navigation controls for your map:

  • Large Map Control 3D
  • Large Map Control
  • Small Map Control
  • Small Zoom Control 3D
  • Small Zoom Control
Default Zoom Select the zoom factor for the map. You can choose any factor between 1 and 19
Show Scale Select this check-box, if you want to show the map scale in bottom left corner
Show Overview Pane Select this check-box, if you want to show the map overview in bottom right corner
Border Style (CSS) If you want to show some border around the map, you can enter the CSS here
Map Dimension Width and height for the map area displayed on the page
Include jQuery Select this check-box, if jQuery is not already available in the portal
Resolve jQuery Conflict Select this check-box, if you are also using other java-script frameworks.

Step-4: Manage Map Markers

You can also add multiple map markers to your Google map. Please note, these map markers are optional. To manage markers, you will need to click the link “Manage Map Markers” (module edit) link.

Manage Map Markers

Manage Map Markers

For each marker, you can define following field:

  • Address – Address of the marker
  • Latitude – If you want exact location, please don’t enter address and enter these coordinates
  • Longitude
  • Description (HTML) – If you want to show the default popup on clicking the map
  • Popup – If you want to open the description popup on page load

 

Add Map Marker

Add Map Marker

Step-5: View Google Map

You are all set – now you can go back to the page where you added the module and now you can see the Map according to your settings and map markers.

Google Map for DNN

Google Map for DNN

Possible Issues and Quick Resolution

Google Map not working:

Make sure jQuery 1.3.2 or later is available in your DNN portal. If you are not sure, turn on the check-box “Include jQuery” from module settings page.

Conflict with other java-script frame-works:

This module relies on jQuery, if your portal is also using other java-script frameworks (like moo-tools or prototype etc.), you should select the check box “Resolve Conflict” in module settings.

On DNN 04.xx.xx, please always select the “Resolve Conflict” settings.

Credits:

Read Full Post »