Adding a Background Image to 2.5 Theme

Adding a Background Image to 2.5 Theme

by Deborah Delin -
Number of replies: 10

Hi,

I am upgrading to Moodle 2.5 and trying to make the modifications to the theme on a test server.  

I am having trouble adding the background image to the theme. 

I have the image body.gif in:  server/moodle/theme/arialist/pix

I have tried putting the following code in core.css. And various other path permutations, but evidently I haven't understood the docs properly:

body {background-image:url([[pix:theme|arialist/pix/body]]);}

I would be very very grateful for some guidance.

With thanks in advance,

Deborah

Average of ratings: -
In reply to Deborah Delin

Re: Adding a Background Image to 2.5 Theme

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

body {background-image:url([[pix:theme|body]]);} should be all you need - but dont forget to have theme designer mode turned on, or to purge all caches.

http://docs.moodle.org/dev/Using_images_in_a_theme

Average of ratings: -
In reply to Richard Oelmann

Re: Adding a Background Image to 2.5 Theme

by Deborah Delin -

Thanks so much Mary and Richard for your replies!  I had missed designer mode and was clearing the theme cache each time so that makes life easier!

Unfortunately I had already tried the code you suggested

body {background-image:url([[pix:theme|arialist/pix/body]]);}

and still my image doesn't show up so I'll have to look into it further.  I have written to my website designer asking if I am using the right image, though I think I am.  (Image attached in case it makes sense to anyone....).  

This is one of the present 1.9 sites showing the pale blue background:

http://www.strivney.com/login/index.php

Mary, how did you know I will need RTL?  If you remember from questions of mine from years ago you have an incredible memory!!  I'll look at Afterburner.  Thank you.

Deborah

Attachment body.gif
Average of ratings: -
In reply to Deborah Delin

Re: Adding a Background Image to 2.5 Theme

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

Deborah - just to reiterate as its not clear from your last post -posted after Mary's reply below- that you have followed what both Mary and I posted (unless it is a copy and paste error):

Do NOT put the arialist/pix part of the path in what you have in your code

body {background-image:url([[pix:theme|arialist/pix/body]]);}

just put

body {background-image:url([[pix:theme|body]]);}

this, by default looks in the pix folder of your theme (arialist). By adding them in again what you are actually telling moodle to look for is a pix folder inside an arialist folder inside the pix folder of your arialist theme. ie. yourmoode/theme/arialist/pix/arialist/pix/body.gif

HTH

Richard

Edit: if you are using the background image from the 1.9 link given you will also need to add the repeat rules to your css or it will only show as a narrow 1px strip on the left of your page!

body {background-image:url([[pix:theme|body]]) repeat-x;}

Average of ratings: -
In reply to Richard Oelmann

Re: Adding a Background Image to 2.5 Theme

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

Hi Richard, you cannot use repeat in a background-image: CSS rule it needs to be added separately using background-repeat: repeat-x; or alternatively using background: only as in the short hand way.

background: colour image repeat position attachment;

Cheers,

Mary

Average of ratings: -
In reply to Mary Evans

Re: Adding a Background Image to 2.5 Theme

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

Oops clown

Sorry Mary - obviously out too late last night :D I meant to leave out the -image bit and leave it as just background:

Deborah - apologies for any confusion caused!

Average of ratings: -
In reply to Deborah Delin

Re: Adding a Background Image to 2.5 Theme

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

Hi Deborah,

I have attached a text file with the correct CSS you need to make this work.

And YES I do have a good memory when it comes to RTL fixes. Was it not you who moved from Moodle 1.3 to 1.9 in 2010?

smile

Cheers

Mary

Average of ratings: -
In reply to Deborah Delin

Re: Adding a Background Image to 2.5 Theme

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

Hi Deborah,

Just to clarify, you don't need to add the name of the theme or the directory it is in, so...

body {background-image:url([[pix:theme|arialist/pix/body]]);}

is actually the wrong way to right it in this instance.

So as Richard has pointed out, body {background-image:url([[pix:theme|body]]);} is all that Moodle needs to find the image.

Theme Designer Mode is a MUST for working in Moodle 2. Also if you want a RTL Language theme then try using Afterburner. It is easy to adapt, and swaps sides in RTL mode.

Cheers

Mary

Average of ratings: -
In reply to Deborah Delin

Re: Adding a Background Image to 2.5 Theme

by Deborah Delin -

Mary and Richard, again, thanks so much for your help!

I'm still not seeing the background image.  Just to confirm, I have put the code:

background-image: url([[pix:theme|body]]);
background-repeat: repeat-x;

at the very beginning of core.css?

I wish I could find the css I used to get it to display in the 1.9 site.  But I don't see it in styles-layout.css or any other of the css files.  

Ha, ha, no Mary it wasn't me who upgraded from 1.3 to 1.9, only modified the 1.9 theme and had questions about RTL as I have one site in English and a mirror site in Hebrew.

Hoping you have a further suggestion?

 

Average of ratings: -
In reply to Deborah Delin

Re: Adding a Background Image to 2.5 Theme

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

body {
    background-image: url([[pix:theme|body]]);
    background-repeat: repeat-x;
}

Added to the end of core.css in arialist with the background image from your link previously added into the pix folder in arialist (no subfolders)

HTH

R

Attachment Screenshot from 2013-12-27 124737.png
Average of ratings: -
In reply to Richard Oelmann

Re: Adding a Background Image to 2.5 Theme

by Deborah Delin -

Ha!  Richard!!!  I was fiddling about with the same sort of thing before I saw your post!  I also tried adding:

body{
background-image: url([[pix:theme|body]]);
background-repeat: repeat-x;}

But no change!  Then I added:

#page{
background-image: url([[pix:theme|body]]);
background-repeat: repeat-x;}

And it worked!!!!

Strange though that on your test site (thank you SO much for going to the trouble) the "body" option worked but it doesn't on my test site.mixed  When I take the "body" code out it still works - but I'll leave them both in for good measure!

Thanks so much Richard and Mary for your help in this.  I was totally daunted at having to re-modify my theme 4 years after doing the original (and with only a very hazy idea as to what I am doing in the first place!).  But it's not been too traumatic so far.  Couldn't have managed without your help though!!

Average of ratings: -