I create lessons by means of the Lesson Activity Module.
In between the content, I embed images (pictures, graphs, diagrams: *.jpg, *.png, *.gif etc) via the TinyMCE Html Editor that comes with Moodle 3.0.
I want to make a background style in order to have the Image and the Textual caption (for example: Fig.1.3: here you see a ...) belong together as a distinguishable unit.
So I misuse the CSS-format 'Preformatted' which comes with TinyMCE, in order to form a container in which I put the picture as well as the accompanying text.
This works, but not all the time: sometimes images 'jump out' of the container, or the webpage looses the image all together (on /course/index.php?categoryid=...).
How do I make a stable CSS-style and where do I publish it in my course-site for easy online editorial access?
I need a stable CSS-box consisting of a border line, a different coloured background, and an adjustable font.
Have you tried something like this example?
Hallo Mary and Gareth,
Thank you for your useful answer and links to getbootstrap.com.
I 'baked' the following HTML-CSS code for my site, in order to try to achieve what I want:
<ul class="thumbnails text-center">
<li class="img-rounded" style="background-color: #d5d5d5;"><br />
<img src="http://.../draftfile.php/myImage.png" alt="The Subjective Experience of Reality" role="presentation" class="img-responsive, img-rounded" width="99%" />
This code works fine, but has a few flaws:
1. The container is indented from the left side.
I prefer the image-box to be aligned to the left, as is all the text of my lesson-content.
Is there an image-class similar to thumbnails-class without indentation?
If so, then I will remove the attribute 'text-center', so the caption will also become left-aligned.
2. I use a <br /> to create spacial room above the image.
Is there another way to do this?
3. I put the width of the image to 99%, because the picture became too much blown-up, causing a scroll bar in a web browser (on PC).
How can I avoid this properly?
4. I do not know the attribute 'role is presentation'.
What is the use of the property 'Role'?
5. I use the standard Moodle-themes (skins): More and Clean.
Are the CSS-styling rules of these themes based on Bootstrap, and can I rely on this foundation (mutual cooperation) to evolve with Moodle in the future?