Zebra 2 Theme: Difference between revisions
Daniel Wahl (talk | contribs) No edit summary |
Daniel Wahl (talk | contribs) No edit summary |
||
| Line 12: | Line 12: | ||
===Header Settings=== | ===Header Settings=== | ||
====logourl==== | ====Logo URL - 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: | ||
* [[dev:Theme_changes_in_2.0#The_image_resolver|Moodle image resolver API]] | * [[dev:Theme_changes_in_2.0#The_image_resolver|Moodle image resolver API]] | ||
* Full path | * Full path | ||
* Relative path | * Relative path | ||
Default value: | Default value: | ||
logo/logo | logo/logo | ||
The default value uses the Image Resolver API. The actual location relative to zebra theme folder is: zebra/pix/logo/logo.png | |||
Example values: | Example values: | ||
| Line 38: | Line 31: | ||
/path/to/file/companylogo.png | /path/to/file/companylogo.png | ||
</pre> | </pre> | ||
Specific rule in core.css: | Specific rule in core.css: | ||
<code css> | <code css> | ||
#page-header { | #page-header { | ||
background: url([[setting:logourl]]); | |||
} | } | ||
</code> | </code> | ||
----- | |||
====Logo image height - logourlheight==== | |||
The height that the theme allows for the logo in the page-header div. | |||
Default value: | Default value: | ||
100px | |||
Example values: | Example values: | ||
| Line 59: | Line 54: | ||
3em | 3em | ||
</pre> | </pre> | ||
Specific rule in core.css: | |||
<code css> | |||
#page-header { | |||
min-height: [[setting:logourlheight]]; | |||
} | |||
</code> | |||
If you do not have a logo it is recommended to leave this setting at its default value (100px) to leave room of the profile picture in the header (if [[#userpic|userpic]] is enabled). | |||
----- | |||
====Alternate text - headeralt==== | |||
====userpic==== | |||
==Technical Details== | ==Technical Details== | ||
Revision as of 07:54, 28 May 2012
Zebra 2 is a contributed (third party) theme for Moodle 2 written by Danny (d_wahl) Wahl.
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
Logo URL - logourl
The path to your logo image. Image sources support the following methods:
- Moodle image resolver API
- Full path
- Relative path
Default value:
logo/logo
The default value uses the Image Resolver API. 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
Specific rule in core.css:
- page-header {
background: url(setting:logourl);
}
Logo image height - logourlheight
The height that the theme allows for the logo in the page-header div.
Default value:
100px
Example values:
50px 5% 3em
Specific rule in core.css:
- page-header {
min-height: setting:logourlheight;
}
If you do not have a logo it is recommended to leave this setting at its default value (100px) to leave room of the profile picture in the header (if userpic is enabled).
