Glow, Scotland’s National Intranet for Education is a world leading concept, possibly the single most important tool for the Scottish teacher and a hub for sharing, collaboration and communication for all learners, teachers and parents.
Glow contains a number of themes which users select to ‘skin’ the content within Glow. These themes provide a different visual experience, such as colour of toolbars etc, for the user but don’t make much use of graphics. Each theme is variable width which means it will expand to fill your web browser, expanding the content within the pages to match. This expansion is okay for most Glow pages but can make some content look stretched and out of place.
As a proof of concept I thought I would try to reskin Glow, using my limited web design skills, to have a graphical fixed width theme which would replace all of the default themes when a user views some of the pages in a Glow Group I admin. The advantage of this being that I would be sure that every user would see the page in the same way, irrespective of screen resolution or size of browser window.
To start creating my own styles for Glow, I loaded my saved page in Mozilla Firefox and used the fab Firebug addon to inspect the style used for each and every element on the page. I then loaded the styles for the page in Dreamweaver and made my edits, I tested this on the offline page and it looked pretty good. But how do I force Glow to load my new styles and replace the default styles from the theme? This is a big task as there is no tool or setting in Glow to apply your own styles, it’s not really designed for users to add or apply their own styles to their own groups.
In order to load my styles I needed a way to make the Glow page load my cascading style sheets (the documents which contain the styles for the web page elements). If I linked these in using HTML in a web part in Glow, the Glow server strips the code out and my files won’t be loaded. If I add a link to them it doesn’t load the documents. Hmmm…this needed something a little more clever.
I uploaded my style-sheets to a document store in Glow. I also created a simple HTML page which contained embedded code to load the styles into the HTML page. Finally, I copied the Web Content Editor web part from another Sharepoint server and modified it to load the HTML page as a non-visible element of the page. I imported this web part to the footer of the page. The web part loaded the .HTML page which, in turn, loaded all the .CSS style code and reformatted the document.
After some fairly exhaustive testing and tweaking against each of the available Glow themes I now have a working custom theme and it only took me eight hours! I started this task at 8pm one night and I was having so much fun with it that I didn’t realise it was 4am until I finished!
With my custom theme Glow group admins should be able to customise the appearance of their Glow pages. This could make a users experience of Glow more vibrant and interesting.
And I didn’t even mention the Dark Arts…oops!