Fancy "Prints" Page Describing Print Options
leftquark
Registered Users, Retired Mod Posts: 3,784 Many Grins
I've always had a page on my site for "Prints", which described the different sizes and paper options that could be purchased from my site. It's always been a boring page full of text. I first saw Brandolino throw together a more advanced prints page and decided to emulate what he put together.
After a week of tweaking and playing I'm finally done and I thought I would share the code with anyone that is interested.
See a screenshot below or visit the "Prints" page on aaronmphotography.com for a live demo.
The instructions for setting this up are fairly simple. It's the customization of it that may get a bit more complicated. I will try to make the instructions as simple and clear as possible but I will warn you that you will need to go in and change several lines of code.
0) Download the images required for this page to work by clicking here. Unzip the file and upload the images to an "unlisted" gallery on your SmugMug.
(If you need instructions on how to do this, please post below).
1) Create a new "Page" in your smugmug site. As follows:
a. Login and click on "Organize" and then "Organize Site"
b. Navigate to where you want to create the page.
c. Click on "+ Create"
d. Select "Page"
e. Give it a title "Prints" and a description (whatever you want).
f. Click "Create"
g. In the organizer, click "Done". You'll be taken to folder view of your site.
2. Customize the "Prints" page as follows:
a. In your folder, click on the newly created page called "Prints"
b. Select "Customize" and "Customize Site". You will be taken to a Customizer for "Just this page"
c. (Optional) Tweak your breadcrumb if you want to by clicking on the wrench icon on the breadcrumb box
3. Add an HTML block as follows:
a. In the customizer panel go to the "Content" tab and scroll down to "HTML & CSS" (it's the last one).
b. Drag an "HTML" block onto the page. I've found it can be a little bit finicky to get this to "stick". A green box will show up when you've dragged the block to a proper location. You want to place it UNDER your breadcrumb. I had to drag my HTML block almost onto the middle of the breadcrumb before the green box showed up underneath the breadcrumb.
(dgrin forums wouldn't let me paste the whole code in so I had to break it up into chunks. Please see the following posts for the code and continued instructions)
After a week of tweaking and playing I'm finally done and I thought I would share the code with anyone that is interested.
See a screenshot below or visit the "Prints" page on aaronmphotography.com for a live demo.
The instructions for setting this up are fairly simple. It's the customization of it that may get a bit more complicated. I will try to make the instructions as simple and clear as possible but I will warn you that you will need to go in and change several lines of code.
0) Download the images required for this page to work by clicking here. Unzip the file and upload the images to an "unlisted" gallery on your SmugMug.
(If you need instructions on how to do this, please post below).
1) Create a new "Page" in your smugmug site. As follows:
a. Login and click on "Organize" and then "Organize Site"
b. Navigate to where you want to create the page.
c. Click on "+ Create"
d. Select "Page"
e. Give it a title "Prints" and a description (whatever you want).
f. Click "Create"
g. In the organizer, click "Done". You'll be taken to folder view of your site.
2. Customize the "Prints" page as follows:
a. In your folder, click on the newly created page called "Prints"
b. Select "Customize" and "Customize Site". You will be taken to a Customizer for "Just this page"
c. (Optional) Tweak your breadcrumb if you want to by clicking on the wrench icon on the breadcrumb box
3. Add an HTML block as follows:
a. In the customizer panel go to the "Content" tab and scroll down to "HTML & CSS" (it's the last one).
b. Drag an "HTML" block onto the page. I've found it can be a little bit finicky to get this to "stick". A green box will show up when you've dragged the block to a proper location. You want to place it UNDER your breadcrumb. I had to drag my HTML block almost onto the middle of the breadcrumb before the green box showed up underneath the breadcrumb.
(dgrin forums wouldn't let me paste the whole code in so I had to break it up into chunks. Please see the following posts for the code and continued instructions)
dGrin Afficionado
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
0
Comments
4a. Paste the following code into the "HTML" tab.
(dgrin forums wouldn't let me paste the whole HTML code so I had to break it into 2 chunks. Paste this first half in, then get the second half, and paste it in below the first half).
Note: you will need to customize this code later on.
<div class="printPageForLargeScreens"> <form action=""> <div class="ss-tabs"> <input id="ss-tab-radio-1" type="radio" name="ss-selected-tab" checked="checked" /> <label for="ss-tab-radio-1">Bay Photo</label> <input id="ss-tab-radio-2" type="radio" name="ss-selected-tab" /> <label for="ss-tab-radio-2">Paper Types</label> <input id="ss-tab-radio-5" type="radio" name="ss-selected-tab" /> <label for="ss-tab-radio-5">Downloads</label> <input id="ss-tab-radio-6" type="radio" name="ss-selected-tab" /> <label for="ss-tab-radio-6">Our Guarantee</label> <input id="ss-tab-radio-7" type="radio" name="ss-selected-tab" /> <label for="ss-tab-radio-7">Ordering Help</label> <div class="sm-panel-content sm-panel-shadow sm-panel-padded"> <div style="width:820px; padding-bottom: 8px; padding-top: 4px;"> <h2 class="openSans">Interested in purchasing a print of one of my photos?</h2> <br /> I offer a number of different paper types, sizes, and framing options. Prints can be purchased by clicking on the "Add to Cart" button above any of the photos. Prices vary by size and printing surface. </div> <div style="max-width:900px;"> <div style="float:right; border: 1px solid #5e5e5e; width:300px; padding-left:7px; padding-right:5px; margin-top:10px; margin-right:75px; padding-bottom:15px; padding-top: 6px; border-radius: 8px;"> <h3 class="openSans" style="border-bottom:1px dashed #5E5E5E; margin-bottom: 2px;">Prints - Paper Types</h3> <p class="pR">Standard prints are available in a large variety of sizes and crops, including panoramic sizes.</p> <br /> <br /> <p><span id="MerchNames">Glossy</span></p> <p class="pR">Glossy is a shiny finish printed on Kodak Royal Paper (up to 12x30) or Kodak Endura Paper.</p> <br /> <br /> <p><span id="MerchNames"><a href="/help/lustre">Lustre</a></span></p> <p class="pR">Lustre offers the vibrant colors of glossy with a fingerprint-resistant matte finish. Printed on Kodak Endura Paper. <a href="/help/lustre">More info</a></p> <br /> <br /> <p><span id="MerchNames"><a href="/prints/metallic-paper">Metallic</a></span></p> <p class="pR">Rich, distinctive prints with a huge WOW! factor. Printed on Kodak Endura Professional Metallic Paper. <a href="/prints/metallic-paper">More info</a></p> <br /> <br /> <p><span id="MerchNames"><a href="/prints/giclee-canvas-watercolor">Giclée</a></span></p> <p class="pR">Prints made by a large format inkjet printer using special premium, archival inks. <a href="/prints/giclee-canvas-watercolor">More info</a></p> </div> <div style="width:530px; padding:10px;"> <div style="float:right; width:248px; margin-left:15px;"> <a href="/prints/giclee-canvas-watercolor" target="_blank"><img src="http://www.aaronmphotography.com/photos/i-9gZ6gjr/0/X3/i-9gZ6gjr-X3.jpg" alt="Giclée Watercolor" height="160" width="200" border="0" class="imgBorder" style="margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px;" /></a> <p><span id="MerchNames" style="width:200px;"><a href="/prints/giclee-canvas-watercolor" target="_blank">Giclée Watercolor Prints</a></span></p> <p class="pR" style="width:200px;">Heavy, 100% cotton-fiber paper with a subtle texture. <a href="/prints/giclee-canvas-watercolor">More info</a></p> </div> <div style="padding-right:30px;"> <a href="/prints/metalprints" target="_blank"><img src="http://www.aaronmphotography.com/photos/i-pNdkg5w/0/Th/i-pNdkg5w-Th.jpg" alt="Float Mounted Metal Print" height="160" width="200" border="0" class="imgBorder" style="margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px;" /></a> <p><span id="MerchNames" style="width:200px;"><a href="/prints/metalprints" target="_blank">Float Mounted MetalPrint</a></span></p> <p class="pR" style="width:200px;">Durable, dye-infused aluminum sheets with incredible detail and luminescence. <a href="/prints/metalprints">More info</a></p> </div> </div> <div style="width:530px; padding:10px;"> <div style="float:right; width:248px; margin-left:15px;"> <a href="/prints/photo-extras" target="_blank"><img src="http://www.aaronmphotography.com/photos/i-nGp65mG/0/X3/i-nGp65mG-X3.jpg" alt="Photo Extras" height="160" width="200" border="0" class="imgBorder" style="margin-left: 0px; margin-right: 0px; margin-top: 3px; margin-bottom: 3px;" /></a> <p><span id="MerchNames" style="width:200px;"><a href="/prints/photo-extras" target="_blank">Photo Extras</a></span></p> <p class="pR" style="width:200px;">Now offering à la carte framing, mounting and print options to give your finished photo a perfect presentation. <a href="/prints/photo-extras">More info</a></p> </div> <div style="padding-right:30px;"> <a href="/prints/giclee-canvas-watercolor" target="_blank"><img src="http://www.aaronmphotography.com/photos/i-PT2k7rK/0/Th/i-PT2k7rK-Th.jpg" alt="Giclée Canvas" height="160" width="200" border="0" class="imgBorder" style="margin-left: 0px; margin-right: 0px; margin-top: 3px; margin-bottom: 3px;" /></a> <p><span id="MerchNames" style="width:200px;"><a href="/prints/giclee-canvas-watercolor" target="_blank">Giclée Canvas Prints</a></span></p> <p class="pR" style="width:200px;">Ready-to-hang canvas prints wrapped around a wooden frame or rigid board. <a href="/prints/giclee-canvas-watercolor">More info</a></p> </div> </div> </div> <table width="890" cellpadding="0" cellspacing="0" style="margin-left:15px;"> <tr> <td valign="top" id="printTab" style="width: 810px;"><table width="810" cellpadding="0" cellspacing="0" class="printList" style="margin-bottom: 10px;"> <thead> <tr> <th colspan="5"><a name="standard" id="standard"> <h3 style="margin-top:5px; margin-bottom: 3px; position: relative; top:12px;" class="openSans">Standard Sizes</h3> </a></th> </tr> <tr class="printProduct" valign="top"> <th rowspan="2" class="printSize" style="width: 65px;"><img src="http://cdn.smugmug.com/img/spacer.gif" width="65" height="20" border="0" alt="image" style="margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px;" /></th> <th valign="bottom" rowspan="2" style="width: 65px;">Lustre</th> <th valign="bottom" rowspan="2" style="width: 65px;">Metallic</th> <th valign="bottom" rowspan="1" class="firstInGroup" style="border-bottom: none; width: 80px;">Giclée</th> <th class="firstInGroup" style="border-bottom: none; width: 80px;">Giclée Canvas</th> <th valign="bottom" class="firstInGroup" rowspan="2" style="width: 80px;">ThinWrap</th> <th valign="bottom" class="firstInGroup" rowspan="2" style="width: 80px;">MetalPrints</th> </tr> <tr class="printProduct" valign="top"> <th style="border-left: 1px dashed #5E5E5E; width: 60px;">Watercolor</th> <th style="border-left: 1px dashed #5E5E5E; width: 60px;">Wrap</th> </tr> </thead> <tbody> <tr class="pRO"> <td align="right" class="printSize" style="width: 65px;">8 x 12</td> <td align="center" class="lPC"><span class="aP">✔</span></td> <td align="center" class="MPC"><span class="aP">✔</span></td> <td align="center" class="wcPC firstInGroup"><span class="aP">✔</span></td> <td align="center" class="wPC firstInGroup"><span class="aP">✔</span></td> <td align="center" class="special-thinwrapPrintCell firstInGroup"><span class="aP">✔</span></td> <td align="center" class="special-MPC firstInGroup"><span class="aP">✔</span></td> </tr> <tr class="pR"> <td align="right" class="printSize" style="width: 65px;">10 x 15</td> <td align="center" class="lPC"><span class="aP">✔</span></td> <td align="center" class="MPC"><span class="aP">✔</span></td> <td align="center" class="wcPC firstInGroup"><span class="aP">✔</span></td> <td align="center" class="wPC firstInGroup"><span class="aP">✔</span></td> <td class="special-thinwrapPrintCell firstInGroup"> </td> <td class="special-MPC firstInGroup"> </td> </tr> <tr class="pRO"> <td align="right" class="printSize" style="width: 65px;">12 x 18</td> <td align="center" class="lPC"><span class="aP">✔</span></td> <td align="center" class="MPC"><span class="aP">✔</span></td> <td align="center" class="wcPC firstInGroup"><span class="aP">✔</span></td> <td align="center" class="wPC firstInGroup"><span class="aP">✔</span></td> <td class="special-thinwrapPrintCell firstInGroup"> </td> <td align="center" class="special-MPC firstInGroup"><span class="aP">✔</span></td> </tr> <tr class="pR"> <td align="right" class="printSize" style="width: 65px;">16 x 24</td> <td align="center" class="lPC"><span class="aP">✔</span></td> <td align="center" class="MPC"><span class="aP">✔</span></td> <td align="center" class="wcPC firstInGroup"><span class="aP">✔</span></td> <td align="center" class="wPC firstInGroup"><span class="aP">✔</span></td> <td align="center" class="special-thinwrapPrintCell firstInGroup"><span class="aP">✔</span></td> <td align="center" class="special-MPC firstInGroup"><span class="aP">✔</span></td> </tr> <tr class="pRO"> <td align="right" class="printSize" style="width: 65px;">20 x 30</td> <td align="center" class="lPC"><span class="aP">✔</span></td> <td align="center" class="MPC"><span class="aP">✔</span></td> <td align="center" class="wcPC firstInGroup"><span class="aP">✔</span></td> <td align="center" class="wPC firstInGroup"> </td> <td align="center" class="special-thinwrapPrintCell firstInGroup"> </td> <td align="center" class="special-MPC firstInGroup"><span class="aP">✔</span></td> </tr> <tr class="pR"> <td align="right" class="printSize" style="width: 65px;">24 x 36</td> <td align="center" class="lPC"><span class="aP">✔</span></td> <td align="center" class="MPC"><span class="aP">✔</span></td> <td align="center" class="wcPC firstInGroup"><span class="aP">✔</span></td> <td align="center" class="wPC firstInGroup"><span class="aP">✔</span></td> <td class="special-thinwrapPrintCell firstInGroup"> </td> <td align="center" class="special-MPC firstInGroup"><span class="aP">✔</span></td> </tr> <tr class="pRO"> <td align="right" class="printSize" style="width: 65px;">30 x 45</td> <td align="center" class="lPC"> </td> <td align="center" class="MPC"> </td> <td align="center" class="wcPC firstInGroup"> </td> <td align="center" class="wPC firstInGroup"> </td> <td class="special-thinwrapPrintCell firstInGroup"> </td> <td align="center" class="special-MPC firstInGroup"><span class="aP">✔</span></td> </tr> <tr class="pR"> <td align="right" class="printSize" style="width: 65px;">40 x 60</td> <td align="center" class="lPC"> </td> <td align="center" class="MPC"> </td> <td align="center" class="wcPC firstInGroup"> </td> <td align="center" class="wPC firstInGroup"> </td> <td class="special-thinwrapPrintCell firstInGroup"> </td> <td align="center" class="special-MPC firstInGroup"><span class="aP">✔</span></td> </tr> </tbody> </table> <table width="810" cellpadding="0" cellspacing="0" class="printList" style="margin-bottom: 35px; margin-top:-10px;"> <thead> <tr> <th colspan="5"><a name="pano" id="pano"> <h3 style="margin-bottom: 3px; position: relative; top:12px;" class="openSans">Panoramic Sizes</h3> </a></th> </tr> <tr class="printProduct" valign="top"> <th rowspan="2" class="printSize" style="width: 65px;"><img src="http://cdn.smugmug.com/img/spacer.gif" width="65" height="20" border="0" alt="image" style="margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px;" /></th> <th valign="bottom" rowspan="2" style="width: 65px;">Lustre</th> <th valign="bottom" rowspan="2" style="width: 65px;">Metallic</th> <th valign="bottom" rowspan="1" class="firstInGroup" style="border-bottom: none; width: 80px;">Giclée</th> <th class="firstInGroup" style="border-bottom: none; width: 80px;">Giclée Canvas</th> <th valign="bottom" class="firstInGroup" rowspan="2" style="width: 80px;">MetalPrints</th> </tr> <tr class="printProduct" valign="top"> <th style="border-left: 1px dashed #5E5E5E; width: 60px;">Watercolor</th> <th style="border-left: 1px dashed #5E5E5E; width: 60px;">Wrap</th> </tr> </thead> <tbody> <tr class="pRO"> <td align="right" class="printSize" style="width: 65px;">10 x 20</td> <td align="center" class="lPC"><span class="aP">✔</span></td> <td align="center" class="MPC"><span class="aP">✔</span></td> <td align="center" class="wcPC firstInGroup"><span class="aP">✔</span></td> <td align="center" class="wPC firstInGroup"><span class="aP">✔</span></td> <td align="center" class="special-MPC firstInGroup"><span class="aP">✔</span></td> </tr> <tr class="pR"> <td align="right" class="printSize" style="width: 65px;">12 x 24</td> <td align="center" class="lPC"><span class="aP">✔</span></td> <td align="center" class="MPC"><span class="aP">✔</span></td> <td align="center" class="wcPC firstInGroup"><span class="aP">✔</span></td> <td align="center" class="wPC firstInGroup"><span class="aP">✔</span></td> <td align="center" class="special-MPC firstInGroup"><span class="aP">✔</span></td> </tr> <tr class="pRO"> <td align="right" class="printSize" style="width: 65px;">15 x 30</td> <td align="center" class="lPC"><span class="aP">✔</span></td> <td align="center" class="MPC"><span class="aP">✔</span></td> <td align="center" class="wcPC firstInGroup"><span class="aP">✔</span></td> <td align="center" class="wPC firstInGroup"> </td> <td class="special-MPC firstInGroup"> </td> </tr> <tr class="pR"> <td align="right" class="printSize" style="width: 65px;">20 x 40</td> <td align="center" class="lPC"><span class="aP">✔</span></td> <td align="center" class="MPC"><span class="aP">✔</span></td> <td align="center" class="wcPC firstInGroup"><span class="aP">✔</span></td> <td align="center" class="wcPC firstInGroup"><span class="aP">✔</span></td> <td align="center" class="special-MPC firstInGroup"><span class="aP">✔</span></td> </tr> <tr class="pRO"> <td align="right" class="printSize" style="width: 65px;">30 x 60</td> <td align="center" class="lPC"><span class="aP">✔</span></td> <td align="center" class="MPC"><span class="aP">✔</span></td> <td align="center" class="wcPC firstInGroup"><span class="aP">✔</span></td> <td align="center" class="wcPC firstInGroup"><span class="aP">✔</span></td> <td align="center" class="special-MPC firstInGroup"><span class="aP">✔</span></td> </tr> <tr class="pR"> <td align="right" class="printSize" style="width: 65px;">40 x 80</td> <td align="center" class="lPC"> </td> <td align="center" class="lPC"> </td> <td align="center" class="lPC"> </td> <td align="center" class="lPC"> </td> <td align="center" class="special-MPC firstInGroup"><span class="aP">✔</span></td> </tr> </tbody> </table></td> </tr> </table> </div>Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
(dgrin forums wouldn't let me fit the whole HTML code in the first post so here's the 2nd half).
4b. Paste the following code in the "HTML" tab, just below the first half of the code you pasted in.
<div class="sm-panel-content sm-panel-shadow sm-panel-padded"> <h2 class="notopmargin">Prints - Paper Types</h2> Are you interested in purchasing a print of my photographs? I offer a number of different paper types, sizes, and framing options. Prints can be purchased by clicking on the "Buy" or the shopping cart icon above any of the photos. Prices vary by size and printing surface. With the exception of the MetalPrints and Wrapped Canvas, all prints will need to be matted and framed after purchase.<br /> <br /> <h2 class="openSans">Lustre</h2> <p>Lustre is the paper type I recommended most when people ask which paper to print on. Lustre has the color saturation of glossy paper but with the fingerprint resistance of matte. Lustre also does not have the glare that is associated with glossy paper. Lustre is a professional-grade paper, printed on Kodak Professional Endura paper and is materially 'thicker,' or heavier, than consumer paper.</p> <br /> <h2 class="openSans">Metallic</h2> <p>With a glossy finish and unique metallic appearance, these prints have extra visual interest and depth. They are printed on long-lasting Kodak Professional Endura Metallic paper. When people ask what Metallic paper looks like I often compare it to micah found on rocks; others describe it as "chrome on paper." It produces striking, three-dimensional, lasting images with extreme sharpness, brightness, and color saturation. I recommend metallic paper for all of my black and white photos or any of my photos that contain water, rock.</p> <br /> <h2 class="openSans">MetalPrints</h2> <p>MetalPrints are photos printed directly on a sheet of specially coated aluminum! MetalPrints are highly durable, waterproof, and ultra scratch-resistant. MetalPrints have vibrant colors and incredible detail. Each MetalPrint comes backed with a 3/4" thick foam block that makes these stunning prints appear to float off the wall. The beauty of MetalPrints is that they do not need to be framed; they are ready to hang on your wall as soon as you receive the print! I recommend this for anyone who does not want to deal with the hassle of matting and framing a photo.</p> <br /> <h2 class="openSans">Giclée Watercolor</h2> <p>Giclée Prints (pronounced "zee"-"clay") are made with high-quality archival inks on fine art papers using a high-resolution large format inkjet printer. The premium inks produce images with smooth tones and rich colors, making these prints ideal for extraordinary presentations. Prints are printed on a heavy, 310g paper with a subtle texture. This acid-free paper is 100% cotton fiber and is finished with a water-based protective spray. Due to the stunning colors and matte finish, your print will take on the look of a masterpiece painting.</p> <br /> <h2 class="openSans">Wrapped Canvas</h2> <p>Printed on heavy duty PremierArt Water Resistant Canvas, then finished with a dry lamination process that is UV and water resistant. The canvas is stretched and then wrapped over a 1 3/8" thick wooden frame. Your photo extends to cover the sides of the frame for a beautiful presentation. Wrapped Canvas prints are ready to hang on your wall.</p> </div> <div class="sm-panel-content sm-panel-shadow sm-panel-padded"> <img src="http://www.aaronmphotography.com/photos/i-L38BqLW/3/O/i-L38BqLW.png" alt="buy digital download" width="671" height="196" class="imgBorder right" /> <h2 class="openSans">Digital Downloads</h2> <p><span><br /> Commercially Licensed photos are available in the "Downloads" section of my shopping cart. <br /> Select any photo, choose "Add to Cart", then click on the "Downloads" tab. <br /> <br /> A digital download is simply a copy of the image file, sized in one of three ways. You can buy digital downloads at the sizes I have made available, which include: </span></p> <ul> <li><strong>Web Size 0.3 megapixel</strong>, 640x480</li> <li><strong>Low Resolution 1.0 megapixel</strong></li> <li><strong>High Resolution 4.0 megapixel</strong></li> </ul> <br /> <p><span>High Resolution 4.0 megapixel images should allow for quality printing at most reasonable sizes. <br /> Higher Resolution images are available by request only. Please click the "Contact" link on the left and send me an email.<br /> <br /> <span style="color: #f36f21;">Please Note:</span> Not all sizes are available for all images. Downloads are subject to a license agreement. If you would like to purchase a Digital Download of an image not currently offered as such, please <a href="mailto:aaron@aaronmphotography.com">contact me</a>. </span></p> </div> <div class="sm-panel-content sm-panel-shadow sm-panel-padded"> <table width="100%" cellpadding="0" cellspacing="10"> <tr> <td valign="top" style="width: 80%"><h2 class="openSans">Print Guarantee</h2> <span><br /> All of my prints come with a happiness guarantee: <strong>if you are not satisfied with your print I will re-print or offer a refund.</strong><br /> Simply <a href="mailto:aaron@aaronmphotography.com">send an email to me</a> within 30 days of receiving your order.</span><br /> <br /> <h3 class="openSans">Print Lab:</h3> <span>All of my photos are printed by <a href="http://www.bayphoto.com/">Bay Photo</a>, one of the premiere print labs in the United States.*</span><br /> <br /> <span><a href="http://www.bayphoto.com/"> <em>Bay Photo</em></a></span>, is renowned for their color accuracy, print quality and consistency. All of my prints are <i>color corrected</i> to match their printers for precise image color, clarity and sharpness and is included in the cost of the print.<br /> <br /> Bay Photo, a professional lab located in Santa Cruz, California, has been catering to top pros since 1976. A true pro lab, Bay Photo: <ul> <li>Their experts will fuss over each order, ensuring superb color and consistency from print to print. </li> <li>Most prints are carefully flat-packed — damage during shipment is almost unheard of. Any lustre, gloss or metallic prints with a side over 60 inches will ship in a tube. Metalprints over 30x45 are shipped in crates. </li> <li>Bay Photo carries more sizes and papers, including panoramic sizes and Giclée watercolor prints. </li> <li>Photo Extras: Get your prints beautifully finished with mats, frames, mountings and more, saving you a trip to the framers. </li> </ul></td> <td valign="top" style="width: 20%;"><div style="text-align: center;"> <img src="http://www.aaronmphotography.com/Places/Central-California/i-QGRXGJJ/3/M/DSC_4200-2-M.jpg" alt="Guarantee Pic (Abby)" width="300" height="450" border="0" class="imgBorder right" /> </div></td> </tr> </table> </div> <div class="sm-panel-content sm-panel-shadow sm-panel-padded"> <img src="http://www.aaronmphotography.com/Places/Midwest/i-x9fkfdF/0/M/DSC_5611-M.jpg" alt="Get help ordering" height="401" width="600" border="0" class="imgBorder right" style="margin-left: 5px; margin-right: 0px; margin-top: 0px; margin-bottom: 8px;" /> <h2 class="openSans">Need Help with an Order?</h2> Read the following details if you're having trouble placing an order or have questions about an existing order:<br /> <br /> <h3 class="openSans">Placing an order?</h3> If you are having problems placing an order please try the following help pages: <ul style="font-size: 14px;"> <li><a href="/visitor-help/digital-prints" target="_blank">Help with the shopping cart</a></li> <li><a href="/visitor-help/cropping" target="_blank">Help with cropping</a></li> <li><a href="/help/too-red" target="_blank">Help with color</a></li> </ul> <br /> <br /> <h3 class="openSans">Already placed your order?</h3> <p>To view an order you've already placed click the link in your order confirmation email and you'll be taken directly to your order.<br /> </p> <p>Made a mistake? Was your order lost in the mail? <a href="mailto:aaron@aaronmphotography.com">Email me</a> and I will get to the bottom of it!</p> <br /> <br /> <h3 class="openSans">Looking for someone?</h3> If you still need help, feel free to contact me or my print partner: <ul style="font-size: 14px;"> <li><a href="mailto:aaron@aaronmphotography.com">Contact Aaron M Photography</a></li> <li><a href="mailto:help@smugmug.com">Contact My Print Partner, SmugMug</a></li> </ul> <br /> <br /> <h3 class="openSans">You Shop. We Ship.</h3> <p>My print partner, <i>SmugMug</i>, has teamed up with an amazing print lab, Bay Photo, to fulfill your orders. We have selected the printer for each gallery or gift item based on the products being printed and the printer's price point. <br /> <br /> Bay Photo will use one of several shipping methods to ensure you get your goods when you want them. They vary from <i>"I can wait a few days"</i> to <i>"I need it by Monday!"</i>. <br /> Your available shipping options depend on what you're buying, how much you're buying and where you're shipping to. The good news is that we do all the figuring for you.</p> <br /> <br /> <h3 class="openSans">Get a shipping quote.</h3> <p>Add your items to the shopping cart. After you enter your address we'll give you shipping options and pricing for each, right down to the cent. <br /> You won't be charged until you click the "Place My Order" button at the end of the Shopping Cart.</p> <br /> <br /> <h3 class="openSans">Something went wrong!</h3> <p>No problem! <a href="mailto:aaron@aaronmphotography.com">Contact Aaron M Photography</a> and I will make it right!. </p> </div> </div> </form> </div> <div class="printForMobileDevices"> <h2 class="notopmargin">Prints</h2> Are you interested in purchasing a print of my photographs? I offer a number of different paper types, sizes, and framing options. Prints can be purchased by clicking on the "Buy" or the shopping cart icon above any of the photos. Prices vary by size and printing surface. With the exception of the MetalPrints and Wrapped Canvas, all prints will need to be matted and framed after purchase.<br /> <br /> Prints are available in the following sizes: 8x12, 10x15, 16x24, 20x30, and 24x36<br /> Panoramic images are available in the following sizes: 10x20, 10x30, 12x24, and 12x36<br /> <br /> Additional sizes can be requested by contacting me (click the "contact" link on the left).<br /> <br /> Printing is handled by Bay Photo, one of the premiere print labs in the United States. All of my prints come with a happiness guarantee: if you are not satisfied with your print I will re-print or offer a refund.<br /> <br /> <h2 class="notopmargin">Lustre</h2> <p>Lustre is the paper type I recommended most when people ask which paper to print on. Lustre has the color saturation of glossy paper but with the fingerprint resistance of matte. Lustre also does not have the glare that is associated with glossy paper. Lustre is a professional-grade paper, printed on Kodak Professional Endura paper and is materially 'thicker,' or heavier, than consumer paper.</p> <br /> <h2 class="notopmargin">Metallic</h2> <p>With a glossy finish and unique metallic appearance, these prints have extra visual interest and depth. They are printed on long-lasting Kodak Professional Endura Metallic paper. When people ask what Metallic paper looks like I often compare it to micah found on rocks; others describe it as "chrome on paper." It produces striking, three-dimensional, lasting images with extreme sharpness, brightness, and color saturation. I recommend metallic paper for all of my black and white photos or any of my photos that contain water, rock.</p> <br /> <h2 class="notopmargin">MetalPrints</h2> <p>MetalPrints are photos printed directly on a sheet of specially coated aluminum! MetalPrints are highly durable, waterproof, and ultra scratch-resistant. MetalPrints have vibrant colors and incredible detail. Each MetalPrint comes backed with a 3/4" thick foam block that makes these stunning prints appear to float off the wall. The beauty of MetalPrints is that they do not need to be framed; they are ready to hang on your wall as soon as you receive the print! I recommend this for anyone who does not want to deal with the hassle of matting and framing a photo.</p> <br /> <h2 class="notopmargin">Giclée Watercolor</h2> <p>Giclée Prints (pronounced "zee"-"clay") are made with high-quality archival inks on fine art papers using a high-resolution large format inkjet printer. The premium inks produce images with smooth tones and rich colors, making these prints ideal for extraordinary presentations. Prints are printed on a heavy, 310g paper with a subtle texture. This acid-free paper is 100% cotton fiber and is finished with a water-based protective spray. Due to the stunning colors and matte finish, your print will take on the look of a masterpiece painting.</p> <br /> <h2 class="notopmargin">Wrapped Canvas</h2> <p>Printed on heavy duty PremierArt Water Resistant Canvas, then finished with a dry lamination process that is UV and water resistant. The canvas is stretched and then wrapped over a 1 3/8" thick wooden frame. Your photo extends to cover the sides of the frame for a beautiful presentation. Wrapped Canvas prints are ready to hang on your wall.</p> </div>Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
_5. Paste the following code into the "CSS" tab._
/* ===================================== Define additional fonts to be used = ===================================== Use Open Sans Condensed */ @font-face { font-family: 'Open Sans Condensed'; font-style: normal; font-weight: 300; src: url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xOnoCx_jK1JUF_-5xuexfsU.eot?#iefix) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xGAzD5WKQVN4wSyA0MYYi4rr7w4p9aSvGirXi6XmeXNA.woff) format('woff'), url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xD1GzwQ5qF9DNzkQQVRhJ4g.ttf) format('truetype'); } /* Hide this on mobile screens and show a simple page instead */ @media only screen and (max-width: 1180px) { .printPageForLargeScreens { display: none; } } /* For screens large enough, hide the special mobile version of the print page. */ @media only screen and (min-width: 1181px) { .printForMobileDevices { display: none; } } .ss-tabs a:hover, #MerchNames a:hover { color: #f36f21 !important; -webkit-transition: color 0.25s ease-in; -moz-transition: color 0.25s ease-in; transition: color 0.2s ease-in; } .ss-tabs li { list-style-type: square; margin-left: 30px; display: list-item !important; } .ss-tabs li strong { color: #E1DFDF; } h2.openSans, h3.openSans, MerchNames a { font-family: 'Open Sans Condensed'; } .ss-tabs>input[type='radio'] { position: absolute; left: -9999px; top: 0 } .ss-tabs>input[type='radio']+label { display: inline-block; position: relative; z-index: 0; cursor: pointer; vertical-align: bottom; -webkit-box-shadow: none; box-shadow: none; height: 45px; width: 120px; top: 3px; margin-right: 1px; background-repeat: no-repeat; text-indent: -9999px } .ss-tabs>input[type='radio']:checked+label { width: 148px; top: 3px; margin: 0 -14px; z-index: 2 } /* YOU NEED TO UPDATE THIS SECTION. CHANGE THE URL'S TO POINT TO OUR WEBSITE */ /* The "Prints, Bay Photo" tab, unselected */ .ss-tabs>label:nth-of-type(1) { background: url(http://www.aaronmphotography.com/photos/i-FmqnrBc/0/O/i-FmqnrBc.png); margin-left: 20px } /* The "Prints, Bay Photo" tab, selected */ .ss-tabs>input[type='radio']:checked:nth-of-type(1)+label { background: url(http://www.aaronmphotography.com/photos/i-S4v4Hdp/0/O/i-S4v4Hdp.png); margin-left: 6px } /* The "Paper Types" tab, unselected */ .ss-tabs>label:nth-of-type(2) { background: url(http://www.aaronmphotography.com/photos/i-tx5TH2v/0/O/i-tx5TH2v.png); } /* The "Paper Types" tab, selected */ .ss-tabs>input[type='radio']:checked:nth-of-type(2)+label { background: url(http://www.aaronmphotography.com/photos/i-6TWMGFG/0/O/i-6TWMGFG.png); } /* The "Downloads" tab, unselected */ .ss-tabs>label:nth-of-type(3) { background: url(http://www.aaronmphotography.com/photos/i-NVfq5fj/0/O/i-NVfq5fj.png); } /* The "Downloads" tab, selected */ .ss-tabs>input[type='radio']:checked:nth-of-type(3)+label { background: url(http://www.aaronmphotography.com/photos/i-tDNWXTT/0/O/i-tDNWXTT.png); } /* The "Our Gaurantee" tab, unselected */ .ss-tabs>label:nth-of-type(4) { background: url(http://www.aaronmphotography.com/photos/i-W4mKqzv/0/O/i-W4mKqzv.png); } /* The "Our Gaurantee" tab, selected */ .ss-tabs>input[type='radio']:checked:nth-of-type(4)+label { background: url(http://www.aaronmphotography.com/photos/i-8jHSGbq/0/O/i-8jHSGbq.png); } /* The "Ordering Help" tab, unselected */ .ss-tabs>label:nth-of-type(5) { background: url(http://www.aaronmphotography.com/photos/i-85g9WVG/0/O/i-85g9WVG.png); } /* The "Ordering Help" tab, selected */ .ss-tabs>input[type='radio']:checked:nth-of-type(5)+label { background: url(http://www.aaronmphotography.com/photos/i-mPFtJp5/0/O/i-mPFtJp5.png); } /* END OF AREA YOU NEED TO UPDATE */ .ss-tabs>div { display: none; position: relative; z-index: 1; border-radius: 5px; border: 2px solid #454545!important } .ss-tabs>input:nth-of-type(1):checked~div:nth-of-type(1), .ss-tabs>input:nth-of-type(2):checked~div:nth-of-type(2), .ss-tabs>input:nth-of-type(3):checked~div:nth-of-type(3), .ss-tabs>input:nth-of-type(4):checked~div:nth-of-type(4), .ss-tabs>input:nth-of-type(5):checked~div:nth-of-type(5), .ss-tabs>input:nth-of-type(6):checked~div:nth-of-type(6), .ss-tabs>input:nth-of-type(7):checked~div:nth-of-type(7), .ss-tabs>input:nth-of-type(8):checked~div:nth-of-type(8), .ss-tabs>input:nth-of-type(9):checked~div:nth-of-type(9), .ss-tabs>input:nth-of-type(10):checked~div:nth-of-type(10), .ss-tabs>input:nth-of-type(11):checked~div:nth-of-type(11), .ss-tabs>input:nth-of-type(12):checked~div:nth-of-type(12), .ss-tabs>input:nth-of-type(13):checked~div:nth-of-type(13), .ss-tabs>input:nth-of-type(14):checked~div:nth-of-type(14), .ss-tabs>input:nth-of-type(15):checked~div:nth-of-type(15), .ss-tabs>input:nth-of-type(16):checked~div:nth-of-type(16), .ss-tabs>input:nth-of-type(17):checked~div:nth-of-type(17), .ss-tabs>input:nth-of-type(18):checked~div:nth-of-type(18), .ss-tabs>input:nth-of-type(19):checked~div:nth-of-type(19), .ss-tabs>input:nth-of-type(20):checked~div:nth-of-type(20) { display: block } .ss-tabs>div { overflow: hidden } .miniBox { width: 325px!important } .h3.title, h3.title a.nolink { font-size: 17px; font-weight: 400; color: #fff } h3 .nav, .boxNote, .boxNote a { font-size: 13px } .box { margin: 5px 10px 20px } p span.title { font-weight: 400 } #price { color: #fff; padding-bottom: 15px } #divLine { border-bottom: 1px solid #5e5e5e } tr#MerchNames td, tr#moreNames td { padding-top: 8px; color: #fff } tr#merchDesc td { padding-top: 0; padding-right: 54px; width: 152px } tr#moreDesc td { padding-top: 0; padding-right: 54px; width: 350px } .printProduct th { color: #fff; border-bottom: 1px solid #5e5e5e; font-size: 13px; padding: 0 -1px 8px 8px; text-align: center } .pR td, .pRO td { color: #c5c5c5; padding: 3px 8px } p.pR { color: #c5c5c5 } .pR #printSize, .pRO #printSize { color: #ccc; font-weight: 700 } .printSize { color: #ccc; font-weight: 700; border-right: 1px solid #5e5e5e } #printSize a { color: #ccc } .firstInGroup { border-left: 1px dashed #5e5e5e } #Mounted { padding-right: 5px } .aP { font-family: "Arial Unicode MS" } .pRO { background-color: #363636 } .gPC { border-left: 1px solid #5e5e5e } .wPC { border-left: 1px dashed #5e5e5e } .wcPC { border-left: 1px dashed #5e5e5e } table.MerchTable, table.moreTable { border-bottom: 1px solid #090909; border-top: 1px solid #393939; padding-bottom: 15px } table#topTable { border-top: 1px solid #222 } table#bottomTable { border-bottom: 1px solid #222 } a:link, a:visited, a:active { color: #f36f21 !important; -webkit-transition: color 0.25s ease-in; -moz-transition: color 0.25s ease-in; transition: color 0.2s ease-in; } a:hover { color: #fff !important; -webkit-transition: color 0.25s ease-in; -moz-transition: color 0.25s ease-in; transition: color 0.2s ease-in; } #merchDesc, #moreDesc, .MerchTable { color: #c5c5c5 } #MerchNames, #moreNames { font-size: 13pt; color: #fff!important } #MerchNames a, #moreNames a { text-decoration: none; color: #fff!important } a.selectedColor { color: #fff; text-decoration: none } img.right { clear: right; float: right; margin: 10px 0 10px 10px; border-radius: 8px } .imgBorder { border: solid 1px #999 } a img { border-radius: 8px }Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
I cannot guarantee that I will continue to host the images used for this code, nor can I guarantee that I won't change them. I strongly recommend you change the links so they point to your own site.
Customize the CSS:
In the CSS code above I have highlighted the fields in red that you will need to change. Some of them are just font colors and hover colors but some of them are the URL's to the images. You already downloaded the images in step 0 and uploaded them to your SmugMug page. Now you just need to get the URLs:
1. Go to your SmugMug gallery where you put the images.
2. Click on "Share" and then "Get a Link"
3. I recommend copying the "X3" size.
You'll need to copy the URL's for each image and paste them into the proper section of the CSS code.
I put in comments in the CSS code to help you understand what URL's to paste.
The colorful images are the ones called 'UNSELECTED'.
The dark background images are the ones called 'SELECTED'.
You'll need to paste in the URL's for each of these images so they point to your site.
Customize the HTML:
I've written the text on here to be customized for my own site. You wlll probably want to customize the text to suite your own needs and put your own voice on it. There are some things to note about the HTML.
When you look at the HTML you will see a big blob of text. When you apply the CSS to it, it gets broken down and sectioned off into tabs.
Every time the HTML reads: There will be a new "tab" area created. The CSS basically counts the # of times it see's that line of code. If you're on the first tab, it only shows the first div called that. If you're on the 2nd tab, it hides the first div called that and shows the 2nd, etc.
I find it much easier to edit the HTML by pasting it into an HTML editor like Dreamweaver and tweaking the code there. Much easier to edit.
It will look something like this (click on the image to see it bigger):
As much as I'd love for your site to keep referencing my site and giving me visitors, you will prob. want to change all references to my email and "Aaron M Photography".
From here on out, you should be all set. Tweak to your hearts desire.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
If you're having any problems or have questions feel free to post below. I'll warn you, if you haven't UNVEILED your site, there is very little I can do. It's much easier to help you if you've unveiled.
Happy hunting!
-Aaron
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
p { color:red; }SmugMug will automatically convert it to this for you so that it only applies to the content of the HTML block you added:
.sm-page-widget.sm-page-widget-2432019 p{ color:red; }So you can remove the leading ".sm-page-widget.sm-page-widget-2570185" you've got there in your CSS and this neat code will be much easier to install
Please check out my gallery of customisations for the New SmugMug, more to come!
This is why I was just talking to someone about how lamah was the SmugMug customizing guru! CSS code is updated and much nicer! You're quite right
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Facebook
Google+
Twitter
Photo Blog
Does this work with a top logo and navbar?
My Website index | My Blog
Here's my original page Allen... Linked too above also... http://www.brandolinoimaging.com/Info-Pages/Help-Pages/n-zvWvH
As you can see I have a few more/ different tabs...
Adding tabs requires creating the tab image, adjusting the CSS and the html for the page you add.
Feel free to copy my code if you wish....
I origianlly copied SM's code from their help pages and adjusted to fit my needs by adding the extra tabs... that was back on OLD SM.... but it took JS to get it to work...
With a lot of recoding help from Lamah I have it working again...
One suggestion is add a note to the right of the sizes that if you click an underlined size (crop page) to hit the
browser back button to return to your site. Or have it open in another browser window or tab.
My Website index | My Blog
What he said ...
Brando, hope you don't mind that I 'emulated' your idea (ok fine ... stole it!). It looked so great I just had to do it myself! Excellent idea (and hopefully I gave the proper credit to you at the top of my post!
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Oh yes, definitely. It didn't take too much work to find the HTML and CSS in the source code, then tweak it as I desired. You did an excellent job and made it pretty easy!
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
I credit Lamah... he took what I had in OLD SM and converted it to work w/o JS...
The html was "mine" the CSS to make it work was all him....
Me, I'm just a hack... a real cut and paste guy... leftquark and lamah are the coding gurus!
I could be the idea guy though... I always seem to come up with some new idea for a page, then run into troubles getting it to work... everything I know about code I learned on dgrin... or google...
Thank you for this.
http://www.BestLittleStudio.com
You are quite correct. Good point brando!
I fully customized the different tabs and the HTML included in this thread links directly to my site. The instructions recommend that whoever uses this code get rid of all the links to my site. I also won't guarantee that I'll continue to host the images and it's possible I may even change them. Everyone should make sure to download the images, upload to your own website, and change all the links to point from mine to yours.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Remember those links on the Bay Photo and Help tabs may change too... SM might convert them to NEW SM pages... I assume they will eventually...
I thought I had this working but... I followed all the info here and it works when I put all the HTML and CSS on the page I created and looks good but when I put the link in for the page and publish it I get a blank page.
So for now I have a temp help page...
Need help
Wally
www.wzphotos.smugmug.com
Link to your test page? Is it set to private?
I have it as unlisted
Wally
www.wzphotos.smugmug.com
Hard to help if we can't see it.
Ok
I put the HELP link back to the page I have for help
see if you can figure this out
Wally
www.wzphotos.smugmug.com
Got it working
Wally
www.wzphotos.smugmug.com
I see how they could conflict as you have no header space above the "help" box.
Maybe you could narrow the breadcrumb to fit in that left side without overlapping your "help" box.
Wally
www.wzphotos.smugmug.com