Difference between revisions of "Zebra 2 Theme"

Jump to: navigation, search
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]] ($OUTPUT->pix_url())
+
* [[dev:Theme_changes_in_2.0#The_image_resolver|Moodle image resolver API]]
 
* Full path
 
* Full path
 
* Relative path
 
* Relative path
 
Specific rule in core.css:
 
 
<code css>
 
#page-header {
 
    background: url([[setting:logourl]]);
 
}
 
</code>
 
  
 
Default value:
 
Default value:
logo/logo (using image resolver). The actual location relative to zebra theme folder is: zebra/pix/logo/logo.png
+
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>
 
====logourlheight====
 
 
The height that the theme allows for the logo in the page-header div.
 
  
 
Specific rule in core.css:
 
Specific rule in core.css:
 
<code css>
 
<code css>
 
#page-header {
 
#page-header {
     min-height: [[setting:logourlheight]];
+
     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
+
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:

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).


Alternate text - headeralt

userpic

Technical Details

Download link

See also