I have about 23 posts sitting in drafts in relation to my subtext skin bonanza. It takes a while to go through each skin, test it, write it up and package it up so please bare with me. I do plan on catching up soon.
I wanted to take time out from subtext themes for a moment and go over a topic that I think will be of some use to such webmasters that use subtext on a multi-blog platform. Customising Subtext core pages.
What pages am I talking about here?
In this part I am going to cover pages that are visible to non-authenticated users:
- Login Page jQuery UI – Part 1
- Login Page New Design – Part 2
- 404 Page – Part 3
- Error Page – Part 4
Customise the page
Login Page
For anyone logging in to a subtext blog you’ll be confronted with the following screen.
While the above page is minimalistic and straight forward you might want to tweak it more to your users/clients. Where do we begin?
Using jQuery UI
To start with we will make backups before making any changes. We are interested in the login page found Solution –> Subtext.Web –> aspx –> login.aspx. I first add the jQuery and jQuery UI javascript references to the bottom of the login.aspx page:
</form>
<script type=”text/javascript” src=”jquery.min.js”></script> _fcksavedurl=””jquery.min.js”></script>”
<script type=”text/javascript” src=”jquery-ui.min.js”></script>
</body>
</html>
I am referencing them locally for now so i can work offline. Before deploying I would point my code to Google cdn.
Preparing the UI theme
Looking at the jQuery themes I decided to go with the Flick theme as the colours will go with the Subtext logo. Before I can use the theme I created a folder within the aspx folder to house the UI files.
Going with a custom build of jQuery UI as we’re only interested right now on the tabs and button widgets. Extracting the custom build and putting the files in the newly created directory.
All the files are now in place just the matter of making the page come alive. Within the header of the page just under the line that declares the “login.css” we add the following line:
<link rel=”Stylesheet” type=”text/css” href=”<%= VirtualPathUtility.ToAbsolute(“~/aspx/UI/jquery-ui-1.8.16.custom.css”) %>” />
Bringing the page to life – Tabs
The login page now has all the references it needs to use the widgets from the jQuery UI so next we’re going to bring the page to life.
A couple of changes and the results are looking fantastic:
Normal Sign in
Sign in with OpenId
Code Changes to login.aspx
I have highlighted the code needed to get the above working. At the end of the post I’ll post a download link.
<div id=”logo”></div>
<div id=”tabs”>
<ul>
<li><a href=”#nSign”>Please Sign In Below</a></li>
<li><a href=”#oSign”>Sign In with OpenID</a></li>
</ul>
<fieldset id=”nSign”>
<legend>Please Sign In Below</legend>
…..
</fieldset>
<fieldset id=”oSign”>
<legend>Sign In with OpenID</legend>
….
</fieldset> </div>
</div>
</form>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js”></script>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js”></script>
<script type=”text/javascript”>
$(function () {
$(“#tabs”).tabs();
});
</script>
Bringing the page to life – Buttons
We talked above about adding jQuery UI tabs to the login page. The next stage is we’re going to transform the plain buttons as seen above into nicer looking elements.
The cascading style sheet and JavaScript files have all been added already so it’s the matter of adding a single line and voila.
<script type=”text/javascript”>
$(function () {
$(“#tabs”).tabs();
$(“input:submit”).button();
});
</script>
You can see the results below.
To download the login page for all the above click here.
Next step we could implement an icon on the button. For more info check out : http://jqueryui.com/demos/button/#icons
