Custom Headers using the Additional HTML

Custom Headers using the Additional HTML

by Matthew Koelling -
Number of replies: 6

Sorry if this isn't the right section for this question. Let me know and I will move it to a different forum.

So in Moodle 2.5 their is an additional HTML option that lets you add code that shows up regardless of the template. In the past we used to modify the templates with our college header, but I was wondering if we could use this to add our custom header.

With some experimenting I have been able to do this, but depending on the template used it looks great to horrible. Is there maybe a way to detect what template is being called and load a different style sheet based on that.

Googling hasn't been much help and was curious what others were doing out there. Thank you in advance!

Average of ratings: -
In reply to Matthew Koelling

Re: Custom Headers using the Additional HTML

by Christian Herman -

What templates are you referring to?

Average of ratings: -
In reply to Christian Herman

Re: Custom Headers using the Additional HTML

by Matthew Koelling -

Sorry I meant Theme. Sorry about the confusion.

Average of ratings: -
In reply to Matthew Koelling

Re: Custom Headers using the Additional HTML

by Christian Herman -

Is it necessary that users be allowed to select their own themes?  Removing that capability would immediately solve your problem.

Otherwise, you'll need to load each theme, use dev tools in your browser to inspect the way the theme handles the header, and modify the theme's CSS to better deal with the header.  Each theme already has it's own stylesheets in the moodle/theme/<themename>/styles/ folder.

Average of ratings: -
In reply to Christian Herman

Re: Custom Headers using the Additional HTML

by Matthew Koelling -

I wish it wasn't but professors feel setting it to one template limits there academic freedom.

I was modifying each theme before so i guess I will just do that again, I was just curious if anybody had taken advantage of the Additional HTML area to do this in a more efficient manor.

Thank you for the help.

Average of ratings: -
In reply to Matthew Koelling

Re: Custom Headers using the Additional HTML

by Richard Bakos -

Sorry but, the "Additional HTML" settings under the Sys Admin->Appearance menu applies to all themes being used throughout the course... Unless the theme has it's own "Additional HTML" settings within the themes settings page, the only way to do this is a theme by theme basis via their respective CSS and layout files. If you are creating your own themes you could give each one it's own "Additional HTML" settings section. 

Another solution that might be easier is to give each HTML element in the additional HTML it's own class and create CSS rules in each available themes CSS file(s) for the elements you want in the "Additional HTML".

Let me break it down for you like this:

  1. In the config.php file for each available theme look for the sheets array and add an item to the array like so:

    $THEME->sheets = array(
        'pagelayout',
        'core',
        'settings',
        'additional_html.css' /* or whatever you want to name the file */
    );

  2. Here is an example of some additional HTML, each element assigned with it's own class:

    <div class="add-html-container">
        <a href="http://eye.go.somewhere" class="add-html-link">
            <img src="" class="add-html-image" alt="An Image">
        </a>
    </div>

  3. Now create an "additional_html.css" file in the style folder for each available theme in your moodle installation. In each stylesheet, use the same class names used in the additional HTML but modify the CSS rules attributes to suit the look of each theme. So, in the additional_html.css file for the afterburner theme for example we would have the following rules based on the HTML example above:

    .add-html-container {
        width: 100%;
        max-width: 1024px;
        background: #fff;
        border-left: 1px solid #eee;
        border-right: 1px solid #eee;
    }

    .add-html-link {
        color: #337F8C;
    }

    .add-html-link img {
        width: 100%;
        height: auto;
    }

    .add-html-image {
        display: block;
        margin: 20px 0 10px 20px;
        float: left;
    }

    Now, we can style those same elements completely differently in the Binarius theme for example:

    .add-html-container {
        width: 100%;
        max-width: 960px;
        background: #555;
    }

    .add-html-link {
        color: #f14e16;
    }

    .add-html-link img {
        width: 100%;
        height: auto;
    }

    .add-html-image {
        display: block;
        margin: auto;
        float: right;
        text-align: center;
    }

Now, I have not tested this but it certainly should work. The initial setup may take a little time but once it is set up, making changes to the HTML only has to occur in one spot. I hope all of that made sense. Let us know if this solves the problem and if you have any questions about anything I went through.

Average of ratings: Useful (3)