{"id":391,"date":"2023-08-17T10:56:58","date_gmt":"2023-08-17T00:56:58","guid":{"rendered":"http:\/\/localhost:10138\/?p=391"},"modified":"2023-08-17T10:57:31","modified_gmt":"2023-08-17T00:57:31","slug":"add-css-to-text-block-moodle","status":"publish","type":"post","link":"https:\/\/dev-train-well.pantheonsite.io\/add-css-to-text-block-moodle\/","title":{"rendered":"Add CSS to Text block – Moodle LMS"},"content":{"rendered":"\n

Any CSS we add to the Text Block gets deleted by Moodle LMS on Save. Add customs styles to an individual course page using this tip.<\/strong><\/p>\n\n\n\n

Want to style your course contents?<\/p>\n\n\n\n

Try this… add a Text block <\/strong>and in its Content editor, click on HTML<\/strong> button and add some styles.<\/p>\n\n\n\n

\"Moodle-Text-Block-Add-CSS<\/figure>\n\n\n\n

When you click Save changes (<\/strong>or as soon as you navigate away from the HTML editing mode), the CSS styles are deleted. <\/p>\n\n\n\n

\"Style<\/figure>\n\n\n\n

How to prevent the Text Block from removing CSS styles?<\/h2>\n\n\n\n

Use this JavaScript to embed the CSS styles… and apply them.<\/p>\n\n\n\n

HTML<\/span><\/path><\/path><\/svg><\/span>
<<\/span>script<\/span>><\/span><\/span>\nconst<\/span> style <\/span>=<\/span> document<\/span>.<\/span>createElement<\/span>(<\/span>'<\/span>style<\/span>'<\/span>)<\/span>;<\/span> <\/span>\/\/ create style element<\/span><\/span>\nstyle<\/span>.<\/span>innerHTML <\/span>=<\/span> <\/span>`<\/span><\/span>\n    <\/span><\/span>\n\/* START your CSS styles here *\/<\/span><\/span>\n<\/span>\n    body { <\/span><\/span>\n        background: red;        <\/span><\/span>\n    }<\/span><\/span>\n <\/span><\/span>\n\/* END your CSS styles here *\/<\/span><\/span>\n<\/span>\n`<\/span>;<\/span><\/span>\ndocument<\/span>.<\/span>head<\/span>.<\/span>appendChild<\/span>(style)<\/span>;<\/span> <\/span>\/\/ append styles to the DOM in <\/span><\/span>\n<\/<\/span>script<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Add the above code via the HTML mode in the ATTO content editor of the Text Block. Include your own CSS styles in the section highlighted below.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
The styles are not deleted and get applied across the course and its pages.<\/p>\n\n\n\n
\"The<\/figure>\n\n\n\n
You can apply the styles on the course main page, any course page or any page via the block settings.<\/p>\n\n\n\n
\"You<\/figure>\n\n\n\n
Important:<\/strong> Take care, adding code can break your system. Always test in a sandbox environment. This code was tested in Moodle LMS v4.1. Improve your HTML, CSS and JS skills – Go to https:\/\/www.w3schools.com\/<\/strong><\/a><\/p>\n\n\n\n
Hope you liked this tip! <\/strong><\/p>\n\n\n\n
Let me know via comments how you used this trick.<\/p>\n","protected":false},"excerpt":{"rendered":"
Any CSS we add to the Text Block gets deleted by Moodle LMS on Save. Add customs styles to an individual course page using this tip.<\/p>\n","protected":false},"author":1,"featured_media":392,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[8],"_links":{"self":[{"href":"https:\/\/dev-train-well.pantheonsite.io\/wp-json\/wp\/v2\/posts\/391"}],"collection":[{"href":"https:\/\/dev-train-well.pantheonsite.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev-train-well.pantheonsite.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev-train-well.pantheonsite.io\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev-train-well.pantheonsite.io\/wp-json\/wp\/v2\/comments?post=391"}],"version-history":[{"count":4,"href":"https:\/\/dev-train-well.pantheonsite.io\/wp-json\/wp\/v2\/posts\/391\/revisions"}],"predecessor-version":[{"id":401,"href":"https:\/\/dev-train-well.pantheonsite.io\/wp-json\/wp\/v2\/posts\/391\/revisions\/401"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dev-train-well.pantheonsite.io\/wp-json\/wp\/v2\/media\/392"}],"wp:attachment":[{"href":"https:\/\/dev-train-well.pantheonsite.io\/wp-json\/wp\/v2\/media?parent=391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev-train-well.pantheonsite.io\/wp-json\/wp\/v2\/categories?post=391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev-train-well.pantheonsite.io\/wp-json\/wp\/v2\/tags?post=391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}