Hello,
I'm creating my first Moodle-Course, also it's the first time I'm handling with HTML and CSS. I'm using Moodle 1.5.
I would like to organize a little bit the appearance of my Resource elements. The WYSIWYG part of the HTML editor is not always doing what I want. So I was trying to include some external CSS style sheets.
As I read in another thread, the HTML editor does not include the Head parts, where the reference to the external style sheet should be. Of course, I could do it in every page itself, but so I can't profit of the advantages of CSS.
So how can I include CSS into my Resource and other modules?
Also I read in another thread, that this can be done in the "styles_layout.css" file in the themes section, what I've tried. The problem is, that I don't know where I have to integrate my CSS text. If I put it at the begin of the file, I changes my whole Moodle-page, what I don't want.
I really just want to change the appearance in the parts I create with the HTML editor.
Further what I've noted, that if I change the "styles_layout.css", my Moodle page only change by chance (that's what it seems to me). Maybe it's every ten minutes. Is this in relation with the MoodleCron?
If anyone could give me a hint, I would be very grateful!
Thank you
Andreas
Andreas,
to be sure that you only style your resources surround each with a DIV:
<div class="myresource">
<h3>your header here ...</h3>
<p>your text, images etc. here ...</p>
</div>
This way you can specify CSS properties for your resources without changing any other area in Moodle. You just precede your TAGs, CLASSes or IDs with the name of the surrounding DIV:
.myresource h3 {...}
.myresource p {...}
The best way to go is: * create a new theme of your own * create a new CSS file for the CSS of your recourses and add it to the CSS files in your theme's config.php * if you have a favorite theme other than standard refer to this theme as parent
"my Moodle page only change by chance (that's what it seems to me). Maybe it's every ten minutes. Is this in relation with the MoodleCron?"
Your description sounds like your browser cache is not cleared. If you work with MSIE you only can be sure when you clear the cache via the dialog before you see any changes. F5 and shift+reload or all the other methods do not work properly. In FF sometimes you need to reload a second time.
I hope this helps you to proceed
Urs
Great, it works!
Thank you, Urs!
Thank you, Urs!
Hi Andreas and Urs,
Thanks to you, Urs, for pointing this useful workaround for getting one's own styles within the HTML editor.
It's a real pity that the present HTML editor in Moodle cannot directly rely on CSS stylesheets, and only provides rudimentary HTML formatting, which results in creating deprecated output!
The following describes how I enter texts of any significant length in all parts of Moodle where the HTML editor is available.
- I have set a (small) number of style classes in my favorite theme stylesheet. As you recommend, those reside in a #myresource section of the stylesheet (I prefer defining a #myresource div rather than a .myresource, but it comes to the same).
- With my favorite HTLM editor (Dreamweaver, NVU, etc.) I create a new HTML document, and assign to it my favorite stylesheet.
- In my new HTML document, I put everyting within a <div id="myresource"></div> division.
- I type my text, and format it with styles from the #myresource section of my stylesheet.
- I copy the HTML code...
- ... and paste into the Moodle HTML editor code view window and I save it. I simply do not use the HTML wisywig editor, which is incapable of displaying my styles.
Joseph
i had a hell of a time myself, am not a guru yet at using moodle, but am loving the software.
incorporating CSS is easy just use INLINE Styles, for instance
<!--BEGIN ALTERNATIVE EXAM-->
<div id="alternative_exam" style="width:100%; margin:0 0 0 0; float:left;"><hr color="#f0eaea" /><!--HORIZONTAL RULE-->
<!--BEGIN IMAGE DIVISION-->
<div id="alternative_exam_image" style="width:35%; margin-bottom:2%; float:left;">
</div>
<!--END IMAGE-->
<div id="alternative_exam_text" style="width:65%; margin-bottom:2%; float:left;">
<p>To apply for an alternative or reschedule exam click this link</p>
</div>
</div>
<!--END ALTERNATIVE EXAM-->
that should work!!