Element Fusion

As we build websites for the Water, Sky, and LightCMS platorms here at Element Fusion, we regularly use certain techniques and tricks that allow for unique effects or ways to do things faster and more efficiently. Sometimes these are outside of our documentation or just a little obscure, but most of them will help anyone making a website for the CMS at some point. Here are a few of my favorites:

Website Name Token

This token outputs the name of the website which can be set by choosing “My Website > Settings” from the CMS admin bar. By placing this token into your templates you can output whatever is in that field. The neat thing is you can use this token as many times as you like in one template. Often we’ll use it in the <title> of the page, in a heading at the top of the page (typically replaced by the logo using CSS image replacement), and even in the footer of the page in something like an address or copyright statement, i.e., © 2008, <$websitename/$>. All Rights Reserved. These can be big time savers, along with adding consistency and maintainability to your templates allowing you easily update the content in many places just by editing that name.

Formatting the Date token

The date token is often overlooked as just a means to output the current date. However, by using custom formatting, you can get a lot more out of it than that. The format attribute has not been documented as it gets a little technical, but those of you used to date formatting in .NET, PHP, or other languages will be right at home. For the rest of us, here are a few real-work examples. As a member of our LightCMS forum pointed out, you could use the date token to make sure the copyright dates in the footers of your pages is always current. © <$date format="yyyy"/$> Element Fusion

Or with some custom mark-up you could do something more elaborate like this:

<span class="day"><$date format="dddd"/$></span> <span class="date"> <$date format="dd"/$></span> <span class="month"><$date format="MMM"/$></span>

Text Editor

As with any WYSIWYG web editor, there are always quirks. Heck, there are plenty of quirks in even desktop word processing software. So getting things to look just how you want can be a challenge. Here are a few tips:

1. When creating a new text item (or other content types that use the WYSIWYG editor), if you simply starting typing in the editor window, you get un-marked-up text. This can be useful in some cases, but we’re picky about clean, semantic HTML code here so we’d like our text to be marked-up. If you press enter in the empty editor before typing your text, the first block you type will be wrapped in paragraph tags (<p></p>) as will subsequent new paragraphs as you use enter to separate your content.
2. When selecting text, the editor displays a bread-crumb style list of mark-up surrounding your text. In the image below you can see a tree showing the text is surrounded by <p> and <b> (it really is using <strong></strong> tags, but "b" is shorthand) tags. Furthermore, you can click either the “p” or “b” to select that entire block for editing, to assign another tag or to assign a CSS class.
   
   
3. Speaking of custom CSS. When creating the style sheets for your websites, you can add custom styles to that “Apply CSS Class” menu in the editor. Just add a new block to your CSS, like this:
   /* <textEditor> */ .brown { color: brown } /* </textEditor> */
   
   Any rules you add here will show up in that menu for use by your content creators.

Region Boundaries

The default system stylesheet has a rule that adds a semi-transparent diagonal line pattern to every region on the page. This makes it easy for content creators to associate the region names and “add content” tools with the space in which the content will appear. However, it doesn’t work as well on darker website designs where the light text might be hard to read. Like any CSS rule you can override this effect as-needed. Just add this to your template’s CSS: .regionBoundary {background: none;}

Your tips

Let us know if you find these useful or if you have tips of your own to share.