Themes

Because of the way Moodle Themes work, requiring not just CSS but PHP as well, I am not sure a CSS Template Creator would work for Moodle. But if I am wrong I would be happy to be corrected.

There are a growing number of Moodle 2 themes in the Plugins directory under "Downloads" in the drop down menu at the top of the page. Many of the Moodle 2 themes comes with settings pages that let you further customise the look and feel of your theme without the need for coding, down to changing logos, colours, and sometimes layout options.

Also, because you are getting the actual code when you download a Moodle theme, you are also able to change it directly as much as you wish if you have the know-how.

It is possible to take the css from some of the templatemo.com templates and adapt it to fit with a fairly standard moodle layout.

Essentially, look at where the main content fits into a core theme layout such as standard and start from there. However, there is quite a bit more to it than that as moodle needs some of its own main div classes/ids, as well as adding in things like the menus.

My way of doing it when I had a go was to start with the base layout and rename the selectors in the templatemo css files to match the moodle ids and classes. I got far enough along to use it for a front page for my own site, which was all I wanted at the time. I know Mary Evans has produced a couple of themes based on templatemo templates, although I don't think they are on the community database so you would need to ask Mary about them herself, or try Mary's webpage here

Richard

Hi David,

Let's assume you wont to make a Moodle theme based on TemplateMo's Paper Blog.

http://www.templatemo.com/preview/templatemo_185_paper_blog

Well the easiest way to do this is first create a copy of the Base theme from your Moodle install, following the tutorial I wrote called:

Development: Themes 2.0 how to clone a Moodle 2.0 theme.

Next you would need to make the following changes to your new theme's config.php namely:

moodle/theme/paperblog/config.php

$THEME->name = 'paperblog';

$THEME->parents = array('base'); //make base theme the parent theme

$THEME->sheets = array('templatemo_style');

and also change the 'regions' & 'defaultregion' for the FRONTPAGE to 'side-pre' like so...

    // The site home page.
    'frontpage' => array(
        'file' => 'frontpage.php',
        'regions' => array('side-pre'),
        'defaultregion' => 'side-pre',
    ),

as this is the way the front page will be styled.

As you will see above I have only included the template CSS file as Base theme will style all of your Moodle pages where necessary, so there is no need to include them. This does not stop you from adding changes to the css at a later date as there are bound to be certain amount of css tweaking to make Moodle work nicely in your new theme.

The next stage is a little harder, but since the template I started off with has a pretty simple layout, it is not too difficult as some template can be.

In your new theme, the body, header and footer and also the sections within the frontpage will be styled by the template, but the rest of the site, which will be in a the normal 3 column layout to work, will look the same as any other Moodle site, but with a difference, because of how the theme is styled by the CSS template.

Once all the ground work has been done when cloning, You can delete all the css files in the style directory, and ADD templatemo_style.css instead.

Next copy and paste the images directory from the template into the pix directory of your new theme.

Next change ALL the background image CSS in your moodle/theme/paperblog/style/templatemo_style.css where it says something like...

url(images/templatemo_body.jpg)

change it to this

url([[pix:theme|images/templatemo_body]])

Next you will need to change the frontpage.php to add the layout from the template.

If you open frontpage.php in your Text Editor and find <div id="page"> you can delete everthing after this page div until you come to the very last last closing div tag </div>

Now copy and paste all the html code from your template's index.html from the part just below the <body> tag (it may look like this <div id="templatemo_wrapper"> to the last closing div just above the closing </body> tag into the space between <div id="page"> and </div> in the frontpage.php.

Next You will need to decide which area your side block is going to start.

In the Paper Blog template the sidebar starts with the following code...

<div id="templatemo_sidebar">       
<div class="sidebar_box">

so at this point you can add the PHP for the side block. Since it is on the left you need to use 'region-pre' so you would end up with...

<div id="templatemo_sidebar">       
    <div class="sidebar_box">
        <?php if ($hassidepre) { ?>
            <div id="region-pre" class="block-region">
                <div class="region-content">
                    <?php echo $OUTPUT->blocks_for_region('side-pre') ?>
                </div>
            </div>
        <?php } ?>

Next you will need to decide where the main contents of your Moodle page will go.

So if you look at Paper Blog html on your frontpage.php towards the bottom you will see    

</div> <!-- end of content -->
</div> <!-- end of templatemo_wrapper -->

So you will need to add the output for your Moodle main content just ABOVE the end of content closing div..like so...

(for Moodle 2.2 use)

<?php echo $OUTPUT->main_content() ?>
</div> <!-- end of content -->
</div> <!-- end of templatemo_wrapper -->

(for Moodle 2.1 use)

<?php echo core_renderer::MAIN_CONTENT_TOKEN ?>
</div> <!-- end of content -->
</div> <!-- end of templatemo_wrapper -->

Next you will need to add the following code just before the closing div in the footer...so that the end of the frontpage.php looks like this. Notice I have added <div class="clearfix"></div> just before the closing div for the page. This helps with the flow of the page.

<?php
echo $OUTPUT->login_info();
echo $OUTPUT->home_link();
echo $OUTPUT->standard_footer_html();
?>

</div> <!-- end of footer -->
</div>
    <div class="clearfix"></div>
</div><!-- end of page -->
<?php echo $OUTPUT->standard_end_of_body_html() ?>
</body>
</html>

Save all these changes and providing you have followed the tutorial for cloning a theme correctly this theme should work in Moodle 2.1 or 2.2 depending which version of Moodle you coded the main content for.

I'm not saying this is easy...but it's fun to do if you have a certain amout of HTML and CSS skill you should be able to understand the way the template works.

Of course the theme is by no means finished as this only covers the front page, and even so there are elements in the frontpage where <img src"..." /> needs coding as per Moodle 2 requirements. A clue to how this is done can be found in the Moodle Doc tutorial Development: Themes 2.0 How to use images within your theme.

Also...as with the Paper Blog theme there is a Slider that uses jQuery so this Moodle Doc tutorial will help with that too.

Development: Using_jQuery_with_Moodle_2.0

Hope this does not put you off! LOL

Cheers

Mary