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:
- web/ullCoreThemeNGPlugin/css/main.css
- web/ullWikiThemeNGPlugin/css/main.css
- 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