Convert HTML Template to Moodle Theme

Convert HTML Template to Moodle Theme

by Rajakumar Jillella -
Number of replies: 11
I'm using Moodle 3.0.2 version.

I have HTML template, Is it possible to convert HTML Template to Moodle Theme?


If yes, please guide me.


Thanks in Advance.

Average of ratings: -
In reply to Rajakumar Jillella

Re: Convert HTML Template to Moodle Theme

by Just H -
In reply to Just H

Re: Convert HTML Template to Moodle Theme

by Rajakumar Jillella -

1). We don't have possible to convert HTML template to Moodle theme?


I have installed klass theme. Added custom menu item "Contact Us".

Created "contact.php" file. And how to add default "header" and "footer" parts into custom file.

In reply to Rajakumar Jillella

Re: Convert HTML Template to Moodle Theme

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

There have been lots of html templates converted into Moodle Themes, but it is done manually by creating a theme based on that template and using the docs Jez has linked you to. So yes you can take an html template and use it as the basis for a theme, no you can't just take an html theme and use it in Moodle without following the theme creation guides.

Moodle uses various regions and divs as well as $OUTPUT from renderers that need to be included in various places. It also has set layout options for different page types (see the config.php of bootstrapbase for example).

If you want to add a contact page linked from the menu then you can create a page using the dev docs

https://docs.moodle.org/dev/Page_API

and you can see some working examples in the help pages I created for flexibase theme

https://github.com/roelmann/moodle-theme_flexibase/tree/master/pages

In reply to Richard Oelmann

Re: Convert HTML Template to Moodle Theme

by Richard Massey -
This is a really awesome use of Moodle. I recently purchased a template which has a sliced PSD layout, crossbrowser compatibility and Google map functionality included. Is embedding a complete website and all of it’s HTML/videos/link structure, etc. into a Moodle course, possible? The only concern I have is that it might display in a rather small window. How do I make the window that the website displays in bigger?

(Edited by Helen Foster to remove unsolicited advertising - original submission Tuesday, 22 March 2016, 12:47 PM)

In reply to Richard Massey

Re: Convert HTML Template to Moodle Theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi,

I don't have time to explain all that you might need to do to create a custom theme with all those extras, but I have made some great looking themes using the various elements/ideas found in those type of templates.

I would need to look at those templates first.

I'll reply after I have had time to check them out.

Cheers

Mary

In reply to Richard Massey

Re: Convert HTML Template to Moodle Theme

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

You have several options:

create a theme based on the template you have purchased (see Mary's comment)

OR

create your entire website as you have suggested then add it to your Moodle course as a URL link and choose the 'Embedded' option. But you are correct, this may end up displaying quite small in an embedded window so you may prefer one of the other options (Open or PopUp)


Richard

In reply to Rajakumar Jillella

Re: Convert HTML Template to Moodle Theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

The best way to do this is create a page in Moodle using the Add resource 'page '. 

To do this in Front page turn editing on...

  1. select Main menu in the ADD BLOCK.
  2. select Add Resource then choose 'Page' from the popup list.
  3. fill in the form with the name of the page 'Contact'.
  4. fill in all the areas that you are required to fill.
  5. save and display the page.
  6. make sure you copy the URL for this page.
  7. last of all add this URL to your menu item in the custom menu.
  8. Finally you can delete the Main menu block.

hope this helps?

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Convert HTML Template to Moodle Theme

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Mary is correct - if you are adding a Contact Me page for your site, then adding a Page resource in the front page is far and away the easiest way to achieve this. The suggestions I linked to are only more useful if the pages being created are part of a plugin (such as a theme) for distribution!

In reply to Mary Evans

Re: Convert HTML Template to Moodle Theme

by Rajakumar Jillella -

Mary,


I didn't get main menu in  "ADD BLODK" after turn editing on.

It's great help.


Thanks in Advance

In reply to Rajakumar Jillella

Re: Convert HTML Template to Moodle Theme

by Emma Richardson -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

Are you on the front page?  Are you sure that it is not there already?  Normally if something doesn't show in the Add Block and you are on the correct page, then it is because it has already been added.

In reply to Rajakumar Jillella

Re: Convert HTML Template to Moodle Theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

If you are not in the Frontpage then it will not be visible. If you are in the Frontpage then the Main Menu block will be there in the blocks as it is automatic, it's that I tend to delete it.

Best way to check is turn editing on and look at all the blocks the Main menu is the only block that displays the  + Add Activity or Resource