ullright themes

Themes style the apperance of an ullright installation and are distributed as plugins.

The default theme is 'ullThemeDefault'.

Configure which theme to use

Configure which theme to use in 'apps/frontend/config/app.yml':

all:
  theme:         ullThemeDefault

Setting the layout

The work is done by the 'themeFilter' class located in 'plugins/ullCorePlugin/lib/filter/themeFilter.class.php'.

It reads the configured theme from 'app.yml' and sets the corresponding layout upon each request.

Themes in detail

A theme contains all style information for ullCore and all plugin-independend styles:

• templates/layout.php
  • The default layout
• web/css/main.css
  • The main css file
• web/css/common.css
  • Contains common css definitions (text styling, list styling, ...)
  • Is automatically included by main.css
• web/images
  • Contains common images

Theming plugins

Each plugin like ullWiki can define additional css files and images in its 'web/' directory.

Example: in 'plugins/ullWikiPlugin/modules/ullWiki/config/view.yml':

default:
  stylesheets:    [ /ullWikiPlugin/css/main.css: { media: all } ]

To override the default plugin css styles:

• Create a custom theme and activate it
• Redefine the desired css statments in your custom theme's main.css

Note: the theme's css is always loaded after the plugins css file to allow overriding.

RFC "Improved theme system" (for implementing the new layout)

Themes set the unique visual style of an ullright installation. They are provided as a "theme-package", for example: "ThemeNG".

Each ullright plugin (e.g. ullWiki) has it's own theme plugin (e.g. ullWikiThemeNGPlugin). A theme-package like "ThemeNG" exists for more or less all ullright-plugins.

 - done

Configure which theme to use

Configure which theme to use in 'apps/frontend/config/app.yml':

all:
  theme:         Default

  - done (default is now 'NG')

Setting the layout

The work is done by the 'themeFilter' class located in 'plugins/ullCorePlugin/lib/filter/themeFilter.class.php'.

It reads the configured theme from 'app.yml' and sets the corresponding layout upon each request.

  - done

Theme-plugins in detail

A theme-plugin contains all style information for a ullright-plugin:

• web/css/main.css
• web/images

Additional files for the ullCoreTheme:

• The layout:
  • templates/layout.php
• A css file for common styles (font, list, ...) which is included by main.css

TODO:

•  The path for e.g. images  is calculated by a plugins name and the theme name? Like '/ullWikiThemeNGPlugin/images/my_image.png'  - done (new helpers: ull_image_path and ull_image_tag)
• plugins need another method of loading it's css file, because it can't be hardcoded in view.yml anymore -> in the action's preExecute() method? - done
• The app's custom main.css file is loaded at the last position to allow custom css overriding without creating a complete theme-package. Therefore the sequence of css file inclusion is:

1. web/ullCoreThemeNGPlugin/css/main.css
2. web/ullWikiThemeNGPlugin/css/main.css
3. web/css/main.css

-done (sequence is now: ThemeNG/main.css, plugin/main.css)

Colors / Icons concept

Every plugin has its own color, so that the users don't get confused which plugin they are using at the moment:

• ullCore - grey
• ullWiki - green
• ullFlow - blue
• ullVentory - orange

The same goes for the common icons. They are made available for each color:

• edit
• list
• search
• new_window
• external_link
• breadcrumb home

To ease the usage, we'll adapt the ull_icon() helper to allow transparent access to the particular icons per plugin/module:

/**
 * Allows easy handling of common icons
 *
 * automagically sets the alt and title attribute
 * automatically loads the icon in the correct color depending on the plugin/module
 *
 * @param type string         type of the icon like 'edit', 'list', 'search', ...
 * @param link string         symfony internal URI
 * @param alt string          optional, 'alt' and 'title' caption, default = icons filename
 * @param link_option string  optional, link_to() option (3rd argument)
 * @param plugin string       optional, name of the plugin, default = module name             
 * @return string             html
 */

A lot of css definitions are shared across the different plugins, and differ only in their color.

Examples:

• index
• result lists
• edit tables
• action areas

The idea is to use the same css classes in all plugins, and to set only the color in the plugin-specific css file.

Example for ullWiki/list table header:

• html:
  

  • <table class='ull_list'>
      <thead>
        <tr>
          <th>ID</th>
          <th>name</th>
          ...
        </tr>
      </thead>
    </table>

• default css definition from ullCoreThemeNGPlugin:
  

  • .ull_list th
    {
      vertical-align: center;
      font-weight: bold;
      font-color: white;
      background: #888888; /* dark grey */
    }

• css definition in ullWikiThemeNGPlugin:
  

  • .ull_list th
    {
      background: #008800; /* dark green */
    }

Ideas

• create a helper for the main navigation entries
• remove the 'home' link from the main navigation, as the ullright logo links to the homepage anyway