// you’re reading...

Best practice

5 Template Tips – How to use HTML and CSS within RedDot CMS – Best practice for RedDot Consultants


Merging HTML, CSS and RedDot templates - How to do it the right way?Merging HTML, CSS and RedDot templates
Read how to do it the right way.

This article covers the key factors for successful CSS and HTML integration into your RedDot CMS Open Text Content Management Server project. This best practice article outlines the major points to pay attention to when implementing your HTML into the CMS.

What you should do when you integrate HTML and CSS into your content class templates

  1. If you can avoid it, do not create templates for your CSS or Javascript files. A detailed post can be found here.
  2. Don’t target HTML elements directly within the CSS. Always use classes. Specifically with anchor, image and span tags. If you target HTML elements directly this might affect the red dots which will be placed inside the templates because they are anchors, images and spans.
  3. Always target the ‘first’ item in a collection of items (lists, repeating blocks, …) by using a CSS class. Within the RedDot CMS you can identify the first item in a list using ASP and PreExecute script blocks but not always can you identify the last item. Especially when the amount of items is varying and you cannot utilize Render Tags.
  4. Ensure dynamic HTML is accessible when switched off. Using Javascript code within the CMS editing view can be problematic because it can hide editable content. Ensure that when using dynamic scripts the content is also visible when Javascript is deactivated. For example when you are using jQuery with tabs and your CMS editor changes content, the page reloads when the element is being saved and the user has to open the tab again. It’s better to deactivate the tabs when the page is ‘open’ and in SmartEdit editing mode.
  5. Files such as background images, styles heets, javascript and others need to be referenced relative (../mystyle.css) rather than root or absolute referencing (/cms/projectfolder/folder-not-working-on-live-site/mystyle.css). RedDot CMS has its own folder and sub folder structure and during editing it can’t use absolute referenced style or JS files and will mix those up.

Summary

RedDot CMS is a fairly easy to use system when it comes down to templating. I am not saying it’s straight forward or a technological top notch solution. It also is not meant to be an IDE. The good thing to say about the CMS is that the elements are modularized to each single HTML object and can be used in an infinite number of ways. Pay attention to the best practice rules above and think about where your files and references will be used. When using the guidance above the HTML of your project will run smoothly on any platform and publishing target.

What is your RedDot CMS Consultant integration experience?
How do you use HTML and CSS within the RedDot CMS?
Have you ever had any trouble or even an “CMS integration epiphany”?

Read more RedDot CMS best practice articles here.

Share and Enjoy:
  • Print
  • email
  • Twitter
  • Digg
  • Reddit
  • StumbleUpon
  • Google Bookmarks
  • del.icio.us
  • MisterWong
  • Facebook
  • LinkedIn

No related posts.

About the author:

Markus Giesen Markus Giesen is a Solutions Architect and RedDot CMS Consultant, formerly based in Germany. Travelling around the world to find and offer solutions for a better world (in a very web based meaning). He just found a way to do this as part of a Melbourne based online consultant house. On this blog Markus shares his personal (not his employers) thoughts and opinions on CMS and web development. In his spare time you will find him reading, snowboarding or travelling. Also, you should follow him on Twitter!

Discussion

No comments for “5 Template Tips – How to use HTML and CSS within RedDot CMS – Best practice for RedDot Consultants”

Post a comment



Stay up to date! - Get notified about followup comments

If you don't feel the urge to comment but wish to stay in the loop:
Just enter your email and subscribe to new comments.

Subscribe without commenting

Recent Tweets

  • RT @AirKraft: Transport Canada breakout: they manage 80K pages and 300K assets with WSM(RedDot). Wow! #OTCW 2010-11-11
  • The RedDot usergroup session 'Future of WCM' is in National Harbor 7, now. See you there! #otcw 2010-11-11
  • RT @yttergren: @AirKraft: Calling all WSM(RedDot) devs: share your solutions on http://bit.ly/bgPIof EVERY solution can win an iPad #OTCW 2010-11-10
  • Come to the Solution Exchange session. Enhance your (#reddot) CMS project! Chesapeake 12, 3:20pm #otcw Looking forward to see you there! 2010-11-10
  • More updates...