Themed resource

Jump to: navigation, search

Note: You are currently viewing documentation for Moodle 2.0. Up-to-date documentation for the latest stable version is available here: Themed resource.

The themed resource allows a teacher to design an HTML template outside of Moodle and use it again in many courses. The Moodle site must have the contributed code Flexpage course format installed to install this code.


Overview

The theme resource was designed and developed to provide an instructor with a way to add multiple Moodle HTML resources to multiple courses with the same look and feel without a lot of inline CSS styles. The themed resource allows an instructor to design an html template outside of Moodle using HTML and CSS and upload this template to the Moodle themed resource and user it over and over again with custom fields.

Once a template has been added to a Moodle course it can be reused in any themed resource in that course. The resources and be backed up and restore to another course and that course can use the same html template. The themed resource provides instructors with a quick way to create many html resources with the same look and feel without a lot of copying and pasting of the html structure.

Add an existing themed resource

Add a Themed Resource to a Flexpage course, by turning on editing and selecting "Add Existing Activity drop down list. Locate the name of the themed resource and select it from the drop down.


trmenu.png

The themed resource should now be displayed in the center column of the course and look similar to the image below.

themed resource in page.png

The Themed resource looks like the image below when editing is turned off.

themed resource editing off.png

Create a theme for a themed content resource

A theme for the themed resource requires a .zip file with the following elements:

  • An .html template
    • This template should contain html found in the body of an html document.
  • A .css file
    • The .css file should contain styles for the markup in the template.
  • An optional folder named 'images' containing any images used for the styles (such as a background)
    • The .html, .css, and .zip file should all have the same name. For example, NewTheme.html and NewTheme.css should be zipped into a file called NewTheme.zip.

The template must contain the tag %%CONTENT%% which will be replaced by the text, etc. that is entered in the content field when setting up a Themed Resource.

CSS selectors defined in the .css file should be prepended with 'themedresource_' in order to prevent namespace collisions with other selectors defined elsewhere in Moodle.

To link to an image in the images folder of the theme the relative url must be prepended by the %%THEMEDIR%% tag. For example, to define a background image in the stylesheet:

.themedresource_content { 
    background-image: url('%%THEMEDIR%%images/background.jpg'); 
 
}

Example themed resource theme code

The following is an example of a simple Themed Resource theme, called "NewTheme".


NewTheme.html:

<div class="themedresource_newtheme"> 
    <div class="hd hd-generaltable"> 
        <div class="c"></div>
    </div> 
    <div class="roundedtext"> 
        <h2 class="themedresource_header">A Header</h2> 
        <div class="themedresource_content"> %%CONTENT%% </div> 
    </div> 
    <div class="ft ft-generaltable"> 
        <div class="c"></div>
    </div> 
</div>

NewTheme.css:

.themedresource_newtheme .roundedtext { 
    border-style:solid; 
    border-width:1px; 
    padding:5px; 
    border-color:#B4B4B5; 
}
 
 .themedresource_newtheme .themedresource_header { 
    background-color: red; 
}
 
 .themedresource_newtheme .themedresource_content { 
    background-color: blue; 
}

Produces this:

themedprnt.jpg

Please note that to achieve the rounded borders you need this structure:

<div class="hd hd-generaltable"> 
    <div class="c"></div>
</div> 
<div class="some-nested-class"> 
. . . Whatever other structure and content  
<div class="ft ft-generaltable"> 
    <div class="c"></div>
    </div>

In the example above, the "some-nested-class" is "roundedtext".

Uploading a created theme to a course as a themed resource

Now that you have created a theme for your themed content resource you need to upload it to the course in order to use the theme in a themed content resource. To upload the theme you click on the manage activities tab

manage activities tab.png

Select "themed content" from the add a resource drop down

themed content drop down.png

Enter in the information for the themed content resource like you would normally. When you are down locate the choose and upload button after the theme drop down and click the button.

themed resource upload.png

In the popup window click the upload button

themed resource upload button.png

This will bring you to the choose a file window in Moodle. In this window you will

  1. Click the browse button
  2. Locate the zipo of your theme
  3. Click that open button
  4. Click the Upload this file button

themed resource theme upload.png

Now click the choose link next to the zip file for the theme you have uploaded

themed resource choose.png

This will add the name of the zip file to the text field next to the choose or upload a file button. Click the save and display button. This will display the resource with the new theme: themed resource display themed resource.png


  • Developers Moodlerooms Inc, Sam Chaffee and Jason Hardin

See also

  • For more information on Flexpage, please visit this site This feature was developed by a Moodle partner MoodleRooms