Two colors in header

Two colors in header

by Saeed Amiri -
Number of replies: 5

Hi every one

This is my first post in moodle forums. I'm quite new in using moodle in general. At present, I am trying to adjust the colour of the header in the theme "leatherbound" which I have duplicated before making the necessary changes. What I'd like to do is to have a header of two colours (not logo images) set vertically side by side. Can any one help me on this, please?

Average of ratings: -
In reply to Saeed Amiri

Re: Two colors in header

by Saeed Amiri -

By the way, I'm using the latest version of moodle.

In reply to Saeed Amiri

Re: Two colors in header

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

Hello and welcome Saeed,

When you say you want the header to have two colours side by side, I am assuming something like this...

If so then the easiest way to do this is add another <div></div> tag inside the page-header in the layout files frontpage.php and general.php

You can then style it to only show up in the first part of the header using height and width, as well as add a background colour just using CSS, at the same time setting the page header to the second background colour.

I hope that helps?

EDITED:

And here is the code to test out in your copy_of_leatherbound/layout/general.php

As you will see I have also added in-line styles to the various elements, if this works as you want it to, you can remove the in-line styles and add the actual css from those styles to your theme's stylesheet.

<?php if ($hasheading) { ?>
<div id="page-header" style="width: 100%; height:125px; padding: 0; margin: 0;">
<div id="red" style="width: 50%; height:100%; padding: 0; margin: 0; background-color: #DA5013;">
    <div id="page-header-wrapper" class="wrapper clearfix" style="width: 100%; height:100%; padding: 0; margin: 0; background: none;">
        <h1 class="headermain inside" style="padding-left: 25px;"><?php echo $PAGE->heading ?></h1>
    </div>
</div>
<div class="headermenu" style="position: absolute; top: 10px; right: 10px;"><?php
    echo $OUTPUT->login_info();
if (!empty($PAGE->layout_options['langmenu'])) {
    echo $OUTPUT->lang_menu();
}
    echo $PAGE->headingmenu ?>
</div>
</div>
<?php } ?>

The finished result looks like this...

Mary

Attachment leatherbound.jpg
In reply to Mary Evans

Re: Two colors in header

by Saeed Amiri -
Many thanks for your kind detailed reply. I'll do as you have explained and will report back the outcome. I'm learning quite a lot since I have started the moodle website project and feel quite thrilled about it!
In reply to Mary Evans

Re: Two colors in header

by Saeed Amiri -

Hi Mary

Every thing works ok except that I had to change the "Height" parameter to 104 for the colour brown to cover the colour orange completely. 

At present, I'm experimenting with changing some other parameters and witnessing the result.

In reply to Saeed Amiri

Re: Two colors in header

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

That's OK - experimenting is good as you learn quite a bit when things don't work out as expected.