Moodle 2.2 Including background images to lesson

Moodle 2.2 Including background images to lesson

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 සිනහව


Manuel

 

 

ශ්‍රේණිගත කිරීම්වල සාමාන්යය: -
In reply to Manuel Tanger

Re: Moodle 2.2 Including background images to lesson

Joseph Rézeau - මගින්
Core developers ගේ පින්තුරය Particularly helpful Moodlers ගේ පින්තුරය Plugin developers ගේ පින්තුරය Testers ගේ පින්තුරය 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

ශ්‍රේණිගත කිරීම්වල සාමාන්යය: -
In reply to Joseph Rézeau

Re: Moodle 2.2 Including background images to lesson

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 සිනහව

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 සිනහව

Thanks in advance,

Manuel

ශ්‍රේණිගත කිරීම්වල සාමාන්යය: -
In reply to Manuel Tanger

Re: Moodle 2.2 Including background images to lesson

Lisa Nicholls - මගින්

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

>L<

ශ්‍රේණිගත කිරීම්වල සාමාන්යය: -
In reply to Lisa Nicholls

Re: Moodle 2.2 Including background images to lesson

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

ශ්‍රේණිගත කිරීම්වල සාමාන්යය: -
In reply to Manuel Tanger

Re: Moodle 2.2 Including background images to lesson

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.

ශ්‍රේණිගත කිරීම්වල සාමාන්යය: -
In reply to Manuel Tanger

Re: Moodle 2.2 Including background images to lesson

Joseph Rézeau - මගින්
Core developers ගේ පින්තුරය Particularly helpful Moodlers ගේ පින්තුරය Plugin developers ගේ පින්තුරය Testers ගේ පින්තුරය 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
ශ්‍රේණිගත කිරීම්වල සාමාන්යය: Useful (2)
In reply to Joseph Rézeau

Re: Moodle 2.2 Including background images to lesson

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

ශ්‍රේණිගත කිරීම්වල සාමාන්යය: -
In reply to Manuel Tanger

Re: Moodle 2.2 Including background images to lesson

Joseph Rézeau - මගින්
Core developers ගේ පින්තුරය Particularly helpful Moodlers ගේ පින්තුරය Plugin developers ගේ පින්තුරය Testers ගේ පින්තුරය 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

ශ්‍රේණිගත කිරීම්වල සාමාන්යය: Useful (1)
In reply to Joseph Rézeau

Re: Moodle 2.2 Including background images to lesson

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
ශ්‍රේණිගත කිරීම්වල සාමාන්යය: -
In reply to Manuel Tanger

Re: Moodle 2.2 Including background images to lesson

Joseph Rézeau - මගින්
Core developers ගේ පින්තුරය Particularly helpful Moodlers ගේ පින්තුරය Plugin developers ගේ පින්තුරය Testers ගේ පින්තුරය 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

ශ්‍රේණිගත කිරීම්වල සාමාන්යය: Useful (1)
In reply to Manuel Tanger

Re: Moodle 2.2 Including background images to lesson

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

ශ්‍රේණිගත කිරීම්වල සාමාන්යය: Useful (1)
In reply to Lynn Scarlet Clark

Re: Moodle 2.2 Including background images to lesson

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 සිනහව

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

Thanks!!

Manuel

ශ්‍රේණිගත කිරීම්වල සාමාන්යය: -
In reply to Manuel Tanger

Re: Moodle 2.2 Including background images to lesson

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

ශ්‍රේණිගත කිරීම්වල සාමාන්යය: -
In reply to Heidi Gartenberg

Re: Moodle 2.2 Including background images to lesson

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... සිනහව


Thank you in Advance



ශ්‍රේණිගත කිරීම්වල සාමාන්යය: -
In reply to Ana Martins

Re: Moodle 2.2 Including background images to lesson

Ana Martins - මගින්

Fixed it කට්ට

Can be closed.

Cheers.

ශ්‍රේණිගත කිරීම්වල සාමාන්යය: -