Moodle 2.5 Header logo customisation

Moodle 2.5 Header logo customisation

by Andy Carter -
Number of replies: 10

Hi,  I'm a beginner here and I'm struggling to modify the logo on the front page of my trial site (local host).  I understand that you can add an address for a file in Site administration >Appearance >Themes> Arialist (in my case).  What I don't get is where this logo file comes from.  I have added the logo to my private files, but that doesn't seem to give it an address.  I stuck it in a question and that worked for a bit, but I'm bodging at this point. 

Can someone tell me what the propper way to do this is?  Any help appreciated!

Andy C

Average of ratings: -
In reply to Andy Carter

Re: Moodle 2.5 Header logo customisation

by Andy Carter -

Ok, this always happens!  Half an hour later I find a way!  Anyone else who is struggling with this should check this out:

 

 

This guy explains a workaround that involves adding the image to a new HTML block, then with firefox, find the address of the image to paste into the logo address mentioned above and finally hide the unwanted block.  Works a treat - excellent!!

 

Average of ratings: -
In reply to Andy Carter

Re: Moodle 2.5 Header logo customisation

by Julian Ridden -

Another block I prefer to do this with is the Main Menu block. It is perfect for situations like this.

Regards

Julian

Average of ratings: Useful (1)
In reply to Julian Ridden

Re: Moodle 2.5 Header logo customisation

by Judy Hsu -

I have a related question. I'm running 2.4.5 and would like to add a customized logo to the FormFactor theme, Is it possible to do it without touching the codes? If it really require touching the codes, how do we do it? Also is there any Moodle stock theme that has black/red color scheme and is similar to themes like "Afterburner" that can be easily inserting logo? Thanks for your help...

Average of ratings: -
In reply to Judy Hsu

Re: Moodle 2.5 Header logo customisation

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

First of all there is no way I can see of adding a logo to formfactor without touching the code as it does not have a settings page. So to add a logo (as a background image on the page-header-wrapper):

1. add your logo image into the pix folder in your copy of formfactor (It's always a good idea when you are changing a core theme to first of all take a copy and rename the theme - in ALL the necessary places see http://docs.moodle.org/dev/Cloning_a_theme for more details)

2. edit the page-header-wrapper line in yourformfactortheme/styles/core.css as below - you don't need to add the file type (eg .png/.jpg) on the file name as Moodle will search for that automatically. The two 10px values are indents to allow you to position your image more accurately

#page-header-wrapper {
    margin:0 50px;
    background:transparent url([[pix:theme|your_image_name_with_no_filetype]]) no-repeat 10px 10px;
}

3. You may need to edit the css further to add heights etc to some components to allow for the fact that the theme now has a logo.

As for themes with a red/black colour scheme - i can't think of any off the top of my head, but there are several of them with settings pages which allow you to alter the colour scheme without touching the code itself (There are even more of these in the plugins database e.g. my own krystle theme allows colour schemes to be set and logos to be added - but so do many others smile )

Richard

Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: Moodle 2.5 Header logo customisation

by Judy Hsu -

Hi Richard, thanks so much for your help!

By the way, is there a list somewhere online or could anyone tell me that in Moodle 2.4.5 or 2.5.1, what stock themes can easily insert with a top banner or logo? Thanks you for your help...

Average of ratings: -
In reply to Richard Oelmann

Re: Moodle 2.5 Header logo customisation

by arpat arpat -

Richard,

I trying to put muy logo in the FormFactor and I follow your indications:

My core.css is as follows, but evidently I made a mistake because the logo doesn't shows. What do I make wrong??

Thank you

body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,input,textarea { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; }

/* Header
-------------------------*/

#page-header-wrapper { margin:0 50px;
background:transparent url([[pix:theme|logo]]) no-repeat 10px 10px;}

#page-header { float:none; }
#page-header .headermain { margin:0.75em 0;font-size:2em; }
#page-header .headermenu a:hover { color:#fff; }


#page-site-index .headermain { margin:0.85em 0;font-size:2.5em; }
#course-header { margin:0 50px; }

/* Menu Navigation
--------------------------*/

#page-navigation { margin:0;padding:0 40px;font-size:1.1em; }
#page-navigation li { list-style:none;float:left; }
#page-navigation a { display:block;padding:5px 10px; }


/* Breadcrumb
---------------------------*/

.navbar { padding:3px 50px; }
.navbar .breadcrumb { font-size:0.8em;color:#555; }

/* Content
---------------------------*/

#page-content-wrapper { margin:10px 50px; }

/* Tabs
---------------------------*/

.tabtree .tabrow0 li.here a { background:#fff url([[pix:theme|gradient-sb]]) repeat-x 0 0; }
.tabtree .tabrow0 .tabrow1 li a {background: none !important;}

/* User
---------------------------*/

.userinfobox .content {border-width: 2px;background: url([[pix:theme|gradient-sb]]) repeat-x 0 0; }

/* Forms
------------------------*/

.mform fieldset {border-color: #ddd;}
.mform legend {border: 1px solid #ddd;padding: 2px 7px;background: url([[pix:theme|gradient-sb]]) repeat-x 0 -25%;}
.mform .btn-cancel { color: #BF3503; text-decoration: none; }
.mform .btn-cancel:hover, .mform .btn-cancel:focus { color: #3f5c10; text-decoration: none; }

/* Footer
--------------------------*/

#page-footer { margin:25px 0; }
#page-footer .logininfo  { margin: 1em 0; }

#course-footer { margin:0 50px; }

/* custum menu */
#custommenu {
    margin:0 50px;
}

#custommenu,
#custommenu .yui3-menu,
#custommenu .yui3-menu-content {
    border-width:0;
}

#custommenu {
    background:url([[pix:theme|gradient-sb]]) repeat-x 0 30%;
    padding-top: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
}

#custommenu .yui3-menu-label,
#custommenu .yui3-menuitem-content {
    border-width:0;
}

#custommenu .yui3-menu-content .yui3-menu-content {
    border: 1px solid #ccc;
    border-top-width: 0;
    margin-top: 3px;
}

#custommenu .yui3-menu-content .yui3-menu-content .yui3-menu-content {
    border-top: 1px solid #ccc;
}

#custommenu .yui3-menu-content .yui3-menu-content .yui3-menuitem-content,
#custommenu .yui3-menu-content .yui3-menu-content .yui3-menu-label {
    padding-top: 5px;
}

#custommenu .yui3-menu-label,
#custommenu .yui3-menuitem-content {
    color:#BF3503;
}

#custommenu .yui3-menu .yui3-menuitem-active,
#custommenu .yui3-menu-label-menuvisible,
#custommenu .yui3-menu-label-active,
#custommenu .yui3-menuitem-active .yui3-menuitem-content {
    background-color: #BF3503;
}

#custommenu .yui3-menu-label-active,
#custommenu .yui3-menu-label-menuvisible,
#custommenu .yui3-menuitem-active .yui3-menuitem-content {
    color:#FFF;
}

#custommenu .yui3-menu-horizontal.javascript-disabled .yui3-menu-content {
    border-width:0;
}

Average of ratings: -
In reply to arpat arpat

Re: Moodle 2.5 Header logo customisation

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Well, the two most simplest to answer questions first:

1. Do you have an image called logo in the pix folder of your theme?

2. Have you turned on Theme Designer Mode or Purged all Caches since making the changes?

oh - and a third one: make sure you actually have the theme selected using the theme selector - there are known issues with logos and other images in some themes when using them through the URL: If that is the issue, then we can get it sorted out, its just narrowing down what the issue is smile

R

Average of ratings: -
In reply to Richard Oelmann

Re: Moodle 2.5 Header logo customisation

by arpat arpat -

1, Yes, I have smile

2. Yes, I have turned on Theme Designer Mode

3. I have the theme selected by te theme selector.  This logo is the same I have had at my old Moodle 1.9

sad

I do not know what to do to see my logo ...

 

Average of ratings: -
In reply to arpat arpat

Re: Moodle 2.5 Header logo customisation

by arpat arpat -

I was proving to put

<img src="<?php echo $OUTPUT->pix_url('logo', 'theme'); ?>" alt="" />

in the general.php and in the frontpage.php and it worked!!!!!! big grin

Thank you

Average of ratings: -