Profile Block in the Header of Formal White theme?

Profile Block in the Header of Formal White theme?

by Katerina Nemcova -
Number of replies: 24

Hi,

Would anyone know please if there is a painless method how to add a profile block to the header of the Formal White theme (Moodle v2)? What I mean is having extra options like: the profile image, login/out, update profile, even possibly 'Good morning' etc options located in the right hand corner of the header.

I have tried to find any posts/references to this, but no luck so far... Any ideas?

Many thanks!

Katerina

Average of ratings: -
In reply to Katerina Nemcova

Re: Profile Block in the Header of Formal White theme?

by Hartmut Scherer -

Hi Katerina,

The Zebra theme by Daniel Wahl and the discussion here and here may give you some clues.  Sorry, but I am not a programmer.

With kind regards,

Hartmut

In reply to Katerina Nemcova

Re: Profile Block in the Header of Formal White theme?

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

Katerina,

Nothing is easy when it comes to adding extra bits of code from one theme to another.

If you want a user 'Login' element, with provision for inputting the user name and password and also having a guest avatar which, when logged-in, changes to the user's avatar, and also displays something like...

Katerina Nemcova

My Profile | My Courses | Logout

 

 

Then I can help you do this, but I must warn you it is quite a difficult thing to do if you are not familiar with HTML PHP & CSS

HTH

Mary

In reply to Mary Evans

Re: Profile Block in the Header of Formal White theme?

by Katerina Nemcova -

Hi Mary,

That is exactly what I am trying to accomplish. We have been using your & Sean's Aardvark in Moodle 1.9 which worked absolutely great, but now changing to Formal White for Moodle 2 (not my decision!)  and it would be great to keep some of the useful features from your theme e.g. the profile block, calendar link in the top menu etc.

I am a beginner to PHP/CSS but a very fast learner so any help would be absolutely great please (as and when you have time of course!). I can send you a link to the site.

Many thanks

Katerina

In reply to Katerina Nemcova

Re: Profile Block in the Header of Formal White theme?

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

Hi,

Best thing may be for you to send me your email in a private message here, then I can send you the files you need to do this change.

The date is easy to add although we are finding now that IE8 & IE9 don't recognise its right-hand location and so floats it to the left. So this makes it a bit complicated to do but at the same time is actually easier as you just use XHTML instead! I just need your preference for date display. Do you want date only or date and time as well? The latter you can see HERE

Also I am assuming you want the login fields as explained in my last comment? With My Profile and My Courses and Logout and Picture all on the right-hand side in the header?

If you let me have you email, I should be able to send you the files in the next day or two.

HTH

Mary

 

In reply to Mary Evans

Re: Profile Block in the Header of Formal White theme?

by Katerina Nemcova -

Hi Mary,

Hope you are well. This discussion took place just a year ago, and since then I have been using the Aardvark Post-IT, but with all the issues with themes and Moodle 2.3, I've been working again on customising the Formal White theme. The very last thing I am missing is adding the profile image to the header and then the template will be perferct! Would you be still able to help me out please on adding the profile image to this theme (showing exactly as in the post above)?

If you are busy, no problem.

Many thanks

Katerina

In reply to Katerina Nemcova

Re: Profile Block in the Header of Formal White theme?

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

I'm fine thanks...just fixing a few BUGS in Moodle core at the moment...but stopped by to see what was cooking at the forum. smile

About the profileblock how do you want it to look and work...

BEFORE LOGIN

  • Do you the login to look like Aardvark Postit?
  • With the username/password and login button? 
  • Do you want an avatar placeholder too?

AFTER LOGIN

  • Do you want a 'Welcome message' befor USERNAME? If so what?
  • Do you want to use the FULLNAME or just firstname?
  • Do you want My Courses - My Profile  - Logout and a profile avatar?

If this is all you want then I can create the files if you tell me which version of Formal White you are currently using.

Cheers

Mary

In reply to Mary Evans

Re: Profile Block in the Header of Formal White theme?

by Katerina Nemcova -

Hi Mary,

What a star you are - many thanks! That is exactly what I need. I'm using Moodle 2.3 and the current formal white version is 2012061700. 

To your questions:

BEFORE LOGIN

  • Do you the login to look like Aardvark Postit?  yes please, if possible as I (and all our users) really like that design including the avatar placeholder
  • With the username/password and login button? yes please
  • Do you want an avatar placeholder too? Yep

AFTER LOGIN

  • Do you want a 'Welcome message' befor USERNAME? If so what? Would be great to have a short and simple message e.g. 'Hi'.
  • Do you want to use the FULLNAME or just firstname? Just the first name please
  • Do you want My Courses - My Profile  - Logout and a profile avatar? Absolutely - a great feature

Thanks again Mary, and If you need access, please let me know

Thanks

Katerina

In reply to Katerina Nemcova

Re: Profile Block in the Header of Formal White theme?

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

I was playing around with this last night...it's almost finished.

I'll test it on Formal White (2.3) and let you have the files.

I can't rmember if I have your email, so can you send me that in a message?

By the way I am in the process of changing Aardvark_Postit to have a different dropdown block while we get the moving blocks problem sorted out. Here is a snapshot of the new profilebar...

Post-It

Cheers

Mary

In reply to Mary Evans

Re: Profile Block in the Header of Formal White theme?

by Katerina Nemcova -

Many thanks Mary - I've just PM you.

I really like the new profile bar - the idea to have a Postit notes with messages on each side is great and very useful idea (at least for our Moodle site)

What a great job! Moodleland would be lost without you!

Cheers

Katerina

In reply to Katerina Nemcova

Re: Profile Block in the Header of Formal White 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 am just about to upload it to the Moodle Themes directory.

In reply to Mary Evans

Re: Profile Block in the Header of Formal White theme?

by Katerina Nemcova -

Morning Mary,

In the main theme directory? I don't see it there

Cheers

Katerina

In reply to Katerina Nemcova

Re: Profile Block in the Header of Formal White theme?

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

Yes in the Moodle Themes directory.

Here is a link...

http://moodle.org/plugins/pluginversions.php?plugin=theme_aardvark_postit

In reply to Mary Evans

Re: Profile Block in the Header of Formal White theme?

by Katerina Nemcova -

Aah - I thought you meant the formal white. sorry

 

In reply to Katerina Nemcova

Re: Profile Block in the Header of Formal White theme?

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

I'll email you the formal white profileblock when I have tested it somemore.

Sorry about the confusion.

In reply to Mary Evans

Re: Profile Block in the Header of Formal White theme?

by Katerina Nemcova -

Great, thanks Mary

In reply to Katerina Nemcova

Re: Profile Block in the Header of Formal White 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 have finished working on this now.

The thing is you will need to add some code to your existing theme to make it work.  Can you do this if I add the files here, and give you some instructions? That way others might benefit too?

smile

Mary

In reply to Mary Evans

Re: Profile Block in the Header of Formal White theme?

by Katerina Nemcova -

Absolutely - no questions about that! Let's post it here and hopefully others will be able to replicate this too as i think it really improves the theme!

Many thanks again Mary, I appreciate your help

Katerina

In reply to Katerina Nemcova

Re: Profile Block in the Header of Formal White theme?

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

OK...here is what you need to do...

Assuming you are using the Formal White theme

  1. Download and place the attached profileblock.php into the formal_white/layout directory
  2. Using Notepad or a Text Editor OPEN formal_white/layout/frontpage.php
     and add the following code (as shown below), just inside the headerlogo div...
    I have grayed out the original html to give you an idea where to place the code...just add the hightlighted line...and SAVE
    <div id="headerlogo">
        <img src="<?php echo $logourl ?>" alt="Custom logo here" />
        <?php include('profileblock.php'); ?>
    </div>
  3. Do the same again for formal_white/layout/general.php and formal_white/layout/report.php
  4. With formal_white/layout/report.php still open change this line...
    from THIS...

    <?php echo core_renderer::MAIN_CONTENT_TOKEN ?>

    to THIS...

    <?php echo $OUTPUT->main_content(); ?>

  5. Add the following $string to the end of the list in
    formal_white/lang/en/theme_formal_white.php

    $string['usergreeting'] = 'Hi {$a}!';

  6. COPY and PASTE the following CSS rules to your Custom CSS box found if you goto...
    Site Administration > Appearance > Themes > and CLICK the Formal White settings page link...

    Profileblock
    -----------------------*/
    #loginbox {
        float: right;
        text-align: right;
        height: 30px;
        margin: 30px 0 0;
        padding: 0;
        width: 500px;
    }
    #loginbox .login-row {
        height: auto;
        margin-top: 30px;
    }
    #loginbox .common-row {
        display: inline;
    }
    #loginbox ul {
        float: right;
        margin: 0;
    }
    #loginbox ul li {
        display: inline;
        padding: 0;
        margin: 0;
    }
    #loginbox ul li.top {
        display: block;
        padding: 0;
        line-height: 2;
    }
    #loginbox img.guestpicture,
    #loginbox img.userpicture {
        float: right;
        padding: 10px;
        height: 50px;
        width: 50px;
    }
    #page-header .logininfo {
        display: none;
    }
  7. DON'T FORGET to SAVE your settings
  8. NEXT go to Site Administration > Development > Purge all cache

And that's it....refresh your browser and you should see the prifile block.
Also since this settup uses the headerlog dive, you will need to make sure that Logo is set as the default in the Formal White custom settings page.

If you have any problems let me know and I'll help you fix theme...although I will not be around tomorrow during the day.

Cheers

Mary

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

Re: Profile Block in the Header of Formal White theme?

by Katerina Nemcova -

Many thanks Mary - what a star you are! It's working great and looking amazing!

I cannot thank you enough for helping me do this.

Katerina

In reply to Katerina Nemcova

Re: Profile Block in the Header of Formal White theme?

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

You are most welcome...So glad it worked!

In reply to Mary Evans

Re: Profile Block in the Header of Formal White theme?

by Katerina Nemcova -

It's working a treat!!

Mary ... at some point, when you get a minute and are done helping all those other people, can you please tell me how to change the log-out button to a link (as are the My Profile and My courses links). I know it's done in the profileblock.php and have tried to change it, but so far no luck.... but only when you have the time!

Many thanks!

Katerina

In reply to Katerina Nemcova

Re: Profile Block in the Header of Formal White 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 have just been looking at your site and was sent to the login page, do you have FORCE login enabled? If so the profile block login on boxes are not needed. In which case I need to change that for you as the site header looks all distorted the way it is now...at least it is in my 1024 x 768 browser.

To answer your question about the login link. Just open Profileblocks and search for "button" you will then find the button tags around the logout...just remove them like so...

<button><?php echo get_string('logout'); ?></button>

In reply to Mary Evans

Re: Profile Block in the Header of Formal White theme?

by Katerina Nemcova -

Hi Mary,

Yep, I've got forced login enabled.

I wonder if the distortion you see is caused by me changing the loginbox width from 500px to 345px as the header area with my wide logo is now too wide to display correctly  when one connects a PC to a projector - then what happens is that the profilebox 'jumps' one row down and hides beneath the menu bar  as it does not have enough space to stretch.

I have now changed the logout button to a link (thanks!) and the My profile/courses/Logout  was misaligned, so I changed the #loginbox ul li.top line-height from 1 to 3 and it seems to look ok (on my system at least...)

Cheers

Kat

In reply to Katerina Nemcova

Re: Profile Block in the Header of Formal White theme?

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

I was thinking that you don't really need the login part of the profileblock.php so why not delete that section...by just deleting the login-row  like this...

<?php
    if(!isloggedin()) { ?>

        <div id="loginbox">
            <img class="guestpicture" src="<?php echo $CFG->wwwroot;?>/user/pix.php?file=/<?php echo $USER->id;?>/f1.jpg" width="50" height="50" alt="<?php echo get_string('guest');?>" title="<?php echo get_string('guest');?>" />

            <div class="login-row">
                <form id="login" method="post" action="<?php echo $CFG->wwwroot; ?>/login/index.php">
                <input class="input" placeholder="<?php echo get_string('username'); ?>" type="text" id="username" name="username">
                <input class="input" placeholder="<?php echo get_string('password'); ?>" type="password" id="password" name="password">
                <input class="button" type="submit" value="Login" id="loginbtn">
                </form>
            </div>
        </div>
        <?php
    } else {
     ?>