Make Moodle Main Content Full Width – GreaseMonkey User Script

A theme in an installation of Moodle was broken. The content was shown in a keyhole, surrounded by large white sorrow borders.
This GreaseMonkey userscript fixes the issue. It overrides some CSS styles on target pages.
You can use it to learn how to replace CSS styles with GreaseMonkey and how to use backticks for multiline strings in JavaScript (EcmaScript 6).


Update 2018-04-12: This script works now with ViolentMonkey. GreaseMonkey no longer works after Firefox Quantum update.

This is a beta version. I have tested it on one computer. Your results may vary.
You must @grant GM_addStyle if you want to use GM_addStyle() function.
To create a multiline string in modern JavaScript (EcmaScript 6), use backticks. I would have preferred another syntax for that, but I very much welcome multiline strings.
Replace @include  http://brokenmoodle.example.org/* with your own Moodle address. Remember the globbing asterisk in the end.

// ==UserScript==
// @name        fix-sorrow-borders-in-moodle-theme
// @namespace   terokarvinen.com
// @description Make main content full width in a broken Moodle theme
// @include     http://brokenmoodle.example.org/*
// @version     0.2.0
// @grant    GM_addStyle
// ==/UserScript==
// Copyright 2015 Tero Karvinen http://TeroKarvinen.com
// MIT License
// Notice EcmaScript 6 backticks around multiline string
var css=`
 #page, .span8, .container-fluid, #region-main, pull-right,
 html.yui3-js-enabled,
 body,
 div#page.container-fluid,
 div#page-content.row-fluid,
 div#region-bs-main-and-pre.span9,
 div.row-fluid
 {
 width: 2000px !important;
 }
 #page
 {
 padding-left: 0;
 margin-left: 10px;
 }
`
GM_addStyle(css);

Updated: typos.

Posted in Uncategorized | Tagged , , , , , , , , | 1 Comment

One Response to Make Moodle Main Content Full Width – GreaseMonkey User Script

  1. As an alternative for Greasemonkey that is actually designed for applying custom CSS styles to websites, you can use Stylish.
    Stylish allows for the same level of granularity for styles. You can even include several URL filters in a same style, which allows you to manage styles per organization/domain, for example.
    It is also a bit quicker to use: for example, 2 clicks (versus Greasemonkey’s 3) to edit an existing style and no need for functions to apply CSS.