Hi there,
Just wondering if there is a way to put a custom background in a lesson? I've looked at the Lesson formatting, and know you can use a 'slide show' format and pick a background colour, but I thought it would be really cool if you could put a background image there instead.
I've built my lesson in moodle (it's not a powerpoint) but it would be nice to spruce up the background that's all.
When someone has a moment, it would be great to hear your thoughts!
Cheers!
Kate
Hi Kate,
It is possible to provide an image background for all of your Lessons' slideshow pages, with a small hack to your visual theme.
Find an image of the same size that you will be using for the slideshow (approx. 600 x 400 px) and upload it to the root of your current moodle visual theme's folder. E.g. slideshow_image.jpg. Please note that if the image is smaller than its container "slideshow box", it will be tiled to fill it.
Edit one of your current theme's CSS files (e.g. the layout.css file, but any will do). At the end, add this line:
.slideshow {background-image:url(slideshow_image.jpg)}
Of course it would be nicer if one could select a different image for different lessons, but the Lesson interface currently does not offer that feature.
Hope that helps,
Joseph
Attached example, using one of my flower macro photos as background.
Great! Thank you for your help. I'm going to go give it a whirl right now!
Thanks again.
Thanks again.
Me again,
I am using the stealth theme, so I created a graphic and put it in the images folder for the theme.
Then I added the line you gave me to the bottom of the 'styles.css' file. Here's what I have:
.slideshow {background-image:url(LessonBKG.jpg)}
But now, if I go to the lesson and select 'Slideshow' "YES", it wants me to enter a background colour.
What do I put there? I must be missing something huh?
Looking forward to trying it out!
Kate
I am using the stealth theme, so I created a graphic and put it in the images folder for the theme.
Then I added the line you gave me to the bottom of the 'styles.css' file. Here's what I have:
.slideshow {background-image:url(LessonBKG.jpg)}
But now, if I go to the lesson and select 'Slideshow' "YES", it wants me to enter a background colour.
What do I put there? I must be missing something huh?
Looking forward to trying it out!
Kate
Just enter any value for the background color, it will be hidden by the background image anyway.
Value for white = #FFF
Joseph
Value for white = #FFF
Joseph
I tried this with Moodle 2.1 but no effect. Any suggestions?
The way that themes work in Moodle 2 is totally different from 1.9 and previous versions.
Joseph
For a theme hack for Moodle 2, in the CSS of your theme try
.path-mod-lesson .region-content {
background-image: url([[pix:theme|imagename]]);
}
Making sure to replace imagename with the name of the image that you have saved in the theme's pix folder. This must be put in the css without the file extension.
Example - for an image called lessonbackground.jpg
Correct:
.path-mod-lesson .region-content {
background-image: url([[pix:theme|lessonbackground]]);
}
Incorrect:
.path-mod-lesson .region-content {
background-image: url([[pix:theme|lessonbackground.jpg]]);
}
I tried what you suggested but never did get the new tool bar to show up. I am usuing Moodle 1.9.1 Is the above for that versions.
Thanks
Are you sure you mean Moodle 1.9.1? That is a very old version and is no longer maintained.
Sorry, left the 0 off...lol
Moodle 1.9.10 is what I have thru my ISP
Hi there,
I have Moodle 2.6+ (Build: 20131205) and is also not working.
Almost 99% sure is something I'm doing wrong.
But I just don't know what...
The picture is at the Theme's Pix folder and I've added this to the styles.css at mod/lesson
Question 1
Does it have to be .jpeg / .jpg?
I'm using .png because it has a transparent background, is sword of like a watermark. That might be one of the reasons.
Question 2
I can't get the progress bar color to change from green to blue, it simply won't change.
What am I doing wrong?
tried:
.path-mod-lesson .progress_bar_completed {background-color:blue; text-align:right; vertical-align:middle; color:#FFF;}
Thank you for your help in advance