Moodle 2.2 Including background images to lesson

Moodle 2.2 Including background images to lesson

Manuel Tanger írta időpontban
Válaszok szám: 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 mosoly


Manuel

 

 

Értékelések átlaga: -
Válasz erre: Manuel Tanger

Re: Moodle 2.2 Including background images to lesson

Joseph Rézeau írta időpontban
Kép Kép Kép Kép Kép

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

Értékelések átlaga: -
Válasz erre: Joseph Rézeau

Re: Moodle 2.2 Including background images to lesson

Manuel Tanger írta időpontban

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 mosoly

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 mosoly

Thanks in advance,

Manuel

Értékelések átlaga: -
Válasz erre: Manuel Tanger

Re: Moodle 2.2 Including background images to lesson

Lisa Nicholls írta időpontban

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

>L<

Értékelések átlaga: -
Válasz erre: Lisa Nicholls

Re: Moodle 2.2 Including background images to lesson

Manuel Tanger írta időpontban

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

Értékelések átlaga: -
Válasz erre: Manuel Tanger

Re: Moodle 2.2 Including background images to lesson

Lisa Nicholls írta időpontban

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.

Értékelések átlaga: -
Válasz erre: Manuel Tanger

Re: Moodle 2.2 Including background images to lesson

Joseph Rézeau írta időpontban
Kép Kép Kép Kép Kép

@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

18-06-2012 23-54-17.jpg csatolmány
Értékelések átlaga:Useful (2)
Válasz erre: Joseph Rézeau

Re: Moodle 2.2 Including background images to lesson

Manuel Tanger írta időpontban

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

Értékelések átlaga: -
Válasz erre: Manuel Tanger

Re: Moodle 2.2 Including background images to lesson

Joseph Rézeau írta időpontban
Kép Kép Kép Kép Kép

"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

Értékelések átlaga:Useful (1)
Válasz erre: Joseph Rézeau

Re: Moodle 2.2 Including background images to lesson

Manuel Tanger írta időpontban

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

Picture2.jpg csatolmány
Értékelések átlaga: -
Válasz erre: Manuel Tanger

Re: Moodle 2.2 Including background images to lesson

Joseph Rézeau írta időpontban
Kép Kép Kép Kép Kép

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

Értékelések átlaga:Useful (1)
Válasz erre: Manuel Tanger

Re: Moodle 2.2 Including background images to lesson

Lynn Scarlet Clark írta időpontban

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

Értékelések átlaga:Useful (1)
Válasz erre: Lynn Scarlet Clark

Re: Moodle 2.2 Including background images to lesson

Manuel Tanger írta időpontban

Hi,

Thanks Joseph and Lynn.

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

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

Thanks!!

Manuel

Értékelések átlaga: -
Válasz erre: Manuel Tanger

Re: Moodle 2.2 Including background images to lesson

Heidi Gartenberg írta időpontban

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

Értékelések átlaga: -
Válasz erre: Heidi Gartenberg

Re: Moodle 2.2 Including background images to lesson

Ana Martins írta időpontban

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... mosoly


Thank you in Advance



Értékelések átlaga: -
Válasz erre: Ana Martins

Re: Moodle 2.2 Including background images to lesson

Ana Martins írta időpontban

Fixed it klassz

Can be closed.

Cheers.

Értékelések átlaga: -