Difference between revisions of "Zebra 2 Theme"
Daniel Wahl (talk | contribs) |
Daniel Wahl (talk | contribs) |
||
| Line 8: | Line 8: | ||
==Theme Settings== | ==Theme Settings== | ||
| − | Zebra provides a variety of theme settings. | + | Zebra provides a variety of theme settings. Below is a list of all the settings broken down into general categories. |
===Header Settings=== | ===Header Settings=== | ||
====logourl==== | ====logourl==== | ||
| + | |||
The path to your logo image. Image sources support the following methods: | The path to your logo image. Image sources support the following methods: | ||
| Line 19: | Line 20: | ||
* Relative path | * Relative path | ||
| − | Default value: logo/logo (using image resolver). The actual location relative to zebra theme folder is: zebra/pix/logo/logo.png | + | Specific rule in core.css: |
| + | |||
| + | <code css> | ||
| + | #page-header { | ||
| + | background: url([[setting:logourl]]); | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | Default value: | ||
| + | logo/logo (using image resolver). The actual location relative to zebra theme folder is: zebra/pix/logo/logo.png | ||
Example values: | Example values: | ||
| − | + | <pre> | |
| − | + | logo/myschoollogo | |
| − | + | http://domain.com/theme/image.php?theme=zebra&image=logo&rev=1&component=theme | |
| − | + | http://domain.com/path/to/image.jpg | |
| + | /path/to/file/companylogo.png | ||
| + | </pre> | ||
====logourlheight==== | ====logourlheight==== | ||
| − | |||
| + | The height that the theme allows for the logo in the page-header div. | ||
| + | |||
| + | Specific rule in core.css: | ||
| + | <code css> | ||
| + | #page-header { | ||
| + | min-height: [[setting:logourlheight]]; | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | Default value: | ||
| + | :100px | ||
| + | |||
| + | Example values: | ||
| + | <pre> | ||
| + | 50px | ||
| + | 5% | ||
| + | 3em | ||
| + | </pre> | ||
==Technical Details== | ==Technical Details== | ||
| Line 36: | Line 65: | ||
==See also== | ==See also== | ||
| − | |||
[[Category:Contributed code]] | [[Category:Contributed code]] | ||
Revision as of 07:47, 28 May 2012
Zebra 2 is a contributed (third party) theme for Moodle 2 written by Danny (d_wahl) Wahl.
Contents
Theme Objectives
There are two main goals in the design of this theme. The first is to provide a responsive layout. This is achieved by using the CSS 3 media queries. The second is to provide simple, yet robust customization of the look and feel. This is achieved by using a custom settings page housing almost 40 settings.
Theme Settings
Zebra provides a variety of theme settings. Below is a list of all the settings broken down into general categories.
Header Settings
logourl
The path to your logo image. Image sources support the following methods:
- Moodle image resolver API ($OUTPUT->pix_url())
- Full path
- Relative path
Specific rule in core.css:
#page-header { background: url([[setting:logourl]]); }
Default value: logo/logo (using image resolver). The actual location relative to zebra theme folder is: zebra/pix/logo/logo.png
Example values:
logo/myschoollogo http://domain.com/theme/image.php?theme=zebra&image=logo&rev=1&component=theme http://domain.com/path/to/image.jpg /path/to/file/companylogo.png
logourlheight
The height that the theme allows for the logo in the page-header div.
Specific rule in core.css:
#page-header { min-height: [[setting:logourlheight]]; }
Default value:
- 100px
Example values:
50px 5% 3em
