Themes

 
 
Picture of David Fawcett
Creating Themes using website templates
 

Where do Start if I want to use free templates from sites like website template and templatemo.com into basic Moodle Layout?

 

Our school district Moodle is on version 2.2.

 
Average of ratings: -
Me
Re: Creating Themes using website templates
Group Moodle Course Creator Certificate holders

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.

 
Average of ratings: -
Picture of Richard Oelmann
Re: Creating Themes using website templates
Group Particularly helpful MoodlersGroup Testers

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

 
Average of ratings: -
It's only an avatar...
Re: Creating Themes using website templates
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

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

 
Average of ratings:Useful (1)
It's only an avatar...
Re: Creating Themes using website templates
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

I followed my own instructions posted here and this is where I am up to...it's looking really good. I'll add the extra CSS I added to the original template to get to where this theme is as seen below. I'll do this in another post.

smile

 
Average of ratings:Useful (1)
It's only an avatar...
Re: Creating Themes using website templates
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Here are the extra styles I added to templatemo_style.css

First I added html to the body css like so...

html, body {
    margin: 0;
    padding: 0;
    line-height: 1.5em;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    color: #000000;
    background: #f2e7ca url([[pix:theme|images/templatemo_body]]) top center no-repeat;
}

I then added the h2.headingblock to .post_sectionh2 l(which is in the templatmo_style.css at about line 175/176 like so...

h2.headingblock,
.post_section h2 {
    font-size: 28px;
    color: #749d07;
    padding: 10px 0 10px 50px;
    background: url([[pix:theme|images/templatemo_header]]) no-repeat bottom left;
}

And finally I added these extra styles to the foot of the CSS page

/* MOODLE STYLES
-------------------------*/
.block,
.generalbox,
.forumpost {
    border: 0 none;
}

.coursebox .info,
.coursebox .summary {
    width: 100%;
    float: left;
}

I also made some changes to the frontpage. I'll add those in the next post.



 
Average of ratings:Useful (2)
It's only an avatar...
Re: Creating Themes using website templates
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

First of all I removed the HTML and SCRIPT code for the slider.

then I made a couple of small changes to the side block code like this...

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

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

This will ensure it is styled now by the templatemo_style.css.

And basically that's it!

Cheers

Mary

 
Average of ratings:Useful (1)
Me
Re: Creating Themes using website templates
Group Moodle Course Creator Certificate holders

That's a really awesome looking theme, Mary!

 
Average of ratings: -
It's only an avatar...
Re: Creating Themes using website templates
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

This would look good in one of your MoodleBite videos Miriam!  You are very welcome to use it.

I'm just working on a dynamic little menu to slot into that white area on the side of the header, then I plan on adding a blocks in themain content area of the front page and add some custom sittings just to finish it off.

It's turned into a good little project.

Cheers

Mary

 
Average of ratings: -
Me
Re: Creating Themes using website templates
Group Moodle Course Creator Certificate holders

Thanks, Mary, I may just take you up on that offer. I need to make more video tutorials for theme design, as later on in the course I relied more heavily on lessons because of the amount of coding required.

Will you include the creation of the dynamic menu for the white area into the tutorial? Because that would be really great.

 
Average of ratings: -
It's only an avatar...
Re: Creating Themes using website templates
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

I can add the menu part too...it's easy enough.

I need more links to add, so was trying to find out which page is 'my public'. Going off the $THEME->layout in the themes config.php you have 'My dashboard' and 'My public' the one which is only seen by oneself and the public one must be the one seen by the public. So going off Moodle forums you can see the profile and the persons 'homepage'. But which is which?

I need to sort this one out first.

I experimented and made 'My dashboard' layout use 'frontpage.php' so needed to add navbar visible in My Dashboard but not in Frontpage.  So all this was done in config.php 'options', with $hasnavbar declared in top of frontpage.php.  This works great, and so mydashboard uses the template view and general is just a set of plain pages in comparision, but still using the template styles.

I'm amaised at how little CSS you actually need.

Well it's Easter comming up so I wont be doing any of it this weekend. smile

Good luck with the tutorial.

Mary

 
Average of ratings: -
Picture of Richard Oelmann
Re: Creating Themes using website templates
Group Particularly helpful MoodlersGroup Testers

Mary, another great looking theme and, as usual, a fantastic set of directions for everyone to use.

As always, the time and effort you put in to supporting everyone on these forums is unbelievable. Thank you from all the community!

Rich

 
Average of ratings: -
It's only an avatar...
Re: Creating Themes using website templates
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Well this is the best job I have ever had in my life...I absolutely love it...and as my school reports always said...Mary excels as the things she likes and disregards the rest...how very true.  I don't think my husband is too enamored at this 'Moodle Hobby' of mine as the pile of ironing increases exponentially, as he is forced to iron his own shirts now! LOL smile

But thanks for your support Richard!

I am well pleased with the way this theme turned out. It just goes to show that you can use other layouts for themes and not be totally goverend by the layout that was choosen for Moodle Base theme 2 years ago.

The only problem is that you still need page-header and page-footer so that embedded pages work in Moodle because of the algorithm JavaScript uses to calculate the distance between these two points on the page.

I think I'll add this as a new Moodle Toot

Cheers

Mary

 
Average of ratings: -
Picture of Richard Oelmann
Re: Creating Themes using website templates
Group Particularly helpful MoodlersGroup Testers

I know the feeling Mary smile Getting paid to do what I was doing as a 'hobby' before is wonderful - the only drawback is spending so much time on the computer, with specific support tasks to do in work, I don't get to be on the forum or do my own thing with the themes etc as much as I did before . A non-issue though for me. It's great to be enjoying what I do for a living!!!

As for the support - well you know its there, but sometimes its nice to see it given in public isn't it smile

I did start having a play with a few of the templatemo templates a while back as I posted above - but just got to the stage I needed at the time before other priorities got in the way. I've got a rewrite of flexi planned over the Easter break (although looking at the size of the job I've given myself it may take a bit longer than that!) as well as trying to look at what's going on with 2.3 - but after that I'm going to try to make time to get back into some theming and so on and take another look at some of these templates smile

Look forward to seeing this as a finished theme released in the 'wild' :D

Rich

 
Average of ratings: -
It's only an avatar...
Re: Creating Themes using website templates
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

I love the templates as you get the images and the simple set of CSS rules which seems to be a standard set, used in may of the templates. Mind you I choose the ones where you can alter the background as you do need space for reports and graders and such.

Cheers

Mary

 
Average of ratings: -