Feeds:
Posts
Comments

Archive for February, 2011

You want to show category wise portfolio items, sponsors or contacts on your DNN portal, this module is the solution. Stylish Filterable Grid module can show portfolio items in the form of a stylish filterable grid. You can upload images along with the links and tags for each of the portfolio item.

If you or your client has worked in the field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. This module will help you to show the filterable portfolio items in an interactive and stylish way.

Stylish Filterable Grid module can show portfolio items in the form of a stylish filterable and interactive grid. You can upload images along with the link and tags for each of the portfolio item.

This module is built using HTML, CSS and Java-script only. No Flash is used.

This blog post will describe the simple steps on how to use DNN Stylish Filterable Grid module in DotNetNuke portals.

Step-1: Install Stylish Filterable Grid

Once you have downloaded Stylish Filterable Grid, 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 Stylish Filterable Grid to a Page

Once the module is installed, it will be available in the Module drop-down. You can add DNN Stylish Filterable Grid (DNN_StylishFilterableGrid) to your desired pane.

Add DNN Filterable Portfolio Grid to a Page

Add Module to a Page

Step-3: Module Configuration & Settings

After adding the module to a page, you can go to module settings page and scroll to bottom section “Stylish Filterable Grid 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
Transition Effect Selected effect will be used when tags are selected 

  • Plain
  • Fade
  • Absolute
Animation Speed Speed in milli-seconds for transition effect
Main Panel Width Width of the main control
Image Dimension Width and height for each image
Randomize Images Select this check-box, if you want a random item order on each page load.
Include jQuery Select this check-box, if you your portal does not already have jQuery.
Resolve jQuery Conflict Select this setting, if jQuery gives some problem with other java-script frameworks (like moo-tools or prototype).

Step-4: Manage Grid Items

Now you are ready to add portfolio items to this interactive grid. You can click the “Add Content (Pencil Icon)” link on the newly added module. This will show you listing of the portfolio items, you can upload images and can specify order of display for items in this section. See following screens for reference.

Portfolio Items Listing

Portfolio Items Listing

Add Portfolio Items

Add Portfolio Items

Step-5: Manage Tags

You can define tags that can be linked to each of the portfolio items. The same tags will be used to show filter items.

Manage Tags

Manage Tags

Step-6: Stylish Filterable Grid View

You are all set – now you can go back to the page where you added the module and now you can see the interactive filterable grid in action.

Stylish Filterable Grid

Stylish Filterable Grid

Possible Issues and Quick Resolution:

Module 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.

Credits:

This module is built using an open source jQuery plugin “Mobily Select”. This plugin is available at http://playground.mobily.pl/jquery/mobily-select.html.

Read Full Post »

DNN Twitter Feed module provides quick and easy way to add twitter searches to your website. You can specify the tweet search criteria and this module will do the rest for you. You can control how the feed is displayed from module settings page.

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

View Live Demo

Step-1: Install Module

Once you have downloaded DNN Twitter Feed, 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 Feed (DNN_TwitterFeed) 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 “DNN Twitter Feed 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
Twitter Term Keywords to search twitter
Search Type Select the search type, the selected option will be used to search the keyword entered in Twitter Term text box. Following search types are available:

  • Simple Search
  • All of these words
  • This exact phrase
  • Any of these words
  • From this person
  • To this person
  • Referencing this person
Title Title of the DNN Twitter Feed Pane
Show Twitter Bird Show or hide twitter bird image
Show Tweet Time Show or hide the time that the tweet was sent
Pause on Hover Pause scrolling tweets while mouse is hover the twitter feed area
Show Avatars Show or hide twitter profile images
Avatar Icon Size Icon size for the twitter profile images
Delay Delay (milli-seconds) betweet tweet scroll
Dimension Width and height for the panel where scrolling twitter feed will be displayed
Exterior Color Exterior color, this will be applied to frame border and title background
Interior Color Container background-color
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: Twitter Feed 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 Feed in action.

DNN Twitter Feed

DNN Twitter Feed

Possible Issues and Quick Resolution

Twitter Feed 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.

Credits:

This module is built using an open source twitter feed plugin “jQuery Twitter Search Plugin”. This plugin is available at http://jquery.malsup.com/twitter/.

Read Full Post »