So Im trying to implement the suggestion posed in this thread (http://moodle.org/mod/forum/discuss.php?d=146504) about making a menu in an HTML block that only displays certain things on certain pages. However, it appears that the HTML editor for the lesson strips out the style tags when I type them in the the html editor. I swear its kept style tags when I've used them in other areas of the site. What gives?
You must turn off the HTML editor in lessons in order for styles and javascript etc to work. Go to your Edit Profile page and make sure Show advanced is on. Next to the field 'when editing text' make sure 'use standard web forms' is selected then save your profile. A big tip is to keep your Edit Profile page open in a separate tab/window on your browser so you can keep switching this on and off as you need it.
So I followed your instructions; the style tags in the main lesson page stay the same but this code:
<div id="content_for_lesson_page1">
...
</div>
<div id="content_for_lesson_page2">
...
</div>
<div id="content_for_lesson_page3">
...
</div>
<style type="text/css">
#content_for_lesson_page1{display:none;}
#content_for_lesson_page2{display:none;}
#content_for_lesson_page3{display:none;}
</style>
gets the style tags removed in the html block on the lesson page.
<div id="content_for_lesson_page1">
...
</div>
<div id="content_for_lesson_page2">
...
</div>
<div id="content_for_lesson_page3">
...
</div>
<style type="text/css">
#content_for_lesson_page1{display:none;}
#content_for_lesson_page2{display:none;}
#content_for_lesson_page3{display:none;}
</style>
gets the style tags removed in the html block on the lesson page.
Any idea on why its still removing style tags with the HTML option turned off? Thanks.
Hi,
I am not sure why the style tags get removed - maybe it is purposely blocked because students messed with the css of the entire page.
If for some reason you can't use the style attribute to make the changes you want (say, if you want to use pseudo selectors), try this method:
Instead of using the <style> or <link> tags, which will be automatically removed once you refresh, use the <script> tag like so:
<script>
// Make a new 'style' element
var style = document.createElement("style");
// Add it to the document head
document.head.appendChild(style);
// Access content
var rules = style.sheet;
// Use addRule to add a styling rule it should look like this:
// rules.addRule('selector:pseudo-selector','property name: property value');
//for example:
rules.addRule('.file:hover','box-shadow: 0px 0px 4px #222222;');
/*is equivalent to
<style>
.file:hover{
box-shadow: 0px 0px 4px #222222;
}
</style>
you don't have to use a pseudo selector if you don't want to, obviously.*/
</script>
Here is a short version of the code without comments:
<script>
var style = document.createElement("style");
document.head.appendChild(style);
style.sheet.addRule('.file:hover','box-shadow: 0px 0px 4px #222222;');
</script>
If you would like to read more about changing styles programmatically, take a look here:
http://pankajparashar.com/posts/modify-pseudo-elements-css/
Please let me know if this helps!