You are viewing all blog posts from Downloads
Posted by Tom on Tuesday, January 29, 2008 to DotNetNuke, Downloads, DNN Tips and Tricks
We've all seen them; the bar of links usually found at the top of websites with multi-level navigation. Location breadcrumbs aide visitors in traversing content-rich sites by providing feedback on how "deep" visitors have navigated into the site and on how to get back where they came from. If properly implemented as text links, breadcrumbs also provide SEO benefits by allowing search engine spiders to more effortlessly crawl web content.
The DNN breadcrumb skin object, which is installed by default, makes it easy to implement breadcrumbs in your skins so there is really no excuse not to use them. Placing this line <dnn:Breadcrumb runat="server" id="dnnBreadcrumb" RootLevel="0" /> into your ascx-based skin renders the path to the currently selected tab in the form of TabName1 > TabName2 > TabName3. Optionally, you may specify a breadcrumb separator and a CSS class.
The only rub that I have with DNN's breadcrumb skin object is that the last item in the trail also renders as a link. You may think "what's the big deal," but I like to argue that this shortcoming works against the very benefits discussed above. Why would I want to navigate to the page that I'm already on?
So what's a dedicated DNNer to do? Here are 3 approaches one might take to "fix" the DNN breadcrumb skin object:
- Hack the breadcrumb trail with JavaScript.
- Modify the DNN skin object code.
- Write a custom breadcrumb skin object.
Let's look at these approaches one at a time.
JavaScript Hack
We simply target the last item in the breadcrumb trail and remove the href attribute. We then adjust the style due to the fact that even without a href attribute the <a> tag remains, which means it takes on the default link style although it's not a "live" link. Download the script here. Not the most elegant solution, but it works.
Modify the DNN Skin Object Code
This time around we add an additional public property - LastAsSpan - to the Public Members region of breadcrumb.ascx.vb that allows us to enable or disable the rendering of the last item in the breadcrumb trail as a link. Still in breadcrumb.ascx.vb, we then turn our attention to the Page_Load event handler and add a few lines of code that ultimately process our new setting. Download the commented code and then backup and replace breadcrumb.ascx.vb in admin/skins. No recompiling necessary, but you may have to restart DNN to clear the cache. For the politically correct, this constitutes a DNN core change and therefore gets overwritten by subsequent DNN upgrades. So again, far from ideal and more an illustration of concepts then a real-world solution.
Write a Custom Skin Object
This approach makes the most sense on all fronts and follows the "official" guidelines on extending DotNetNuke. Just install the custom skin object, register the new control and change the breadcrumb declaration in your existing skins and you are done. More details in the free download. I'm only a DNN module developer during REM though, so for anyone interested in the nitty-gritty of writing your own skin objects, keep an eye on Mitchel Sellers' blog later this week.
So there you have it, 3 roads to breadcrumb heaven. I'll leave it up to you to decide what approach works best for your unique situation.
In closing, I would like to thank Vasilis Terzopoulos and Mitchel Sellers for their generous contributions to this post. As always, post your comments and questions below. And if you have enjoyed this material, consider subscribing to our RSS feeds or signing up to get blog updates by email.
Permalink
7 Comments
RSS feeds
Email updates
Posted by Tom on Tuesday, December 11, 2007 to DotNetNuke, Downloads
Here is a little stocking stuffer for you.
Born from a recent client engagement and brought to life by our good friend Mitchel Sellers, this little utility module allows you to not only search for, but also replace any string across all text/html module instances of your DNN-based website.
In a wizard-like fashion, the module presents its search results in a table, listing the module ID, module title and a link to the page of the respective text/html module before committing any replacements to the database.
By default, the module functions in “admin-only” mode, meaning that only registered users in the DNN Administrator role have access to the module. You may however grant any other DNN user role permissions via module settings.
Please be aware that this is a powerful tool that may modify multiple database records quickly. It is important to fully understand the impact of changes across your website. As always, we strongly recommend that you backup your DNN database prior to performing any replacements.
Free download:
Module roadmap:
- Ability to preview changes to modules
- Ability to select specific module instances to change
- Ability to perform replacements in text of other modules
Questions or comments? Post them below.
Permalink
7 Comments
RSS feeds
Email updates
Posted by Tom on Thursday, February 01, 2007 to DotNetNuke, Downloads
Spruce up your News Articles syndication page with a few lines of custom CSS code. Written by Vasilis of thinkofdesign.com, these styles will give your feed list a refreshing “web 2.0 look”, without modifying module core files.
This is what the RSS page looks like on my blog.
The styles are associated with the module ID of your News Articles module. To make them work for you, do a “View Source” on the syndication page and search for “Start_Module” (without the quotes), which will reveal your module ID. So let’s say your ID is 740, then every line of your CSS code should start with #dnn_ctr740_ModuleContent. Then copy the CSS block into your skin.css file.
Questions or comments? Post them below.
Permalink
0 Comments
RSS feeds
Email updates