Zebra 2 Theme: Difference between revisions

From MoodleDocs
No edit summary
No edit summary
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:

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

  1. page-header {
   min-height: setting:logourlheight;

}

Default value:

100px

Example values:

50px
5%
3em

Technical Details

Download link

See also