Site Map "SlickMap" Module Kit For XMod Pro

MooreCreative SiteMap Templates For XMod Pro

SlickMap Site Map

Need a simple sitemap to display the page hierarchy and structure of your DNN site? This Template code for XMod Pro gives your site the perfect site map quickly and easily, and best of all, it's built in XMP where you can have full control to edit the code!
Benefits & Features: We developed this Site Map for DotNetNuke project situations where we needed to present a simple, elegant sitemap for users. Many times, we have wanted to present a more attractive, graphic-driven site map, and the SlickMap jQuery solution does a great job at formatting and displaying with styles the pages of a site.
  • This XMod Pro Template displays a site map for the DNN Portal displayed in a graphic layout, CSS driven attractive style site directory.
  • CSS Styles provide color coding for parent/child relationships up to 3 levels by default and can be further extended in code.
  • The sitemap display is intended for humans to view and appreciate but is also appreciated by Google and crawlers as it renders List Item LI tags for each page link and is SEO friendly. It creates clickable anchors styled as colored button shapes that also display the visible URL of the page.
  • Because this sitemap is built in XMod Pro, you can customize and edit it completely! It can be combined with jQuery code, further enhanced with CSS style changes, etc.
  • This XMod Pro Site Map Template allows you to specify data sets through the XMod Pro standard ListDataSource and includes a SQL Stored Procedure to list the Tabs of the DNN site. The SQL query reads from the standard DotNetNuke Tabs / pages table and can be made to honor or ignore "include in menu" data field.
  • You can change it, however with your own SQL query to become a custom navigation that lists out any other content such as article records from a DNN article module, catalog directory, custom table records, etc. Additionally, with edits to the SQL query and the list, it can be used to list pages/tabs across multiple portals.
  • The default Stored Procedure allows for site map page records to return the whole DNN Tab list for the current portal, show hidden pages or not, as well as whether to start from a specific parent tab and list only child tabs of that top-level root/parent. These values are modified by the DNN Admin in the XMod Pro Configure screen's Module Variable settings.
  • You can further use the XMod Pro core xmod:select case statement to format and exclude records as needed.
  • To use this XMP Template within your XMod Pro module instances, simply install as a standard module, a it to a page, and follow the instructions to finish installation on that page. The installer process will create all necessary data Stored Procedures, install required jQuery libraries and images.
  • By default, the Module Kit installer will setup an XMod Pro module instance with the Site Map displaying the main DNN site Tabs.
  • Be sure to check out the other Moore Creative XMod Pro SiteMap Kits for additional styles and site map presentation options.

This Kit & Code Are Made For XMod Pro

Made For XMod Pro

This Kit / Code works in XMod Pro and is a collection of Forms, Templates and Feeds that together create a solution or module for DNN. This code will not work without XMod Pro 3+ installed in your DNN instance. If you do not already have a licensed copy of XMod Pro, go get one!
Get XMod Pro now from The DotNetNuke Store »

Fancy jQuery SiteMaps!

The sitemaps we build to work in XMod Pro are often combinations of style, code, SQL and XMP to create a fully-editable code base for you to use!

This site map features the jQuery magic and fantastic style of the well-known SlickMap from ASTUTEO In their description of the SlickMap, they describe how awesome it is, "SlickMap CSS is a simple style sheet for displaying finished site maps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.

The general idea of SlickMap CSS is to streamline the web design process by automating the illustration of site maps while at the same time allowing for the pre-development of functional HTML navigation."

Notes & Instructions

You have two options on how to install and begin using the module kit:
  • Option 1. Install Manually
    With the provided .ZIP file of contents, you will find the necessary XMod Pro custom control and example form code that you can copy and paste into new forms that you create within the XMod Pro Control Panel. Additionally, if there are associated images and JavaScript files you will find these in the .ZIP as well.
  • Option 2. Use the Kit Module Installer
    The kit module installer allows you to use the standard DotNetNuke module install process to install the XMod Pro forms and template files as well as create the example database table necessary.
    • To use the kit installer, simply install it in the same manner as a standard module.
    • Then, place the module on a page
    • follow the instructions displayed on the module and click a button to complete installation
    • the completion of the installation process will remove the temporary kit installer module from the page and your DNN instance
    • you are now ready to specify the template, forms, etc within a module of XMod Pro like normal



Read The Blog!

Ideas, tips and information on what we're developing for XMod Pro!

Moore Creative's XMod Pro Blog »

Modules On Snowcovered

See all of the modules on, several are free DNN modules!

Custom DNN Development

Let us build custom DNN solutions for you! l

Need Support?

Want to see a demo? Need help setting up a module or XMod Pro custom control?
Contact Us