[ulltras] ullright/ullCms Guide for Webdesigners

Introduction

This guide explains where to find the most important files to create a custom website layout using ullright/ullCms.

Prerequisites

This guide assumes a fresh and working ullright installation. Installation guides can be found here.

A fresh ullright installation provides example data and an example layout.

Symfony

As ullright builds on the popular symfony framework, we recommend that your read the symfony online documentation, escpecially the chapter "View" in the online book  "A Gentle Introduction to symfony" Book.

Directory Structure and Important Files

The most important directories and files are:

• / - project root
  
  • apps/frontend/ - contains all your custom files except web assets like images, css and javascript files
    
    • config/
      
      • app.yml - the main configuration file
    • modules/ - module specific customisations
      • ullCms - customisations of the cms module
        
        • templates - put custom templates for specific cms pages here. Example: aboutUsSuccess.php
           
    • templates/
      
      • _html_head.php - your custom html head statements
      • layout.php - your custom html layout
  • web/ - your custom web assets
    
    • css/ - custom stylesheets
      • custom.css - your main custom CSS file
    • js/ - custom Javascripts
    • images/ - custom images for the layout like logos, etc
    • uploads/ - contains uploaded files and images by the ullright modules

Layout

In ullright the layout can be seen as the picture frame of a page's content (labeled as "template" in the following image taken from the symfony documentation).

A layout usually includes the following elements

• HTML HEAD
  
  • Title
  • Meta tags
  • Stylesheet includes
  • Javascript includes
  • Google Analytics
  • Webfonts
• HTML BODY
  • Header,
  • Navigation,
  • Sidebar,
  • Content area,
  • Footer
  • PHP snippets which dynamically load the navigation, content, etc

When you download a fresh ullright instance, a default layout is used which lies in plugins/ullCoreThemeNGPlugin/templates/

If there is no custom layout yet start by copying the example website layout (plugins/ullCoreThemeNGPlugin/templates/layout_website.php) to apps/frontend/templates/layout.php .

Open the the example layout for more information - it is well documented.

CSS Structure

Normally some basic ullright css files are loaded beside your custom css.

Per default the CSS files are structured as follows:

• plugins/ullCoreThemeNGPlugin/css/main.css - The main ullright styles.  Loads:
  
  • common.css - Common non-layout styles like global font-size, link color, headline styles, ...
  • main.css - main ullright styles. Loads also:
    
    • main_multiformat.css file with styles shared for the webbrowser and mobile variant
• web/css/custom.css - Custom styles. Loads:
  
  • custom_multi_format.css - CSS statements shared for the webbrowser and mobile variant

Mobile Version

Read more about support for smartphones etc. here:

http://www.ullright.org/ullWiki/show/mobile-version

Multilanguage / Internationalisation

Read about this topic here:

http://www.ullright.org/ullWiki/show/ullright-i18n-translation-conventions