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 do this I visited a typical Glow page and saved a copy of it to my computer. Each Glow page links to at least two cascading style sheets, a default one and one for the user theme selected. Each page also contains thousands of lines of Javascript, even if these lines will never be used by the page as is it displayed. Finally, Glow style formatting uses many individual ID based styles. This means that styles are inefficiently applied to the page because there is a style for each item in a menu and a style for the whole menu, when a style for the menu alone would do it. I haven’t counted it out but I would guess that each and every Glow page loads about 3000 lines of HTML, CSS and Javascript which it will never use. That’s slowing it down. There are third party tools for Sharepoint (on which Glow is based) which could analyse each page before it leaves the Glow Data Centre. These tools would identify only the code required to be sent with the page and would strip out anything not needed. This would result in an improvement in load times of between 33% and 75%. Anyway, I digress.
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.
Web browsers which support JavaScript use an engine to translate HTML documents into the DOM (document object model). This model applies styles to objects in sequence order. If two styles are loaded then the style which is loaded last will replace the first. Last loaded is the one to be displayed!
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.
However, one problem remained. The JavaScript in each Glow page resizes the page once it is loaded. This makes each web page change size. I had to rewrite the JavaScript to keep the web parts to the size of my fixed width template. JavaScript files are a disallowed file type in Glow, you can’t upload them. To get round this I embedded the JavaScript in the HTML file which loads the style-sheets. Again, because these load last they replace the JavaScript in the page and my new page coding replaces all the visual elements of the Glow theme.
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!
Andrew Brown
This is just so fabulous Charlie – so I had a go myself! If your readers have a Glow login, they can see my efforts in My Glow.
This is a great change to how Glow is presented. What we need to look at now is how we share your findings… 🙂
David Gilmour
@olliebray mentioned that you’d reskinned the Consolarium Glow Group’s home page, and I finally got round to taking a look today.
I was well impressed and ended up having a good poke around to see if I could figure out how you’d done it, which nearly led to an abandoned child having to walk a long way home…
Fortunately just spotted @olliebray’s link to this, so will be able to sleep tonight. Thanks for sharing the explanation.
It’s critically important that we can get the best value out of Glow, so this sort of work to see what it can be made to do is invaluable.