Design Templates

Download these professionally designed Starter Kits and XHTML templates to get you started creating compelling, standards-compliant Web pages with ASP.NET 2.0. There are four Starter Kits below. These Starter Kits are complete web site solutions using ASP.NET’s latest controls (tree view control, grid view control, detail view control, login control, site map path controls and more). There are another 5 XHTML templates below. These are individual XHTML strict Web page templates (available each in two different colors) that are accompanied by design philosophy whitepapers that describe each template’s Section 508 conformance, page layout with CSS (page layouts using CSS floats or tables), Web page accessibility best practices and Web standard resources. All nine templates below are easily customizable and extendable to fit your own content.

For introduction to the ASP.NET Master Pages template set, click here.

ASP.NET Design Starter Kit Templates

Visual C# Commerce Design Visual Basic Commerce Design The “Commerce” template features three columns of content in a centered fixed/fluid layout. No layout tables, just CSS. The template showcases the new ASP.NET Treeview control for displaying hierarchical lists of items and shows how to skin it as part of a theme. The use of “Commerce” is not limited to online shop scenarios. Its three themes are well suited for other purposes as well, such as fan sites or even a personal web site. Section 508 accessibility, a dedicated print style sheet and several themed tabular controls, such as GridView and DetailsView complement its feature set. Included themes: Magnolia, Jazz, Snow. Visual C# File Download Size: 1.0 MBVisual Basic File Download Size: 1.0 MB For more information, view “Commerce” template documentation.

---

Visual C# Personal Design Visual Basic Personal Design Best suited for a personal or blog-style web site, this template has a hybrid fixed/fluid layout that organizes the content in two columns, with a horizontal menu at the top. It is a pure CSS layout that doesn’t rely on tables for arranging page content. Themes can be selected by the user and their preference will be restored upon the next visit by taking advantage of the new ASP.NET profile feature. The template contains a Section 508-compliant sample form, a print style sheet and a themed GridView control sample. Included themes: Green, Brown, Red. Visual C# File Download Size: 1.0 MB Visual Basic File Download Size: 1.0 MB For more information, view “Personal” template documentation.

---

Visual C# Corporate Design Visual Basic Corporate Design This template has been specifically designed to accommodate large amounts of content. It features a three-column, centered layout with a fixed with. Navigating the site is done though two correlated ASP.NET Menu controls and the SiteMapPath control. Using CSS, the page content is placed before the navigation in the XHTML source to improve accessibility and search-engine ranking. Placeholders and themes for including personalization features, such as the new Login control, are provided. The template is Section 508-compliant, contains a dedicated print style sheet and a themed GridView sample control. Included themes: Granite, Sand, Paper. Visual C# File Download Size: 1.7 MBVisual Basic File Download Size: 1.0 MB For more information, view “Corporate Design” template documentation.

---

Visual C# Small Business Design Visual Basic Small Business Design This template features two columns that are arranged in a centered, fixed-width layout. It is best suited for a small to medium-sized site. Its themes are widely different from each other, demonstrating the visual potential of ASP.NET themes and skins. Additional highlights include: table-less layout; source-ordered XHTML, placing the page content before the navigation elements; Section 508-compliant sample form; ASP.NET Menu and SiteMapPath controls; varying header images; dedicated print style sheet that formats the pages for output in a printer; themed GridView control sample. Included themes: Fruits, Forest, Literature. Visual C# File Download Size: 1.3 MBVisual Basic File Download Size: 1.3 MB For more information, view “Small Business” template documentation.

---

These templates illustrate high quality design principles combined with standards driven code. Each template is XHTML 1.1 Strict, Section 508/WCAG conforming and works across many browsers. The accompanying documentation describes how the template was built, the thought processes, tradeoffs, and workarounds necessary to build it. It also contains instructions on how to easily customize and change the templates for use in your site. You will find these HTML templates to be an excellent starting point when beginning to build out dynamic, data-driven Web sites with Microsoft Visual Studio and Microsoft Visual Web Developer. We hope they’ll give both designers and developers deep insight into their creation process while providing you with a workable starting point.

	Basic The Basic template File Download Size: 603 KB 2 column layout Both columns are fixed width File Download Size: 603 KB For more information, view “Basic” template documentation.
	Fun The Fun template 2 column layout Both columns are stretchy This layout uses absolute positioning File Download Size: 393 KB For more information, view “Fun” template documentation.
	Grid The Grid template 3 column layout is used in the header section 2 column layout is used for the body section All the columns are “stretchy” File Download Size: 570 KB For more information, view “Grid” template documentation.
	Rounded The Rounded template 2 column layout Both columns are fixed width File Download Size: 495 KB For more information, view “Rounded” template documentation.
	Simple The Simple template 3 column layout The side columns are fixed width. The middle column is “stretchy” File Download Size: 420 KB For more information, view “Simple” template docume

→ Leave a CommentCategories: Uncategorized
Tagged: Design Templates

Wordpress themes free

To Continue Downloading and Using my Themes for free, you are now required to Subscribe via RSS or Email . Thanks!

Live Demo | BlogStarter (211)

+ Featured Article Slideshow
+ Image on Articles (Automatic Resize)
+ Advertisement/Banner Ready
+ Gravatar on Comments
+ SEO Optimized
+ Works with the Latest Version of Wordpress 2.8 (and below)
+ Threaded Comments
+ Featured Video
+ Flickr RSS
+ Animated Tag Cloud
+ XHTML BlogStarter (29)
+ PSD BlogStarter (31)
+ Flickr RSS Plugin (3116)
+ Featured Content Gallery (1433)
+ Animated Tag Cloud (2803)

FAQ:
How to add Thumbnail Images?
When creating your blog post, just click “Add an Image” Button. Then insert into post. Thumbnails will automatically show on your blog. Custom Field NOT required.
How to Change Logo?
open “images” folder and replace logo image

Paid Customization & Support:
Email – WPTD Tech Bryan

Tags: blogstarter, minimalist

Filed Under: Free Themes

SimpleScheme Mag

July 2, 2009 by ChiQ 4 Comments

Live Demo | SimpleScheme (145)

Features:
+ Other Color Options
- Brown SimpleScheme (18) | Live Demo
- Green SimpleScheme (19) | Live Demo
- Orange SimpleScheme (14) | Live Demo
- Pink SimpleScheme (15) | Live Demo
- Red SimpleScheme (17) | Live Demo
+ Featured Article Slideshow
+ Image on Articles (Automatic Resize)
+ Advertisement/Banner Ready
+ Gravatar on Comments
+ SEO Optimized
+ Works with the Latest Version of Wordpress 2.8 (and below)
+ Threaded Comments
+ Featured Video
+ Flickr RSS
+ Animated Tag Cloud
+ XHTML SimpleScheme (17)
+ PSD SimpleScheme (17)
+ Flickr RSS Plugin (3116)
+ Featured Content Gallery (1433)
+ Animated Tag Cloud (2803)

FAQ:
How to add Thumbnail Images?
When creating your blog post, just click “Add an Image” Button. Then insert into post. Thumbnails will automatically show on your blog. Custom Field NOT required.
How to Change Logo?
open “images” folder and replace logo image

Paid Customization & Support:
Email – WPTD Tech Bryan

Tags: blue, brown, green, orange, pink, simple scheme

Filed Under: Free Themes

ChatterBox Theme

July 1, 2009 by ChiQ 3 Comments

Live Demo | Chatterbox Theme (291)

+ Featured Article Slideshow
+ Image on Articles (Automatic Resize)
+ Advertisement/Banner Ready
+ Gravatar on Comments
+ SEO Optimized
+ Works with the Latest Version of Wordpress 2.8 (and below)
+ Threaded Comments
+ Featured Video
+ Flickr RSS
+ Animated Tag Cloud
+ PSD Chatterbox (44)
+ Flickr RSS Plugin (3116)
+ Featured Content Gallery (1433)
+ Animated Tag Cloud (2803)

FAQ:
How to add Thumbnail Images?
When creating your blog post, just click “Add an Image” Button. Then insert into post. Thumbnails will automatically show on your blog. Custom Field NOT required.
How to Change Logo?
open “images” folder and replace logo image

Paid Customization & Support:
Email – WPTD Tech Bryan

Tags: blue, chatterbox

Filed Under: Free Themes

Accelerated Mag

June 29, 2009 by ChiQ 2 Comments

Live Demo | Accelerated Mag (228)

+ Featured Article Slideshow
+ Image on Articles (Automatic Resize)
+ Advertisement/Banner Ready
+ Gravatar on Comments
+ SEO Optimized
+ Works with the Latest Version of Wordpress 2.8 (and below)
+ Threaded Comments
+ Featured Video
+ Flickr RSS
+ Animated Tag Cloud
+ PSD Accelerated Mag (36)
+ Flickr RSS Plugin (3116)
+ Featured Content Gallery (1433)
+ Animated Tag Cloud (2803)

FAQ:
How to add Thumbnail Images?
When creating your blog post, just click “Add an Image” Button. Then insert into post. Thumbnails will automatically show on your blog. Custom Field NOT required.
How to Change Logo?
open “images” folder and replace logo image

Paid Customization & Support:
Email – WPTD Tech Bryan

Tags: accelerated, grey, orange

Blogger Template For Adsense

Templates for Adsense 1

coming soon Demo Download

Templates for Adsense 2

Demo | Download1

Templates for Adsense 3

Demo | Download1

Templates for Adsense 4

Demo | Download1 | Download2 | Download3

Templates for Adsense 5

Demo | Download1 | Download2 | Download3

Templates for Adsense 6

Demo | Download1 | Download2

Templates for Adsense 7


Demo | Download1 | Download2

aStore Template

How to change aStore Template





Soft aStore Template

Download Classic aStore Template


Classic aStore Template

Download Classic aStore Template

How To Create Blogger Template

This tutorial will cover the steps needed to create your own blogger template. Many people have used blogger to run blogs and have wondered how they can make their own theme to use with it. There are a very few hard to find guides on how to do this, so I’ve decided to take up the task to help as many people as I can, create one.

To create a blogger template, you will need a graphic editor (Such as Photoshop, GIMP, or even Paint will do) to create images for backgrounds, post headers, sidebars, etc.. We will get to that later. You will also need an idea or vision about what you want to create. Without that, you are just wasting your time and electricity. Lastly, you will need to know about C.S.S (Cascading.Style.Sheets) and how to operate them. If you do not know how to do that, you cannot apply interesting effects to your newly designed template (Such as: Positioning pictures or text, creating repeated backgrounds, moving around pictures and text and more). A great guide on how to get started with this is available here.

Once you have got everything you need, you should start the C.S.S Framework by putting properties such as

body[ background-color: #000000; margin: 0 auto; font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size: 14px;}

#title [ font-size: 32px; color: #000011; }

so-on and so forth. A basic list of these tags that were taken from Blogger’s simple white theme are available here: (PDF File) XML Tags Blogger List Of CSS. An easier way to do this would be to find a theme that you like and copy and paste the C.S.S, editing it along the way so that time is saved. The only problem with doing that is that every theme is engineered differently so the tags will change.

After configuring your CSS Stylesheet, you must piece it together in HTML. This can be achieved using similar structures.

<div id=’main-wrapper’>
<b:section class=’main’ id=’main’ showaddelement=’no’>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>
</div>

Do not forget to reference blogger templates that have already been created for the required widgets that you are supposed to put in certain spots. Without doing this, you could not complete making your own template.

Now comes the grueling part that you can either do yourself which could take hours to finish, or copy from another site and edit accordingly. Blogger is configured using widgets. All your posts are just one big widget hence the code up there. An Example of the code that you could type yourself or copy is:

<div class=’post-footer’>
<p class=’post-footer-line post-footer-line-1′><span class=’post-author’>
<b:if cond=’data:top.showAuthor’>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span> <span class=’post-timestamp’>
<b:if cond=’data:top.showTimestamp’>
<data:top.timestampLabel/>
<b:if cond=’data:post.url’>
<a class=’timestamp-link’ expr:href=’data:post.url’ title=’permanent link’><data:post.timestamp/></a>
</b:if>
</b:if>
</span> <span class=’post-comment-link’>
<b:if cond=’data:blog.pageType != “item”‘>

<b:if cond=’data:post.allowComments’>
<a class=’comment-link’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><b:if cond=’data:post.numComments == 1′>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span> <span class=’post-icons’>
<!– email post links –>
<b:if cond=’data:post.emailPostUrl’>
<span class=’item-action’>
<a expr:href=’data:post.emailPostUrl’ expr:title=’data:top.emailPostMsg’>
<span class=’email-post-icon’> </span>
</a>
</span>
</b:if>

<!– quickedit pencil –>
<b:include data=’post’ name=’postQuickEdit’/>
</span> </p>

<p class=’post-footer-line post-footer-line-2′><span class=’post-labels’>
<b:if cond=’data:post.labels’>
<data:postLabelsLabel/>
<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != “true”‘>,</b:if>
</b:loop>
</b:if>
</span> </p>

That code translated into human terms controls what goes at the bottom of every post…In this case its the author, time, comment link and labels. To extract the code from other templates, just click the “Expand Widget Templates” button and it is below the stylesheet on a certain template.

Most of creating a template is just trial and error. If you look at the code and try to piece it together bit by bit.. you will eventually succeed and reap the rewards of creating one. I hope this tutorial has covered everything that you will need and comments/suggestions would be greatly appreciated as it would be great if this tutorial would become a one-stop source for all of the Blogger CMS(Content Management System) users.

*Update*

Every different piece of code inside the template does not need to be used and can be modified to fit what you are creating. For example, you don’t need to include a “Labels” section in each post if it will make the design that you create look terrible. Then again, It is all in the eye of the beholder as everyone has different tastes.