So as we’ve learned in class there are these really cool things called stylesheets that change how your website looks.

Because the Undum engine runs on HTML (and Javascript, but all the formatting stuff is HTML) you can add your own stylesheet and customize it.

Using CSS as a customization tool can be extremely important to your story.  I’m going to demonstrate some of the ways you can edit the stylesheet given to you with the source code.

I’ll be using the game I made  to show what I did

Also, I did make a video of all of this, but then colourlovers.com had surprise NSFWness that I wasn’t expecting and it showed up in my video. It’s really not THAT bad so if you don’t care about that sort of thing you can watch it here.  The slightly NSFW stuff is at the end anyways.
So the file that comes with the undum source code that contains the CSS code is called undum.css (pretty straightforward).

That code will be linked to in your javascript file (which I talked about in my last video) towards the top.  Simply change the link where it says “stylesheet” to wherever you plan on uploading the css file on your server.

I only changed the background and the title background.  In all honesty, Undum doesn’t have too many features that allow for customization.  But by changing these two elements you’re creating an entirely different look.

The background is located in the body tag.  You change the URL there to wherever the image you want to use is uploaded, or you delete that tag and change the hex code (which makes colors!) to what ever you want.  The background of the title is located under the ‘title’ class (which looks like #title in your code) and simply repeat the same steps there that you did for the background.

A great place to find color schemes and patterns is colourlovers.com.  I use it for almost all of my projects that need a little extra something.  It’s pretty self explanatory, and I do explain it a bit more in my slightly accidental NSFW video.

The biggest way to learn is to play around with the code.  Try changing numbers.  If you use firefox, check out firebug.  Firebug will let you mess with the code without committing any specific changes.  It’s a great way to learn.