Spawtz offers you a lot of flexibility when it comes to the look and feel of your Spawtz installation. You can completely customise the skin of the application so it precisely matches the look and feel of your site by updating the skin HTML in the control panel.
Here are a few screenshots of customer installations of Spawtz to show how customisable the skin really is:
Same page, different skins.
In order to modify the skin of Spawtz, you need to do a few things:
1) Log in as an administrator
2) Click "Config"
3) Click "Edit Skin HTML"
4) Modify the HTML as required and hit save.
When making modifications to the Skin HTML there are a few things to bear in mind:
URLs must be fully qualified
You must ensure that all urls in the skin HTML are fully qualified urls to assets on your site. IE, you need this:
<img src="https://www.yoursite.com/images/headerimage.jpg"/>
Not this:
<img src="/images/headerimage.jpg"/>
You must include the required placeholders in the HTML
The following additions must be made to the skin:
The head tag of the HTML must have a "runat="server"" attribute applied to it.
You must include ##HEADERCONTENT## somewhere in the header
You must include ##CONTENT## somewhere in the body
You must include the Spawtz stylesheets so the standard styles are applied (this is optional if you are completely restyling all the Spawtz elements)
These placeholders will be replaced with the actual content from Spawtz, so they must appear in the HTML somewhere - the ##HEADERCONTENT## placeholder should appear in the <head> section of the html, and the ##CONTENT## placeholder should appear somewhere in the body.
To include the login form, you must include this javascript in the HTML
If you want the login section to appear in the pages, you should include this html:
<script type="text/javascript" src="/External/Menus/Menu.aspx"></script>
This will cause the login form to be included in the page if the user is NOT currently logged in, or the user specific menu section to appear if they ARE logged in. More on this in a while.
An Example
Let's look at an example. Here we have the "vanilla" installation of Spawtz, as it appears after it has first been generated:
And here is the HTML for the skin for that site:
<%@ Master Language="C#" AutoEventWireup="true" Inherits="SpawtzTemplates.SpawtzTopHeaderMasterBase" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> <link rel="stylesheet" href="/External/Stylesheets/StandardExternalStyles.css" type="text/css" /> <link type="text/css" href="/SpawtzSkin/Styles/ExternalStyles.css" rel="Stylesheet" /> <asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder> </head> <body> <div class="Wrapper"> <div class="MainNav"><a href="/External/">Home</a> | <a href="/External/Registration/">Registration</a> | <a href="/External/Fixtures/">Fixtures/Standings</a></div> <div class="LoginOrMenu"><script language="javascript" type="text/javascript" src="/External/Menus/Menu.aspx"></script></div> <div class="Content"> <asp:ContentPlaceHolder ID="Content" runat="server"></asp:ContentPlaceHolder> </div> <div style="clear: both"></div> </div> </body> </html>
Let's say we want to update the skin to match this front end site, hypothetically hosted at http://wwww.customersite.com:
The best way to do this is usually to grab all the HTML from the customer site (ie, right click on the site in a browser, select "View Source" and then save that html):
<!DOCTYPE HTML> <html> <head> <title>Customer Site</title> <meta http-equiv="content-type" content="text/html; charset=windows-1252" /> <link rel="stylesheet" type="text/css" href="style/style.css" title="style" /> </head> <body> <div id="main"> <div id="header"> <div id="logo"> <div id="logo_text"> <!-- class="logo_colour", allows you to change the colour of the text --> <h1><a href="index.html">A Customer <span class="logo_colour">Site</span></a></h1> <h2>We run the best sports leagues in the world.</h2> </div> </div> <div id="menubar"> <ul id="menu"> <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on --> <li class="selected"><a href="index.html">Home</a></li> <li><a href="aboutus.html">About Us</a></li> <li><a href="">Fixtures</a></li> <li><a href="">Standings</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </div> </div> <div id="site_content"> <div id="content"> <!-- insert the page content here --> <h1>Welcome to the example customer site</h1> <p>New season starts in 3 weeks! Don't forget to register soon!</p> </div> </div> <div id="content_footer"></div> <div id="footer"> Copyright © Customer Site </div> </div> </body> </html>
Then, we can edit this HTML in notepad, or some sort of HTML editor to replace all the relative urls with fully qualified urls. So the above, becomes this:
<!DOCTYPE HTML> <html> <head> <title>Customer Site</title> <meta http-equiv="content-type" content="text/html; charset=windows-1252" /> <link rel="stylesheet" type="text/css" href="http://www.customersite.com/style/style.css" title="style" /> </head> <body> <div id="main"> <div id="header"> <div id="logo"> <div id="logo_text"> <!-- class="logo_colour", allows you to change the colour of the text --> <h1><a href="http://www.customersite.com/index.html">A Customer <span class="logo_colour">Site</span></a></h1> <h2>We run the best sports leagues in the world.</h2> </div> </div> <div id="menubar"> <ul id="menu"> <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on --> <li class="selected"><a href="http://www.customersite.com/index.html">Home</a></li> <li><a href="http://www.customersite.com/aboutus.html">About Us</a></li> <li><a href="">Fixtures</a></li> <li><a href="">Standings</a></li> <li><a href="http://www.customersite.com/contact.html">Contact Us</a></li> </ul> </div> </div> <div id="site_content"> <div id="content"> <!-- insert the page content here --> <h1>Welcome to the example customer site</h1> <p>New season starts in 3 weeks! Don't forget to register soon!</p> </div> </div> <div id="content_footer"></div> <div id="footer"> Copyright © Customer Site </div> </div> </body> </html>
Then, we need to add the placeholders. For the header, that's straightforward. We add the runat="server" attribute, and the content placeholder:
<head runat="server"> <title>Customer Site</title> <meta http-equiv="content-type" content="text/html; charset=windows-1252" /> <link rel="stylesheet" type="text/css" href="http://www.customersite.com/style/style.css" title="style" /> <asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder> </head>
For the content section, we first need to decide where that is going to go. Usually, the best thing to do is just to delete all the content from your "template" and replace it with the content placeholder. So this:
<div id="site_content"> <div id="content"> <!-- insert the page content here --> <h1>Welcome to the example customer site</h1> <p>New season starts in 3 weeks! Don't forget to register soon!</p> </div> </div> <div id="content_footer"></div> <div id="footer"> Copyright © Customer Site </div>
Becomes this:
<div id="site_content"> <div id="content"> <!-- insert the page content here --> <asp:ContentPlaceHolder ID="Content" runat="server"></asp:ContentPlaceHolder> </div> </div> <div id="content_footer"></div> <div id="footer"> Copyright © Customer Site </div>
Now when we save that skin html, our site looks like this:
Getting there! We're missing the standard Spawtz styles, and the the login section. We include the standard styles and the login section as below (note that if you ever "lose" the login section, you can always go to the main login page at http://yoursite.spawtz.com/SpawtzApp/Login.aspx):
<!DOCTYPE HTML> <html> <head runat="server"> <title>Customer Site</title> <meta http-equiv="content-type" content="text/html; charset=windows-1252" /> <link rel="stylesheet" type="text/css" href="/SpawtzSkin/style/style.css" title="style" /> <link rel="stylesheet" href="/External/Stylesheets/StandardExternalStyles.css" type="text/css" /> <link type="text/css" href="/SpawtzSkin/Styles/ExternalStyles.css" rel="Stylesheet" /> <asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder> </head> <body> <div id="main"> <div id="header"> <div id="logo"> <div id="logo_text"> <!-- class="logo_colour", allows you to change the colour of the text --> <h1><a href="http://www.customersite.com/index.html">A Customer <span class="logo_colour">Site</span></a></h1> <h2>We run the best sports leagues in the world.</h2> </div> </div> <div id="menubar"> <ul id="menu"> <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on --> <li class="selected"><a href="http://www.customersite.com/index.html">Home</a></li> <li><a href="http://www.customersite.com/aboutus.html">About Us</a></li> <li><a href="">Fixtures</a></li> <li><a href="">Standings</a></li> <li><a href="http://www.customersite.com/contact.html">Contact Us</a></li> </ul> </div> </div> <div id="site_content"> <div class="LoginOrMenu"><script language="javascript" type="text/javascript" src="/External/Menus/Menu.aspx"></script></div> <div id="content"> <!-- insert the page content here --> <asp:ContentPlaceHolder ID="Content" runat="server"></asp:ContentPlaceHolder> </div> </div> <div id="content_footer"></div> <div id="footer"> Copyright © Customer Site </div> </div> </body> </html>
By default, the /External/Menus/Menu.aspx script will embed the following HTML in the page if the user is not logged in:
<form action='https://yoursite.spawtz.com/SpawtzApp/Login.aspx' method='post'> <ul class='LFList'> <li>Email Address: </li> <li><input type='text' name='n_EmailAddress_em' class='LFText' /></li> <li>Password: </li> <li><input type='Password' name='Password' class='LFText' /></li> <li><input class='LFLogin' type='submit' value='Login' /></li> </ul> </form>
And the following HTML if they ARE logged in:
<ul class='UMenu'> <li class='UMyProfile'><a href='http://yoursite.spawtz.com/External/Profile/UserProfile.aspx'>My Profile</a></li> <li class='UMyTeams'><a href='http://yoursite.spawtz.com/External/Profile/TeamList.aspx'>My Teams</a></li> <li class='UMyCalendar'><a href='http://yoursite.spawtz.com/ActionController/UserScheduleList'>My Calendar</a></li> <li class='UFindRingers'><a href='http://yoursite.spawtz.com/External/Profile/RingerSearch.aspx'>Find Ringers</a></li> <li class='UMyBookings'><a href='http://yoursite.spawtz.com/External/Profile/BookingsList.aspx'>My Bookings</a></li> <li class='UMyStatement'><a href='http://yoursite.spawtz.com/External/Profile/Statement.aspx'>My Statement</a></li> <li class='ULogout'><a href='http://yoursite.spawtz.com/SpawtzApp/Logout.aspx'>Log out</a></li> </ul>
So now, here's how our page looks when team organisers and players are not logged in:
And here's how it looks when they ARE logged in:
Note that you can include the menu section anywhere you want. If you need us to modify the HTML that is embedded in the logged in and not logged in states, you can do so by sending us the HTML that you want changed - we can then update the /External/Menu/Menu.aspx page to include your custom HTML instead of the default HTML. And you can include that javascript in your OWN pages too, which will cause the login form or the user specific menu items to appear on your site as well, providing a seamless experience for the users.
That's it! We're done, and Spawtz is now skinned to match your front end. Note that you can do further tweaks to the styles either by modifying the stylesheets hosted on your server, or by changing the styles in the externalstyles.css file which can also be edited in the configuration section of your admin control panel.