<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Cambria;
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
p.MsoAcetate, li.MsoAcetate, div.MsoAcetate
{mso-style-priority:99;
mso-style-link:"Balloon Text Char";
margin:0cm;
margin-bottom:.0001pt;
font-size:8.0pt;
font-family:"Tahoma","sans-serif";}
span.BalloonTextChar
{mso-style-name:"Balloon Text Char";
mso-style-priority:99;
mso-style-link:"Balloon Text";
font-family:"Tahoma","sans-serif";}
span.EmailStyle19
{mso-style-type:personal-compose;
font-family:"Calibri","sans-serif";
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page Section1
{size:612.0pt 792.0pt;
margin:72.0pt 72.0pt 72.0pt 72.0pt;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-GB link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><span style='font-size:16.0pt;font-family:"Cambria","serif"'>Network
Fusion Theme for WiFiDog Auth<o:p></o:p></span></p>
<p class=MsoNormal><o:p> </o:p></p>
<p class=MsoNormal>I have been working on a new theme pack for WiFiDog
Authentication server over the past few days. It is not quite finished, but I thought
I would show you what it looks like on a few of the main pages. In my personal
opinion it is even a vast improvement over the base theme, keeping the same
styling throughout the application (especially the tables) to give a consistent
feel to the admin interface.<o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
<p class=MsoNormal>I have learnt a lot about CSS and the way inheritance works
by doing this and must say, if you want to create your own theme pack, rename
the base themes "stylesheet.css" this will block the inheritance and
allow you to get the exact feel you want, then when you have finished, rename
it back to its original name, then use firebug to work out inheritance
problems. I created a special stylesheet called "masterReset.css"
which attempts to block ALL of the base theme by resetting each of the styles
to default, as I wanted to give it the best appearance, but also to allow this
theme to be the base theme if the community wanted it. If so, all that needs to
be done is remove the @import url("stylesheets/masterReset.css") from
the main stylesheet. <o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
<p class=MsoNormal>I have also attempted to split the stylesheet up into
sections so that they are easier to maintain. so the theme's
"stylesheet.css" only contains @import statements, then a directory
called stylesheets contains substylesheets such as "layout.css" and
"tables.css". I know that this may break the theme on early browsers,
but I thought that this was a good design decision and makes it far easier in
the future to transfer CSS styles between themes, and also remove them
completely if needed. <o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
<p class=MsoNormal>You may notice that i have replaced a lot of the icons
around the application. some of these are the node up and down images, and the
tool content dialog images. at the moment these images are contained in the
"common images" directory so are visible in all themes. I will have
to see if it is possible to override this Dir, if the theme has an image to
replace them. <o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
<p class=MsoNormal>Last but not least, I have had to make a couple of changes
to the "mainUI_Display.tpl in order to achieve this layout. before I can
commit it, I must make sure that it is more generic e.g. I moved the menu from
displaying in main content area, to below the header, so that it is also
displayed in the left area. also the footer (and possibly the header at a later
date) is shown constantly. In order to achieve this I will need to add some new
options to allow selection from the Network Options page.<o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
<p class=MsoNormal>Unfortunately I can’t put the screen shots in this
email, because of the mailing list limitations, but here are the links:<o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
<p class=MsoNormal>An online version of this email (including screenshots) can
be found <a href="http://www.kravis.co.uk/networkfusion/hotspots/theme.html">here</a><o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
<p class=MsoNormal><a
href="http://www.kravis.co.uk/networkfusion/hotspots/Network%20Fusion%20authentication%20server.jpg">Network
Fusion authentication server.jpg</a><o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
<p class=MsoNormal><a
href="http://www.kravis.co.uk/networkfusion/hotspots/offsite%20login%20page.jpg">offsite
login page.jpg</a><o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
<p class=MsoNormal><a
href="http://www.kravis.co.uk/networkfusion/hotspots/Network%20Fusion%20authentication%20server%20node%20status.jpg">Network
Fusion authentication server node status.jpg</a><o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
<p class=MsoNormal>Regards,<o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
<p class=MsoNormal>Robin Jones<o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
</div>
</body>
</html>