Themes - how do I get started?

Themes - how do I get started?

by Jenny Toller -
Number of replies: 5
When I read the documentation, I thought that creating my own theme would be a simple matter of copying an existing theme then editing the css files, however, I have got rather stuck rather quickly and I could really do with a few tips ;)

I copied the standardlogo theme into mytheme folder and duly selected mytheme in configuration > themes. So far so good and it displays as expected. However, there are of course no css files in the standardlogo theme folder. So, my questions are:
  1.  How do I find out where they are? I assume it likely that they are in the standard theme folder, but in the config.php file I also noticed a reference to the standardwhite theme so, maybe they are dotted all over the place... Is it likely that I will have to refer to config.php of other themes to get a complete list of what I am looking for?
  2. When I have found the css files, do I then copy them to mytheme folder or do I have to recreate them in folders such as mystandardtheme? What is the best practice here?
  3. I have noticed that some of the graphics used in standardlogo are stored in standard and standardwhite - should I copy them to mytheme folder?
  4. Is there anywhere where I can read up more about how to edit the config.php file? I really don't have a clue how to go about this... (I'm stuck at the first line and the first comment.)
  5. I would also like to create a print.css file but I don't know how to reference this (presumably from config.php)
  6. Is it possible to have all the css files and graphics used in my mytheme folder? (I would find this much easier and less confusing to work with.)
Sorry for all the basic questions but if anyone can put me on the right track I would really appreciate it - thanks!

Jenny
Average of ratings: -
In reply to Jenny Toller

Re: Themes - how do I get started?

by Patrick Malley -
I can answer a few of your questions. Others will have to help with the rest.

All of your CSS files should be in the theme folder for the theme you currently have selected. However, by default, the CSS in Moodle's themes 'cascade' down to the CSS in the Standard theme. So, whatever theme you are using is calling up BOTH the CSS from your file and from the standard file.

It may be the case (but am not sure because I don't use this theme) that the standardlogo theme calls up only the standard theme's CSS and perhaps a new header (that allows for a logo)??? This could be the reason you're not finding the CSS files in your theme folder.

Typically, the config.php will ask you which CSS files you wish to call up within your theme folder. Then, it will ask you if you would like to also search the standard theme folder for additional CSS files.

With the exception of very small CSS files that reside within each block, all CSS files come from either your current theme folder, the standard theme folder, or both.

To alter your theme, simply alter the CSS files in your chosen theme folder. If one does not exist, then create one calling it what you like. Then, alter the config.php file to call up that CSS file before calling up the standard theme CSS.

There is no reason to copy image files over to your theme unless you plan to choose different images.

You can set the config file to call up any css file you want in your current theme's folder. You can also set the config to search ONLY your theme folder to search for images. By default, Moodle will call up images from the standard theme. You can also tell Moodle NOT to look in the standard folder for CSS files. Again, all this is set through config.php.

It is possible to have all the css files and graphics in your theme folder. This is set up through the config.php. I would advise you to create your own css that builds upon the standard theme to create your modified theme (unless you're going for a major modification). The argument is that your theme will then be safe from becoming too outdated with future upgrades. Plus, you save yourself a lot of headache.

I hope this helps. I am one of the newer theme modifiers in this forum. Perhaps others can answer your questions more thoroughly. Let me know if I can be of more help.

PS: I cannot help with print.css. Perhaps others will be more useful on that.
Average of ratings: Useful (1)
In reply to Jenny Toller

config.php explained

by Patrick Malley -
Here is the best I can do explaining config.php files you may be interested in:

$THEME->sheets = array('yourstyle'); - Here is where you put the name of your custom css files. Do not include the .css after the name of your theme.

$THEME->standardsheets = true; - Set to false to NOT look for the standard sheets.

$THEME->parent = ' '; - You can set Moodle to look in a parent theme in the same way that it would look to the standard theme as specified above. If you were to do this, you would put the name of that theme folder in the provided space.

$THEME->parentsheets = false; - The same as above, but not an entire theme - only css files.

$THEME->modsheets = true; - Turns off the sheets for modules.

$THEME->blocksheets = true; - Turns off the sheets for blocks.

$THEME->custompix = true; - Can be set to false to look only in your theme folder for image files.

Average of ratings: Useful (1)
In reply to Patrick Malley

Re: config.php explained

by Jenny Toller -
Dear Patrick,

Thank you so much for all of your help - it was very kind of you to go into this level of detail! I 'get' it now and have managed to edit config.php and upload some css files into my theme folder to check that I am in control of the css. Although I am confident using css, I am taking your advice and adapting the files from the standard theme to start with. Once I have used Moodle for a year or two, I will probably be ready to be a bit more daring big grin. Anyway, thanks again for your clear explanation - the light came on and I now have lift-off, so to speak. I am sure that others will find this useful as well.

Jenny
In reply to Jenny Toller

Re: Themes - how do I get started?

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi Jenny,

I hope you have thoroughly studied the Themes Documentation. In order to find out how different theme creators go about using the standard theme, etc. I recommend having a good look at the various themes provided with current Moodle distributions.

Joseph

In reply to Joseph Rézeau

Re: Themes - how do I get started?

by Jenny Toller -
Joseph - yes, thanks for this - and I'm still studying the documentation! I have only just installed Moodle so I will be playing safe for my first theme. Everything is going fine so far now that I have sussed out the general concept and how to edit config.php.

With best wishes,

Jenny