12 Step guide to customising the site template
1 - Add your app title
<!-- [[1]] # App title # -->
<title>Your App Title Here</title>
2 - Edit settings for your Twitter account feed
// [[2]] # Twitter Feed Options - see http://tweet.seaofclouds.com/ for details #
jQuery(function($){
$(".tweet").tweet({
username:"wp7appsite",
join_text:"auto",
count: 3,
auto_join_text_default:"We said:",
auto_join_text_ed:"We",
auto_join_text_ing:"We were",
auto_join_text_reply:"",
auto_join_text_url:"",
loading_text:"loading tweets..."
});
});
3 - Apply your own colours and branding via the CSS
<styletype="text/css">
/* [[3]] #Windows Phone App Website Branding Styles */
/* Text and Background colour */
body {
color: #000;
background-color:#BDBDBD;
}
/* Header Colours */
h1, h2, h3,h4, h5, h6 {color: #333;}
/* Link colour */
a, a:visited { color:#666;}
/* Logo */
#header#logo h1 {
width: 175px;
height: 110px;
background: transparenturl(images/branding/dummylogo.png) no-repeat;
}
/* Strapline colour */
#header#strapline p {color: #000;}
/* App Feature List - define custom feature icons here - */
ul.featurelistli.BulletImage { background-image: url(images/listcircle.png);}
/* User Review Quote */
blockquote.user_quotep {color:#666;}
</style>
Dive into layout.css for more control over the look and feel
4 - Add your app title in the Page header
<div id="logo"class="four columns alpha">
<!-- [[4]] # App title # -->
<h1>Your App Title Here</h1>
</div>
5 - Give your app a marketing strapline
<div id="strapline"class="six columns omega offset-by-six">
<!-- [[5]] # App strapline # -->
<p>The One-Page<br/>Windows Phone 7 App<br/>Website Template</p>
</div>
6 - Add a Twitter follow button from https://twitter.com/about/resources/followbutton
<!-- [[6]] # Twitter Follow Button : Enter your twitter link below # -->
<a href="https://twitter.com/wp7appsite" class="twitter-follow-button" data-show-count="false">Follow WP7appSite</a>
7 - Add screenshots of your application
<div id="phonescreens" class="six columns">
<div id="slider">
<!-- [[7]] # App Screenshots - Replace items in this list with your own 240x400px Images # -->
<ul>
<li><imgsrc="images/screenshots/screenshot0.jpg"alt="App Screenshot"/></li>
<li><imgsrc="images/screenshots/screenshot1.jpg"alt="App Screenshot"/></li>
<li><imgsrc="images/screenshots/screenshot2.jpg"alt="App Screenshot"/></li>
</ul>
</div>
Screenshots should be 240x400px (50% of actual resolution) and placed in images/screenshots
8 - Link to your app in the Windows Phone Marketplace
<!-- [[8]] # App Marketplace Link - Find your app on the marketplace and insert the URL below# -->
<pclass="downloadlink"><ahref="wp7appsite.zip">Download for Windows Phone</a></p>
9 - Define the features which make your app great
<div id="features"class="six columns omega">
<h2>Features</h2>
<!-- [[9]] # App Feature List # -->
<ul class="featurelist">
<li class="BulletImage">Responsive, mobile-friendly layout</li>
<li class="BulletImage">Fully configurable branding [<ahref="http://www.findapad.biz">Example Site</a>]</li>
<li class="BulletImage">Twitter feed and follow button</li>
<li class="BulletImage">Smooth jQuery Screenshot slider</li>
<li class="BulletImage">Just add your own content!</li>
<li class="BulletImage"><ahref="wp7appsite.zip">Download Here</a> [225Kb .ZIP]</li>
</ul>
Custom icons can be defined in the CSS above, images should be 25x25px. Look athttp://thenounproject.com for some great Metro style icons.
10 - Throw in a couple of user quotes and reviews
<!-- [[10]] # User Reviews & Quotes # -->
<blockquote class="user_quote">
<p>The best (and only) Windows Phone 7 App site template I've ever used!</p>
<cite>Nick Harewood, App Designer</cite>
</blockquote>
</div>
11 - Allow your users to feedback with ideas via the UserVoice widget
// [[11]] # UserVoice Widget code location : Example code below for wp7appsite; replace with your own from widget.uservoice.com
Requires UserVoice account
12 - Publish!
