Archive for the 'Quick tip' Category

Richtext editor datatype and related stylesheets 1

You can relate stylesheets to the richttext editor datatype in umbraco, sometimes this will cause an unwanted effect. Like a background color that you don’t want, …

But this can easily be changed.

You can target the richttext editor with the class


So by appending this to the related stylesheet, you have more control over the styling in the richttext editor datatype.

(make sure to clear your browser cache, to view the result)

Displaying a random image/banner on your umbraco site 9

First some info on the setup:

After installing runway to get a basic site up and running I created a folder in the media section and added several images


On my homepage document type I added a ‘media picker’ property called ‘Pictures’. There I’ll select the media picture folder.


All that’s left now is to write some xslt that will select a random image from the media folder.

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE xsl:Stylesheet [ &lt;!ENTITY nbsp “&#x00A0;”> ]>
    exclude-result-prefixes=”msxml myFuncs umbraco.library”>
<xsl:output method=”xml” omit-xml-declaration=”yes” indent=”yes”/>
<xsl:param name=”currentPage”/>
<xsl:variable name=”imageRoot” 
    select=”$currentPage/ancestor-or-self:: node[@level = 1]/data [@alias = ‘Pictures’]”/>
<msxsl:script implements-prefix=”myFuncs” language=”JavaScript”> 
var myArray = new Array();
function random(){     
    var index = Math.floor(Math.random() * myArray.length);    
    return myArray [index];
function addtoArray(item){
<xsl:template match=”/”>
<!– start writing XSLT –>
<xsl:call-template name=”buildArray”>
<xsl:with-param name=”arrayNodes” 
    select=”umbraco.library:GetMedia($imageRoot, ‘true’)/node/data[@alias=’umbracoFile’]”/>
<xsl:value-of select=”myFuncs:random()”/>
<xsl:template name=”buildArray”>
<xsl:param name=”arrayNodes”/>
    <xsl:for-each select=”$arrayNodes”>
        <xsl:value-of select=”myFuncs:addtoArray(string(./text()))”/>

This snippet will output the relative url of a random picture from inside the selected media folder ( like /media/44/dsc00033.jpg ).

RandomPicture xslt: download

Fetching the nodeid in a custom datatype 2

Just a quick tip following the custom datatypes posts (Creating custom umbraco datatypes , Storing parseable xml data in a datatype ).

When creating a datatype you might at some point need to have the current document’s nodeid. Like if you want to insert some extra data in a custom table.

Since the datatypes are also used by autoform/doc2form , liveediting and not only in the umbraco backend the best approach is to fetch it like this:


Converting Linebreaks 3

When using the textbox multiple datatype in umbraco you might want to convert the linebreaks into html <br> tags. This can be done just by checking a checkbox in the insert umbraco field dialog when inserting a field on your template. Just look for the convert linebreaks checkbox.





In xslt you can also do this by using the umbraco library method umbraco.library.ReplaceLineBreaks(System.String)

So that would like a this:

<xsl:value-of select=”umbraco.library:ReplaceLineBreaks(data [@alias = ‘youralias’])”/>

Custom document type icons/thumbnails 2

When creating or editing a  document type you are able to select an icon and a thumnail image from a dropdown.


The icon will show up in the content section and the thumbnail will be used in the ‘Create Page’ dialog. Giving different document types a different icon/thumbnail is a good way to keep the content section a bit more editor friendly.

It’s also verry easy to add your own custom icons/thumbnails the only thing you need to do is add your images to the folders where these images are stored





So to add this icon shop  to the icons dropdown I just need to copy it into the right directory. Afterwards it will show up in the icon dropdown and I can use this on my document types.


Why Umbraco rocks - alternative templates 16

The main building blocks of umbraco are as you know document types and templates. When creating a document types the umbraco interface will give you the options to also create a templates that is then setup as the default template on that document type. If you open up the details of a document types you’ll be able to see the ‘allowed templates’ part on the info tab.


Document types aren’t limited to 1 template and this is great! You can easily swith to an ‘alt template’ by simply editing the url of your page.

So if you would have a homepage.aspx and you want to apply templatex on it you can do this by changing the url to


another option is this


In the beginning I didn’t use alternative templates that much but it’s a great way to keep your content section clean.

For example an email to a friend page, instead of making this a new documenttype and adding it to the content en then passing the id of the page you want to email…

You can simply add an email to a friend template and call it up as an alternative template, that way you won’t need to pass the nodeid because you are still on the same node !

Enabling the script editor 3

This feature was introduced at codegarden 07 as a new feature in v3 but is was disabled in the release because of some issues with cross browser compatibility ( and maybe other bugs, …). I noticed that it works fine in firefox but don’t use it with ie.





Just locate the



In the config\umbracoSettings.config file and change it to false.

Quick tip - Rich text editor and line breaks 2

I have had several editors asking me this:

“When I hit enter I create a new paragraph but I just want a line break”

Solution: when you want to insert a line break you hit shift enter