A nicer looking Canvas syllabus

Another post to remind me how I did something.

I am trying to replace the ugly modules page. I tried to get used to the full page of text with the stupid icons, really I did, and its horrid forest green text, but it just made me gag.

uglymodules

So I’m thinking a nice menu, all on one page for HTML convenience for editing in Dreamweaver (or insert your WYSIWYG editor here – I’m liking Kompozer). But when I tried to make such a delightful page with tabs or accordion, or anything using CSS and Javascript, Canvas stripped my code. This happened even when I tried to embed using an iframe, or redirect using the Redirect app tool. Even when it didn’t strip stuff, it would not display to do what I want. I’m beginning to think that Canvas does not, as has been thought, simply display complex web pages in iframes and Redirect, but rather acts as a limited browser within the browser, ignoring code it doesn’t like.

Canvas itself has some styles one can work with. So I used its accordion code, though I had to adapt it some using html posted by Jeremy Perkins at the Canvas community. More style guide to stop the bullets on unordered lists. I tested it on a page inside Canvas, then copied the code over to Dreamweaver.

In Dreamweaver I was able to see the code more clearly with the colors, and catch all the relative URLs to my images, and create the many weeks for the final version. I commented out a bit in the code view so I would just paste in the material Canvas would accept.

I did try to do the editing in Canvas, by the way, but it took a terribly long time because it’s a large page and every time I’d try to edit one thing, it would hang on reloading, show me code when it was trying to switch to the Rich Text Editor, then lose my stuff. Much easier to paste the whole thing in from Dreamweaver periodically to make sure it was working.

And of course to add it as the Interactive Syllabus to the course menu requires copying the page’s URL, then selecting Settings, the finding the Redirect app, then plugging in the URL and telling it to show in the course menu. The result is here.

Now of course, this workflow is not clean and beautiful. Iframes would have been so much better. But at least it has my own images and icons, and is useful to students.