Marge's Quilt Shop Template
This template is based on one of the newest templates offered on our sister site - Expression Web Mobile Friendly Site Templates. This template uses some CSS3 for the rounded corners. The rounded corners will display as intended in newer modern browsers including Firefox 4, Opera 11, Safari 5, Chrome 2, and IE9. They will degrade gracefully in older browsers and default to rectangular corners. This template uses a fixed width layout and is mobile friendly.
Images:
The image used at the top of the page for this template is one of the borders from The Inspiration Gallery and is repeated horizontally across the page. You will need to retain the credits link if you choose to use any of their images. You can substitute your own image at the top of the page but it should be a seamless image that will tile across the page.
The quilt image in the right sidebar is a sample image from Fotolia.com. If you choose to use it, you will need to purchase it. Clicking on the image will take you to the image on Fotolia.
Style classes are also included to float your images right or left or center them on the page.
The transparent graphic image used for the site name was created using The Logo Creator. If you go to their Facebook page, become a fan, you can get a free copy of the software. I have included the tlc file so you can edit if you want. The font used is akaDora, the color is #B9AD98, and the background color is #314263.
Photo Gallery
The Photo Gallery used with this template is WebAlbum Generator which is free. You can read a more detailed tutorial Web Album Generator and Expression Web
All images used in the Photo Gallery demo are from fotolia.com and MUST BE PURCHASED if you choose to use any of them. It is assumed that you will use your own images for creating the Photo Gallery.
http://www.fotolia.com/search?serie=35456470
The photo gallery album does appear to be mobile friendly as you can see by the screenshot shown below.
CSS and Script Links
Besides the main style sheet (site.css), there is a special style sheet (media-queries) which allows the inclusion of special CSS rules to optimize your page for mobile browsers.
Screenshot of template viewed in Ipad in portrait orientation.
Additional Resources
You can find detailed instructions for working with the mobile friendly site templates as well as a pdf file you can download and print.
Also resources on both drop shadows and rounded corners.
Gotcha's
You will need to preview your page within a browser as Design View will NOT display the page as it should look.
Depending on the length of your content, you may find it difficult to edit your pages in Design View.
Alternate Color Schemes
Border images are from The Inspiration Gallery, Click on Borders from the Side Menu > Country Charm > Page 6. The one I have used in this template has been resized so it is slightly smaller than the ones shown below and the scallops on the bottom are not as pronounced.
Beryl's Quilt Shop Template uses this image. This is a three column fixed width layoutTitle #B9AD98
Text #CECECE
Background #425242
Border Name bord_country_sewing_02.gif
Title #C6BD94
Text #CECECE
Background #213665
Border Name bord_country_sewing_03.gif
Text #FFFFFF
Background #8C9473
Border Name bord_country_sewing_04.gif
Marge's Quilt Shop Template uses this image.
Title #718399
Text #CECECE
Background #314263
Border Name bord_country_sewing_01.gif
