Zebra 2 Theme

Main page ► Managing a Moodle site ► Site appearance ► Themes ► Zebra 2 Theme

Themes

• Theme settings
• Standard themes
• Installing a new theme
• Themes FAQ

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:

• 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 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 ( ). 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;

}