Zebra 2 Theme: Difference between revisions

From MoodleDocs
(Created page with "{{Themes}} This is a contributed (third party) theme for Moodle written by Danny (d_wahl) Wahl and shared on Moodle.org Moodle Tracker...")
 
No edit summary
 
(10 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{Themes}}
{{Themes}}
This is a [[:Category:Contributed_code|contributed (third party)]] theme for Moodle written by Danny (d_wahl) Wahl and shared on Moodle.org
Zebra 2 is a [[:Category:Contributed_code|contributed (third party)]] theme for Moodle 2 written by Danny (d_wahl) Wahl.


[[Tracker|Moodle Tracker]]
==Theme Objectives==


==Configurable Options==
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===
Zebra provides a variety of theme settings.  Below is a list of all the settings broken down into general categories.


===Custom Theme Settings===
===Header Settings===
The available settings are as follows:


*'''Institution Name''' - The name of your institution is shown on the frontpage as seen in ''''Zone 8'''' of the screenshot above. This is not the name of your site
====Logo URL (logourl)====


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]]
* 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 [https://github.com/thedannywahl/Zebra_4_Moodle_2/blob/master/lib.php#L298-328 zebra_set_logourl()] in the theme library.
Default value:
<pre>
logo/logo
</pre>
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>
Specific rule in core.css:
<code css>
#page-header {
    background: url([[setting:logourl]]) no-repeat scroll left top [[setting:headerbgcolor]];
    min-height: [[setting:logourlheight]];
}
</code>
-----
====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 [[#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:
<pre>
100px
</pre>
Example values:
<pre>
50px
5%
3em
</pre>
Specific rule in core.css:
<code css>
#page-header {
    background: url([[setting:logourl]]) no-repeat scroll left top [[setting:headerbgcolor]];
    min-height: [[setting:logourlheight]];
}
</code>
-----
====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 (&amp;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>
====Show user picture (userpic)====
==Technical Details==


==Download link==
==Download link==


==See also==
==See also==
*[http://moodle.org/plugins/browse.php?list=category&id=3 Rocket]'s Plugin database page


[[Category:Contributed code]]
[[Category:Contributed code]]

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:

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:

  1. 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:

  1. 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 (&nbsp;). 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;

}

Show user picture (userpic)

Technical Details

Download link

See also