Templates and CSS

How-to
Experience in setting up Umbraco and my first website.

Contents

• Introduction
• Reasons for selecting Umbraco
• Some references
• Where to start
• A digression – XSLT
• Event Calendar
• Do some design
• Images
• Rendering the output
• Templates and CSS
• Back to Media Pickers

Templates and CSS

“From here on up, the hills don’t get any higher... But the valleys get deeper and deeper.” (Trad.)

The next chunk of work is not so much about Umbraco as about HTML and CSS design. While this area has a whole load of tricks of its own, I do have a previous website to work from, and want to reproduce most of the styling anyway. So I will just make some brief notes which may be of interest if people have not come across them before.

Build the necessary document types and pages to hold the different types of Event information:

• A What’s On document type (with blank template). Follow the structure of tabs and common fields as given above for events.
• A What’s On page in the content tree.
• A general purpose Events List document type, with template.
• Three Events Lists pages under What’s On for the three activity types.
• The new Data Types needed for the new documents:
  • Three Dropdown Data Types that are needed for the three variants of the Event Type dropdown.
  • Checkbox (a Checkbox list with a single entry) for “Open on Sundays”
  • We already have the “Recurrence” dropdown for the Daily/Weekly selection.
• A document type for a Course, which has almost all the fields listed above, with template.
• Copy this to create the basis of Event and Exhibition, then tweak the fields that are different. There is no direct “copy” facility, but one can Export the document type, edit the name and alias, and then import it again.
• Some sample pages of different event types to work on.

Create a Master Template containing the common items needed on all pages – Header with logo etc., Top Navigation Bar, Blank Main section, Footer. I pinched the various elements of this from:

• The Master Template that came with the Creative Website Package.
• The Navi macro and XSLT script from the same source that creates the basic unordered list of links that forms the navigation bar (extended to a second level since I want drop-down menus.
• The Suckerfish CSS and Javascript code that creates the drop-down menu styling. See e.g. http://www.htmldog.com/articles/suckerfish/dropdowns/example/
• Rounded box corners – take your pick from: http://cssjuice.com/25-rounded-corners-techniques-with-css/
• Endless blogs and articles about how to write neat CSS. See e.g. http://www.contentwithstyle.co.uk/Articles/17/

Create a general Events Outline template having a secondary menu to select the event type, and a general site search box in the left sidebar, with the rest blank for different layout of events or summaries.

General clean-up and reorganisation of the template code and the CSS to (hopefully) improve maintainability.