Oxite now includes some basic support for skinning (CSS + images, scripts and views).

A Default skin including only styles and scripts is provided that layers the style and behaviors on top of the default views.

default.png

The quickest way to create a new skin is to just make a copy of the Default folder in <OxiteSite>/Skins with your own skin name (in this case skewed).

skewed.png

To make the site use the new skin first log in then follow the manage site link in the admin menu.

manageSite.png

Under the Manage Site section follow the Settings link to edit the site's settings and change the Skin Name field to the (folder) name of the new skin and submit the form.

changeSkinName.png

Now* you're all set up with your own skin - that looks just like the default. Yay!
* with the current release you might need to restart your app for the change to be picked up by the skinning engine.

oxiteDefault.png

Or with a little tweaking, something a little different...

oxiteSkewed.png

From there you can change all of the CSS and JavaScript you want (using the same selectors). You could even override one or two or ten or all of the views (including the master page) by adding a "Views" folder to your skin and following the same hierarchy drop in the new view.

For example you could copy header.ascx from <OxiteSite>/Views/Shared into <OxiteSite>/Skins/<your new skin>/Views/Shared

newHeader.png

and change it up a bit to get an amazing new header

skewedHeader.png

But what if you wanted the menu out of the header and stuck to the side of the content? Pull the menu markup out into it's own partial view and add a copy (from the default) of the master page

newMenu.png

modify the master page for the skin to make use of the new menu partial view

newMenuInMaster.png

and (along with a little change to the CSS) you end up with something like

menuMoved.png