Moodle 2.2 Including background images to lesson

Moodle 2.2 Including background images to lesson

by Manuel Tanger -
Number of replies: 16

Hi,

I would like to include a background image to a lesson activity. This includes adding an image to pages, content pages and questions. For simplicity, the same image can be used in all these cases.

What I've tried (but failed):

1) In the theme folders I've tampered with css files and the following tags:

  • .path-mod-lesson .lessoncontents (does nothing)
  • .path-mod-lesson .contents
  • .path-mod-lesson  .box .contents
  • .path-mod-lesson .main (images appear only in the title)
  •  .path-mod-lesson .region-content (does not cover the whole central area of the content - eg title - and adds the image to side menu bars)

What I add to these tags is

background-image: url([[pix:theme|back]]);
background-repeat:no-repeat;

At the moment I'm getting this:

where the image is in the title box ("Welcome") and I want it in the whole red rectangle.

2) adding a <div statement in the content of the lesson:

I've seen that it appears in the html generated and I was hoping it would pick up the css specification. To no avail.

3) the suggestions of this forum post (http://moodle.org/mod/forum/discuss.php?d=142765#p625414)

I think these do not apply to 2.2...

 

What I think might work, but I have no technical knowledge to apply

I still think that if I could add/generate a div statement to a new css class that would do it. But where? How?

 

I would REALLY appreciate your help on this smile


Manuel

 

 

Average of ratings: -
In reply to Manuel Tanger

Re: Moodle 2.2 Including background images to lesson

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi Manuel,

Are you absolutely certain that you want to do this (add a background image to your Lesson pages)? From a usability point of view, background images often make the text against which they stand difficult to read.

Joseph

Average of ratings: -
In reply to Joseph Rézeau

Re: Moodle 2.2 Including background images to lesson

by Manuel Tanger -

Hi Joseph,

Thanks for the lighning quick reply!

I know what you mean but the image type we are considering has a "placeholder" for text precisely to avoid that.

But just in case, I'm consider creating a copy lesson (eg mylesson) where this would be applied. So, yes I am absolutely certain smile

The image used will be larger of course (and fixed size), and then I'm hoping to bound/box the content area through css.

Please tell me how to do it smile

Thanks in advance,

Manuel

Average of ratings: -
In reply to Manuel Tanger

Re: Moodle 2.2 Including background images to lesson

by Lisa Nicholls -

I'm just curious, Manual: Is this for looks, or is it a watermark?

>L<

Average of ratings: -
In reply to Lisa Nicholls

Re: Moodle 2.2 Including background images to lesson

by Manuel Tanger -

Hi Lisa,

the story is we are working with a small company and they insist on having common immagery across whatever platforms they use.  For e-learnings and so on... this is it.

Manuel

Average of ratings: -
In reply to Manuel Tanger

Re: Moodle 2.2 Including background images to lesson

by Lisa Nicholls -

Thanks for satisfying my curiousity, Manuel.  I guess, yes, branding is important but I would have thought they would have wanted that accomplished through the moodle theme, rather than a background image.  This must be a special case.

Average of ratings: -
In reply to Manuel Tanger

Re: Moodle 2.2 Including background images to lesson

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

@Manuel,

It is not so easy to provide a solution because I do not know exactly which parts of the Lesson screen (in student mode display) you want to have a background image attached to. Also we do not know which Moodle theme you will are using, and whether it is straight out of the box or customized. Anyway, I hope the following example will at least set you on track.

Using Moodle 2.3, standard theme. Example background image: background_grd_1.jpg (taken from the moodle.org forums site)

1.- Upload the image you want to use (e.g. background_grd_1.jpg) to <yourmoodlesite>theme/standard/pix folder.

2.- In file <yourmoodlesite>theme/standard/style/modules.css, add the following CSS rule:

#page-mod-lesson-view #region-main{background-color: #FFF; background-image:url([[pix:theme|background_grd_1]]);background-repeat: repeat-x;border:1px solid #ddd;}

See attached result.

Hope that helps,

Joseph

Attachment 18-06-2012 23-54-17.jpg
Average of ratings:Useful (2)
In reply to Joseph Rézeau

Re: Moodle 2.2 Including background images to lesson

by Manuel Tanger -

Hi Joseph,

Thanks a lot for that piece of code! It did wonders!

For info, I'm using a standard afterburner theme.

Your solutions covers indeed all the content area. Now I have just one more issue to resolve. You've chosen a solid color background while I have some images and a box where I want all the content to be. Suppose that this area is at 100px/100px from the top left and its size is 200px by 200px (these are hipothetical, I haven't measured yet).

How can I make the content appear only in the box? I'm guessing there a way to do it in CSS like:

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

The above is something I found to exemplify positioning in css, so it is not applied to this.

Can it be done?

Thanks again for your answer!

Manuel

Average of ratings: -
In reply to Manuel Tanger

Re: Moodle 2.2 Including background images to lesson

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

"You've chosen a solid color background while I have some images and a box where I want all the content to be. Suppose that this area is at 100px/100px from the top left and its size is 200px by 200px..."

1.- When putting a background image somewhere, it is good practise to also put a background color, just in case the visitor has disabled images on their browser, and to make sure that the text color will be visible on that background color.

2.- Sorry, but the rest of your sentence is far from clear. It would be much easier to understand if you posted a mock-up screenshot.

Joseph

Average of ratings:Useful (1)
In reply to Joseph Rézeau

Re: Moodle 2.2 Including background images to lesson

by Manuel Tanger -

Hi Joseph,

I suppose your right and I wasn't clear the first time. Here's another go:

1 - good tip, thanks!

2 - Now that the background image has been successfullyadded, I want to include all the contents of the lesson within the blue bounded box below:

 

As shown,  the box is defined by (x, y, x2, y2) - in pixels.

My question is how to bound all the content to this area using CSS (I'm assuming CSS is the way to go here).

Hope its clearer,

Thanks,

Manuel

Attachment Picture2.jpg
Average of ratings: -
In reply to Manuel Tanger

Re: Moodle 2.2 Including background images to lesson

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

I'm afraid what you want is not possible because it relies on the contents of each page of your Lesson to have exactly the same amount of text, or rather to take up the same amount of screen space.

Anyway, this is more a general CSS problem of placing text elements (plus buttons, etc.) in a bounded "box" with a background image.

Sorry not to be able to help more, but this is beyond my Moodle skills.

Joseph

Average of ratings:Useful (1)
In reply to Manuel Tanger

Re: Moodle 2.2 Including background images to lesson

by Lynn Scarlet Clark -

Manuel,

I'm assuming your content has already been developed so that it does not includes lots and lots of text (Joseph's spot-on point about not being able to guarantee text is the same size/amount). I am not 100% sure this will work, but now that Joseph has helped you to include a background image via CSS, it may be possible to create a fixed-width and height table within your lesson page to accommodate this.

A three column and three row table may do it - where column 1 is your "x pixels" in width, column 2 is the width (in pixels) of your whiteboard.text area and column 3 is the gap at the end. Likewise, row 1 would be "y pixels" in height, row 2 your whtiteboardtext area height (in pixels) and row three the remainder of the image height.

I have not tried this, but it may work. Make sure you match the table to whichever alignment the picture is favouring (ie if the picture is aligned top left, do this with your table). Once you've got one lesson page right, you can then copy and past the table HTML to your other pages.

Lynn Scarlet

Average of ratings:Useful (1)
In reply to Lynn Scarlet Clark

Re: Moodle 2.2 Including background images to lesson

by Manuel Tanger -

Hi,

Thanks Joseph and Lynn.

You are correct in assuming there is not a lot of text, actually quite small but all ready smile

Iºll give the table a try and come back on it.

Thanks!!

Manuel

Average of ratings: -
In reply to Manuel Tanger

Re: Moodle 2.2 Including background images to lesson

by Heidi Gartenberg -

Hi Manuel,

I'm wondering if you ever got this to work.  I'm trying to do something similar using the Book Module.  I was also successful in getting the backround image I want in the content area using Joseph's excellent directions but also want to define a limited area for entering text.

 

Thanks,

Heidi

Average of ratings: -
In reply to Heidi Gartenberg

Re: Moodle 2.2 Including background images to lesson

by Ana Martins -

Hello Moodlers,

I have 2 Platforms with Moodle, one is live and already being used as an eLearning Platform, the other is for testing only... updates and other crazy stuff.

The thing is, I've tried this in both Platforms:

.path-mod-lesson .region-content {background-image: url([[pix:theme|lesson_image]]);}

The problem is:

 - It only works in the Test Platform...


I've tried everything within the Live Platform, and I can't understand why it isn't working on that one...

The Live platform is basically a copy of the Test one... 


Help? Please... smile


Thank you in Advance



Average of ratings: -
In reply to Ana Martins

Re: Moodle 2.2 Including background images to lesson

by Ana Martins -

Fixed it cool

Can be closed.

Cheers.

Average of ratings: -
In reply to Ana Martins

Re: Moodle 2.2 Including background images to lesson

by Gary Lynch -

Hi Ana


Would be nice to share how you fixed it smile

Gary

Average of ratings: -