Difference between revisions of "Zebra 2 Theme"

Jump to: navigation, search
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:
<nowiki>logo/myschoollogo</nowiki>
+
<pre>
<nowiki>http://domain.com/theme/image.php?theme=zebra&image=logo&rev=1&component=theme</nowiki>
+
logo/myschoollogo
<nowiki>http://domain.com/path/to/image.jpg</nowiki>
+
http://domain.com/theme/image.php?theme=zebra&image=logo&rev=1&component=theme
<nowiki>/path/to/file/companylogo.png</nowiki>
+
http://domain.com/path/to/image.jpg
 +
/path/to/file/companylogo.png
 +
</pre>
  
 
====logourlheight====
 
====logourlheight====
The height of the logo to allow in the theme
 
  
 +
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==
*[http://moodle.org/plugins/browse.php?list=category&id=3 Rocket]'s Plugin database page
 
  
 
[[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.

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:

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

Technical Details

Download link

See also