WP7 App site template

Updated Release: WP7appsite source (Jan 30, 2012)

spacescape — Fri, 15 Mar 2013 08:27:04 GMT

Packaged for download

Released: WP7appsite source (Jan 30, 2012)

Fri, 15 Mar 2013 08:27:04 GMT

Packaged for download

Created Release: WP7appsite source (Jan 30, 2012)

spacescape — Fri, 15 Mar 2013 08:24:16 GMT

Packaged for download

Created Issue: Create similar page fow Windows 8 Metro apps [10984]

Necroman — Mon, 09 Jul 2012 20:22:42 GMT

It will be great, if you create similar template page for Windows 8 Metro apps - with Windows 8 Simulator in the middle for showing app screenshots. It should be quite easy for experienced HTML/CSS programmer :)

Updated Wiki: Documentation

spacescape — Mon, 02 Jul 2012 04:54:07 GMT

12 Step guide to customising the site template

1 - Add your 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

/* [[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

<h1>Your App Title Here</h1>

</div>

5 - Give your app a marketing 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

<a href="https://twitter.com/wp7appsite" class="twitter-follow-button" data-show-count="false">Follow WP7appSite</a>

7 - Add screenshots of your application

<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

<p class="downloadlink"><a href="wp7appsite.zip">Download for Windows Phone</a></p>

9 - Define the features which make your app great

<h2>Features</h2>

<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

<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!

Commented Issue: marketplace button does not display [10369]

wieser_software — Fri, 15 Jun 2012 08:31:08 GMT

the button that links to the windows marketplace does not display in Win IE 7
Comments: ** Comment from web user: wieser_software **

Same as my comment on IE9 compat mode.

The problem is text indent in Layout.css has been set to -9999px

If you remove that line, and replace it with
color: transparent;
font-size:small;

it helps a bit, though you still get a line through your logo at the top of the very small H1 text.

Created Issue: There's a bug in IE9 compatibility mode [10889]

wieser_software — Fri, 15 Jun 2012 08:19:00 GMT

If you are running in IE9 compatibility mode, the download now button is missing! (presumably positioned at -9999px!)

New Post: Screenshot Phone Skin

casaout — Sat, 26 May 2012 12:06:18 GMT

I really like the WP7 App Site template - thank you!

I would love, if I could chose an other phone (not the simulator) as the slideshow-background (e.g. Nokia Lumia). I mean, I could change the source of the image myself, this is just a proposition ;)

Thanks.

Created Issue: social buttons / blog link [10790]

coldacid — Tue, 22 May 2012 11:40:20 GMT

Would be nice if the template offered a space for putting social buttons (Facebook like, Google +1, AddThis) and blog/service icons. I figure the best place for them would be under reviews & quotes, it's just that it'd be nice to have something already set up in the template so users can go and add their buttons in nice and quickly.

New Post: uservoice widget

davekats — Wed, 18 Apr 2012 03:25:26 GMT

When I remove this code from the index.html page:

var uvOptions = {};
	  (function() {
		var uv = document.createElement('script'); uv.type = 'text/javascript'; uv.async = true;
		uv.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'widget.uservoice.com/qvvKZGQcHFJyzqfZNPnKA.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(uv, s);
	  })();

the page displays with a vast amount of empty space beneath everything. How can I just remove this widget without affecting the layout of everything?

Thanks

Created Issue: IE block active X [10516]

yae — Wed, 14 Mar 2012 20:48:25 GMT

Hi:

I am testing this template but IE block activex or complemntes.

But your web runs fine: http://www.space-scape.com/wp7appsite/

the source code is not the same?

New Post: Any plans for a landscape profile?

texData — Thu, 23 Feb 2012 10:59:18 GMT

spacescape wrote:

A good idea... I could look at an alternative layout for Games, as pretty much all run in Landscape mode. A long-standing problem in the Marketplace too, trying to view game screenshots with your head titled to one side...!

landscape mode would be very nice !

Commented Issue: There are no download options [10361]

mikestu — Thu, 16 Feb 2012 15:15:59 GMT

Where can I download this? Do I need to visit the demo page, and grab everything it uses?
Comments: ** Comment from web user: mikestu **

Thanks, man! The template looks great.

Created Issue: marketplace button does not display [10369]

panospace — Tue, 14 Feb 2012 02:36:08 GMT

the button that links to the windows marketplace does not display in Win IE 7

New Post: 'Back' button?

KHK — Tue, 14 Feb 2012 02:21:02 GMT

Great work!

I'm wondering, though, if you have plans to add some sort of a 'Back' button, to allow the user to return to the root / hub page from which multiple app pages are linked.

Thanks!

Commented Issue: There are no download options [10361]

spacescape — Sun, 12 Feb 2012 09:16:27 GMT

Where can I download this? Do I need to visit the demo page, and grab everything it uses?
Comments: ** Comment from web user: spacescape **

Visit the source code page, and use the link on the right to download latest version

Created Issue: There are no download options [10361]

mikestu — Sat, 11 Feb 2012 17:56:05 GMT

Where can I download this? Do I need to visit the demo page, and grab everything it uses?

Created Issue: Segoe SemiBold not a common font [10048]

aeoth — Sat, 24 Dec 2011 04:16:34 GMT

In a few places you're using "Segoe SemiBold" which is *not* a commonly installed font. "Segoe UI" is however, installed with Vista, 7 and various Office packages - I'm guessing "Segoe UI SemiBold" is what was meant.

It may be also be worth falling back onto Segoe WP as well for those looking at it on a phone.
ie:
h2 {
font-family: "Segoe UI SemiBold", "Segoe WP SemiBold", Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

New Post: Any plans for a landscape profile?

spacescape — Sun, 11 Dec 2011 21:29:34 GMT

A good idea... I could look at an alternative layout for Games, as pretty much all run in Landscape mode. A long-standing problem in the Marketplace too, trying to view game screenshots with your head titled to one side...!

New Post: Any plans for a landscape profile?

Spruce — Fri, 02 Dec 2011 13:06:59 GMT

My game is run in landscape pretty much the whole time. Can you do this currently with the template or are there any plans to implement this?