This project is read-only.

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

<style type="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: transparent url(images/branding/dummylogo.png) no-repeat;

       }

 

       /* Strapline colour */

       #header #strapline p {color: #000;}

 

       /* App Feature List - define custom feature icons here -  */

       ul.featurelist li.BulletImage { background-image: url(images/listcircle.png);}

 

       /* User Review Quote */

       blockquote.user_quote p {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><img src="images/screenshots/screenshot0.jpg" alt="App Screenshot" /></li>

                                         <li><img src="images/screenshots/screenshot1.jpg" alt="App Screenshot" /></li>

                                         <li><img src="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#             -->   

       <p class="downloadlink"><a href="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 [<a href="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"><a href="wp7appsite.zip">Download Here</a> [225Kb .ZIP]</li>

                           </ul>

 

Custom icons can be defined in the CSS above, images should be 25x25px.  Look at http://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!

Last edited Jul 2, 2012 at 5:54 AM by spacescape, version 5

Comments

No comments yet.