Adding a new font to your theme

I wanted to include a True-Type font to my moodle theme. And with some internet browsing, I have found the solution.

1) Go inside your theme folder and make a new folder called "fonts." In my own instance, I used this path:
mythemename/pix/fonts/

2)  Upload your .ttf file inside the "fonts" folder.

3)  Now add some code to the css to show the font. Go to your  mythemename/style/core.css file.

@font-face
{
    font-family: myfontname;

    src: url('mythemename/pix/fonts/myfontname.eot'); /* IE8-9 */
    src: url('mythemename/pix/fonts/myfontname.eot?#iefix') format('embedded-opentype'),  
          url('mythemename/pix/fonts/myfontname.ttf') format('truetype');

}

4)  Now that you declared your new font, you can start using it inside your theme

html,body 
{
    font-family: myfontname !important;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, input, textarea 
{
    font-family: myfontname;
} 

5) Remember to clear your theme caches in order to see the changes. You are done!

Add settings to a theme

This will show you how to add your own controls to the "settings" area of a theme.

1)  Go into theme/lang/en/theme_yourtheme.php.  Here create the actual names and descriptions of your setting. Save these names for use later in code.Here is my example:


$string['endcolor'] = 'Menu gradient: End Color';
$string['endcolordesc'] = 'Change the ending color of the gradient for menu bar.';


2)  Go into theme/settings.php.  Here you can add a new type of setting, referencing the new names you just created. For example, I'm going to add a new color picker:


// Menu background colour setting
$name = 'theme_yourtheme/endcolor';
$title = get_string('endcolor','theme_yourtheme');
$description = get_string('endcolordesc', 'theme_yourtheme');
$default = '#ffffff';
$previewconfig = NULL;
$setting = new admin_setting_configcolourpicker($name, $title, $description, $default, $previewconfig);
$settings->add($setting);

3) Go into theme/lib.php. Here we need to add functions that will replace the current color with our new setting's color.
--- Within the  function yourtheme_process_css($css, $theme)       function, you need to add some code to check for your new setting. Here is an example:


if (!empty($theme->settings->endcolor)) {
        $endcolor = $theme->settings->endcolor;   <-- here we make a new variable to store our settings.
    } else {
        $endcolor = null;
    }
    $css = yourtheme_set_menuendcolor($css, $endcolor);

-- You'll see that we just called a function on the last step that doesn't exist yet:
yourtheme_set_menuendcolor($css, $endcolor);

-- So now we need to create it. At the bottom of the document, outside of any other function brackets, create your new function:


function yourtheme_set_menuendcolor($css, $menuendcolor)
{
    $tag = '[[setting:endcolor]]';
    $replacement = $menuendcolor;
    if (is_null($replacement)) {
        $replacement = '#333333';
    }
    $css = str_replace($tag, $replacement, $css);
    return $css;
}


4)  Last step is to change the theme/styles/core.css file and insert our new settings.
background:[[setting:endcolor]]


DONE!
Now you know how to make basic settings for your theme file.
Please remember to "clear theme caches" or put your site into "theme designer mode" to see these changes take place in real time.

Copy a theme folder to create your own theme

I'm going to use the new "aardvark" theme as my base folder. I'm going to rename the files so it all points to "mytheme name" instead of "aardvark."

Every place I use the yellow highlighter below is the area in which you must replace with your own theme name.

1)  Make a new folder for your theme -- only use lowercase letters. Copy this name so you can reuse in the next steps.

2)  Go into theme/lang/en.  Rename the file to:   theme_newthemename.php
Go inside that same file.

$string['pluginname'] = 'newthemename';  <-- Only place you can use uppercase letters
$string['region-side-post'] = 'Right';
$string['region-side-pre'] = 'Left';
$string['choosereadme'] = 'Aardvark is a three column fixed-width theme for Moodle 2.1+ originally created by Shaun Daubney for <a href="http://www.newbury-college.ac.uk">Newbury College</a>';
$string['configtitle'] = 'newthemename theme';  <-- use lowercase here

3)  Go into theme/config.php. Rename the following using lowercase letters here
$THEME->name = 'newthemename';  
$THEME->csspostprocess = 'newthemename_process_css';

4)  Go into theme/lib.php. Use the finder box to locate and replace all the "aardvarks" to "newthemename."
     Go into theme/settings.php and do exactly the same:  find and replace.

5)  Go into theme/settings.php. Change this line:  $plugin->component = 'theme_newthemename';