DNN 5 Widgets: Style Scrubber Widget

What is the Style Scrubber Widget?

The Style Scrubber widget is a very useful widget in the default toolbox of widgets that DotNetNuke comes with in version 5.00.00.  This widget allows you to get rid of styles that might be outside of your reach.  For instance, a 3rd party module or skin might import an external stylesheet, or output HTML code with inline CSS.  In those cases, you obviously cannot change the styles in the source of the module or skin.

Enter the Style Scrubber Widget...  The Style Scrubber allows you to very easily remove the CSS class reference, or wipeout the inline styles that you might find in the style attribute of an HTML tag.

How Do I Use the Style Scrubber Widget?

The Style Scrubber widget is actually quite simple to use.  I will walk you through an example of wiping out the style of the default DNN skin, Minimal Extropy.  If you login, you will notice that the CommandButton class makes all links using it maroon in color.  (Also note the comments I added for your benefit.)

Style Scrubber Widget Use Case - Before

What if we wanted to remove this color to make our skin or design look better?  Here is an example usage of the Style Scrubber widget, in removing the CommandButton class from the links.

<object id="StyleScrubber" codetype="dotnetnuke/client" codebase="StyleScrubberWidget" declare="declare">
    <!-- (optional) Tag: Specify the tag name to look for. Defaults to look at all tags. -->
    <param name="Tag" value="a" />
    <!-- (required) ClassNames: Specify the specific class names that you want to scrub away. -->
    <!-- Delimit using a semi-colon for multiple class names -->
    <param name="ClassNames" value="CommandButton" />
    <!-- (optional) RemoveAttribute: specify the name of the attribute to scrub from the specified tag(s) -->
    <!-- Defaults to "style" if omitted -->
    <param name="RemoveAttribute" value="class" />
    <!-- (optional) Recursive: Use this param to search through child elements -->
    <param name="Recursive" value="true" />
</object>

Essentially, the preceding code uses the Tag and ClassNames values to search for the HTML tag(s) you want to modify.  The rest of the snippet defines how you want to modify the tags that are found.

As you will see with the screen shot below, the links now are using the default CSS style that is used for all anchor HTML tags (a).  The "Edit Text" link is no longer maroon, but blue.

Style Scrubber Use Case - After

Summary

This was a very simplistic and easy use to prove the potential power that the Style Scrubber widget can put into your hands.  Imagine the headaches that this will solve for many people...  This is pretty much the only way to solve this problem.

I hope this blog entry has given you enough courage to try this widget on your own.

Technorati Tags: , , , , ,



blog comments powered by Disqus

© Copyright 2004-2013 by Will Strohl. All rights reserved. Website Skinned By: Ralph Williams  Website Hosted By: Applied Innovations