Zebra 2 Theme: Difference between revisions
Daniel Wahl (talk | contribs) No edit summary |
Daniel Wahl (talk | contribs) No edit summary |
||
(5 intermediate revisions by the same user not shown) | |||
Line 4: | Line 4: | ||
==Theme Objectives== | ==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 [[Theme_settings|settings page]] housing almost 40 settings. | 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 and (optionally) [https://github.com/scottjehl/Respond respond.js] for browsers that don't natively support media queries. The second is to provide simple, yet robust customization of the look and feel. This is achieved by using a custom [[Theme_settings|settings page]] housing almost 40 settings. | ||
==Theme Settings== | ==Theme Settings== | ||
Line 12: | Line 12: | ||
===Header Settings=== | ===Header Settings=== | ||
====Logo URL | ====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: | ||
Line 19: | Line 19: | ||
* Full path | * Full path | ||
* Relative path | * Relative path | ||
The default value uses the Image Resolver API. The actual location relative to zebra theme folder is: zebra/pix/logo/logo.png. This setting is handled by the function [https://github.com/thedannywahl/Zebra_4_Moodle_2/blob/master/lib.php#L298-328 zebra_set_logourl()] in the theme library. | |||
Default value: | Default value: | ||
<pre> | |||
logo/logo | |||
</pre> | |||
Example values: | Example values: | ||
Line 35: | Line 38: | ||
<code css> | <code css> | ||
#page-header { | #page-header { | ||
background: url([[setting:logourl]]); | background: url([[setting:logourl]]) no-repeat scroll left top [[setting:headerbgcolor]]; | ||
min-height: [[setting:logourlheight]]; | |||
} | } | ||
</code> | </code> | ||
Line 41: | Line 45: | ||
----- | ----- | ||
====Logo image height | ====Logo image height (logourlheight)==== | ||
The height that the theme allows for the logo in the page-header div. | The height that the theme allows for the logo image in the page-header div. 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 [[#Show_user_picture_(userpic)|userpic]] is enabled). This setting is handled by the function [https://github.com/thedannywahl/Zebra_4_Moodle_2/blob/master/lib.php#L330-346 zebra_set_logourlheight()] in the theme library. | ||
Default value: | Default value: | ||
<pre> | |||
100px | |||
</pre> | |||
Example values: | Example values: | ||
Line 58: | Line 64: | ||
<code css> | <code css> | ||
#page-header { | #page-header { | ||
background: url([[setting:logourl]]) no-repeat scroll left top [[setting:headerbgcolor]]; | |||
min-height: [[setting:logourlheight]]; | min-height: [[setting:logourlheight]]; | ||
} | } | ||
</code> | </code> | ||
If | ----- | ||
====Alternate text (headeralt)==== | |||
Alternative text to use instead of the value of $PAGE->heading. If this value is NULL (Empty) then $PAGE->heading will be used. In order to display no title on a page use a blank space (&nbsp;). This setting is referenced by header.php and called in both general.php and report.php. | |||
Default Value: | |||
<pre> | |||
(Empty) | |||
</pre> | |||
Example Values: | |||
<pre> | |||
School Name | |||
Company Name | |||
Short Company Motto | |||
</pre> | |||
Specific reference in header.php: | |||
<code php> | |||
if (!empty($PAGE->theme->settings->headeralt)) { | |||
$headeralt = $PAGE->theme->settings->headeralt; //Use the theme settings for the page title | |||
} else { | |||
$headeralt = $PAGE->heading; //Use the default page title if the theme setting value is empty | |||
} | |||
</code> | |||
Specific call in general.php (and report.php): | |||
<code php> | |||
<h1 class="headermain"><?php echo $headeralt; ?></h1> | |||
</code> | |||
----- | ----- | ||
==== | ====Background URL (backgroundurl)==== | ||
The path to your background image. Image sources support the following methods: | |||
* Moodle image resolver API | |||
* Full path | |||
* Relative path | |||
The default value uses the Image Resolver API. The actual location relative to zebra theme folder is: zebra/pix/core/background.png. This setting is handled by the function [https://github.com/thedannywahl/Zebra_4_Moodle_2/blob/master/lib.php#L348-378 zebra_set_backgroundurl()] in the theme library. | |||
Default Value: | |||
<pre> | |||
core/background | |||
</pre> | |||
Example Values: | |||
<pre> | |||
core/swirl | |||
http://domain.com/path/to/background.jpg | |||
/path/to/file/companyswirl.png | |||
</pre> | |||
Specific rule in pagelayout.css: | |||
<code css> | |||
body { | |||
padding: 0 10px 10px 10px; | |||
background: url([[setting:backgroundurl]]) no-repeat scroll center top transparent; | |||
} | |||
</code> | |||
====userpic==== | ====Show user picture (userpic)==== | ||
==Technical Details== | ==Technical Details== |
Latest revision as of 01:26, 29 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 and (optionally) respond.js for browsers that don't natively support 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
The default value uses the Image Resolver API. The actual location relative to zebra theme folder is: zebra/pix/logo/logo.png. This setting is handled by the function zebra_set_logourl() in the theme library.
Default value:
logo/logo
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) no-repeat scroll left top setting:headerbgcolor;
min-height: setting:logourlheight;
}
Logo image height (logourlheight)
The height that the theme allows for the logo image in the page-header div. 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). This setting is handled by the function zebra_set_logourlheight() in the theme library.
Default value:
100px
Example values:
50px 5% 3em
Specific rule in core.css:
- page-header {
background: url(setting:logourl) no-repeat scroll left top setting:headerbgcolor;
min-height: setting:logourlheight;
}
Alternate text (headeralt)
Alternative text to use instead of the value of $PAGE->heading. If this value is NULL (Empty) then $PAGE->heading will be used. In order to display no title on a page use a blank space ( ). This setting is referenced by header.php and called in both general.php and report.php.
Default Value:
(Empty)
Example Values:
School Name Company Name Short Company Motto
Specific reference in header.php:
if (!empty($PAGE->theme->settings->headeralt)) {
$headeralt = $PAGE->theme->settings->headeralt; //Use the theme settings for the page title
} else {
$headeralt = $PAGE->heading; //Use the default page title if the theme setting value is empty
}
Specific call in general.php (and report.php):
<?php echo $headeralt; ?>
Background URL (backgroundurl)
The path to your background image. Image sources support the following methods:
- Moodle image resolver API
- Full path
- Relative path
The default value uses the Image Resolver API. The actual location relative to zebra theme folder is: zebra/pix/core/background.png. This setting is handled by the function zebra_set_backgroundurl() in the theme library.
Default Value:
core/background
Example Values:
core/swirl http://domain.com/path/to/background.jpg /path/to/file/companyswirl.png
Specific rule in pagelayout.css:
body {
padding: 0 10px 10px 10px;
background: url(setting:backgroundurl) no-repeat scroll center top transparent;
}