Zebra 2 Theme

Revision as of 08:04, 28 May 2012 by Daniel Wahl (talk | contribs)

Jump to: navigation, search

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:

This setting is handled by the function zebra_set_logourl() in the theme library.

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 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 {
    min-height: [[setting:logourlheight]];
}

Alternate text - headeralt

Show user picture - userpic

Technical Details

Download link

See also