Fancy "Prints" Page Describing Print Options

thenickdude · March 31, 2014

Unfortunately, the SmugMug support for these oddball contact links is limited to one link per page. You'll need to place your "contact us" link after the tabs, instead of having one link inside each tab.

(alternatively, create a "contact us" page that has a Wufoo contact form on it, and link people to that instead)

LiveAwake · March 31, 2014

Lamah wrote: »

Unfortunately, the SmugMug support for these oddball contact links is limited to one link per page. You'll need to place your "contact us" link after the tabs, instead of having one link inside each tab.

(alternatively, create a "contact us" page that has a Wufoo contact form on it, and link people to that instead)

What a very strange thing for them to do.

I used a Wufoo form previously. I was hoping to leave it behind with the new SM . . . I liked the functionality, but it took a lot to get it to look remotely good in my site, and it didn't play well with iOS devices. Someone also told me that something about the java/iframe design would likely make my site vulnerable to attack . . . why was over my head, but I trust him to know.

leftquark · March 31, 2014

Thanks Lamah for answering all the questions on this! I was out of town and didn't get back to see this until you had taken care of it all.

I'm going to add a link to your Tab page on my website too. Thanks for putting this together

LiveAwake · April 8, 2014

I've got another question about this. In the code that Leftquark posted at the beginning, there is an alternate version that appears for smaller screens, as the normal version doesn't size well. I'm considering adding that in to my code as well, but I'd like to explore other options first.

For example, on my "About" page, when the screen gets too small, all of the images and text start smushing together in very unappealing ways. I tried tinkering a bit with the white-space attribute, but I really don't know what I'm doing well enough to get that to help me. Is it possible, either with HTML or CSS, to adjust how these things will stack so that they will simply stack vertically and align properly if the screen won't accommodate them together?

On that page there are essentially 3 columns of information (two with photos and associated text, and the third with just text). If I could somehow fix the columns and then make them stack instead of smooshing, perhaps I could still have a mobile-friendly page without having to re-write the content?

LiveAwake · April 15, 2014

LiveAwake wrote: »

I've got another question about this. In the code that Leftquark posted at the beginning, there is an alternate version that appears for smaller screens, as the normal version doesn't size well. I'm considering adding that in to my code as well, but I'd like to explore other options first.

For example, on my "About" page, when the screen gets too small, all of the images and text start smushing together in very unappealing ways. I tried tinkering a bit with the white-space attribute, but I really don't know what I'm doing well enough to get that to help me. Is it possible, either with HTML or CSS, to adjust how these things will stack so that they will simply stack vertically and align properly if the screen won't accommodate them together?

On that page there are essentially 3 columns of information (two with photos and associated text, and the third with just text). If I could somehow fix the columns and then make them stack instead of smooshing, perhaps I could still have a mobile-friendly page without having to re-write the content?

Anyone know if this is possible?

brandofamily · June 24, 2014

thenickdude wrote: »

Unfortunately, the SmugMug support for these oddball contact links is limited to one link per page. You'll need to place your "contact us" link after the tabs, instead of having one link inside each tab.

(alternatively, create a "contact us" page that has a Wufoo contact form on it, and link people to that instead)

Nick, when I open my fancy tab page on a really small screen, like my iphone the tabs all overlap and the page is a mess. I used code from elsewhere to put a notice on the page to users that are on old browsers that do not support the code... is there a way to blank the page and put a notice when the screen is too small? LeftQ has some code that shows a totally different page when the screen narrows too much. I don't want to get that crazy... at least not yet.

LiveAwake · June 25, 2014

My (temporary?) solution was to add

style="min-width: 800px"

to the very first div tag in the HTML. This prevents the box from squishing, but leaves the issue that smaller screens will need to scroll sideways to see everything.

brandofamily · June 25, 2014

LiveAwake wrote: »

My (temporary?) solution was to add to the very first div tag in the HTML. This prevents the box from squishing, but leaves the issue that smaller screens will need to scroll sideways to see everything.

Thanks for the idea but on an iphone reading the page is not possible if the width is 800px...

leftquark · June 25, 2014

brandofamily wrote: »

LeftQ has some code that shows a totally different page when the screen narrows too much. I don't want to get that crazy... at least not yet.

That's exactly what you want -- the code to show a totally different "page" ... but in your case you want it to just display a simple message instead of the actual content. I figured I'd show them some content ... but you can use my code and do something similar, just change the content to be "This page is not accessible from mobile devices" or something.

brandofamily · June 25, 2014

Thanks... got it working.

brandofamily · June 26, 2014

leftquark wrote: »

That's exactly what you want -- the code to show a totally different "page" ... but in your case you want it to just display a simple message instead of the actual content. I figured I'd show them some content ... but you can use my code and do something similar, just change the content to be "This page is not accessible from mobile devices" or something.

Is there a way to hide parts of the header when the page gets too narrow? I'd like to hide the large logo on the left and just leave the name that is normally on the right. I just cannot figure out the code for that. I tried the WD tools and Firebug) Thanks.

Allen · June 26, 2014

brandofamily wrote: »

Is there a way to hide parts of the header when the page gets too narrow? I'd like to hide the large logo on the left and just leave the name that is normally on the right. I just cannot figure out the code for that. I tried the WD tools and Firebug) Thanks.

I did that on this page. Hid items as narrowed. HTML box.
http://www.photosbyat.com/Birds/Missouri-Bird-Photos-A-G

@media only screen and (max-width: 1060px) {
  .rightThumb {
    display: none;
   }
}

@media only screen and (max-width: 970px) {
  .centerThumbs {
    display: none;}
   }

@media only screen and (max-width: 700px) {
  .leftThumb {
      display: none;}
   }

Notice I also change my top menu to pure html for small devices.

brandofamily · June 26, 2014

Allen wrote: »
I did that on this page. Hid items as narrowed. HTML box.
http://www.photosbyat.com/Birds/Missouri-Bird-Photos-A-G
@media only screen and (max-width: 1060px) {
  .rightThumb {
    display: none;
   }
}

@media only screen and (max-width: 970px) {
  .centerThumbs {
    display: none;}
   }

@media only screen and (max-width: 700px) {
  .leftThumb {
      display: none;}
   }
Notice I also change my top menu to pure html for small devices.

Thanks for the input. But I need the div/ class for the header sections.

Allen · June 26, 2014

brandofamily wrote: »

Thanks for the input. But I need the div/ class for the header sections.

top left image. Used inspect element to find it in html.

...
<div id="yui_3_8_0_1_1403794893304_703" class="sm-page-layout-region sm-page-layout-region-header">
  <div id="yui_3_8_0_1_1403794893304_702" class="sm-page-layout-region sm-page-layout-region-top" data-layout-region="Top">
      <div id="yui_3_8_0_1_1403794893304_778" class="sm-page-layout-row yui3-g" data-layout-row="M">
          <div id="yui_3_8_0_1_1403794893304_791" class="sm-page-layout-column yui3-u" data-layout-column="0" style="width: 7%;">
              <div id="sm-page-widget-JwQGSq4k" class="sm-page-widget
                                sm-page-widget-image [COLOR=Red]sm-page-widget-1480281[/COLOR]" data-typeid="1480281"></div>
          </div>
...

brandofamily · June 26, 2014

Allen wrote: »

top left image. Used inspect element to find it in html.

...
<div id="yui_3_8_0_1_1403794893304_703" class="sm-page-layout-region sm-page-layout-region-header">
  <div id="yui_3_8_0_1_1403794893304_702" class="sm-page-layout-region sm-page-layout-region-top" data-layout-region="Top">
      <div id="yui_3_8_0_1_1403794893304_778" class="sm-page-layout-row yui3-g" data-layout-row="M">
          <div id="yui_3_8_0_1_1403794893304_791" class="sm-page-layout-column yui3-u" data-layout-column="0" style="width: 7%;">
              <div id="sm-page-widget-JwQGSq4k" class="sm-page-widget
                                sm-page-widget-image [COLOR=Red]sm-page-widget-1480281[/COLOR]" data-typeid="1480281"></div>
          </div>
...

Thanks.

brandofamily · June 26, 2014

Allen wrote: »

top left image. Used inspect element to find it in html.

...
<div id="yui_3_8_0_1_1403794893304_703" class="sm-page-layout-region sm-page-layout-region-header">
  <div id="yui_3_8_0_1_1403794893304_702" class="sm-page-layout-region sm-page-layout-region-top" data-layout-region="Top">
      <div id="yui_3_8_0_1_1403794893304_778" class="sm-page-layout-row yui3-g" data-layout-row="M">
          <div id="yui_3_8_0_1_1403794893304_791" class="sm-page-layout-column yui3-u" data-layout-column="0" style="width: 7%;">
              <div id="sm-page-widget-JwQGSq4k" class="sm-page-widget
                                sm-page-widget-image [COLOR=Red]sm-page-widget-1480281[/COLOR]" data-typeid="1480281"></div>
          </div>
...

Used this concept in the theme to "fix" the issue site wide... well it mess up other CSS customizations... I ended up putting the code for the header in the homepage siite wide CSS box. It works site wide now and does now mess up my rounded corners and other CSS.

Fredsou · November 8, 2014

Hiis it possible to used the TABBED with Display on mobile.

With this code

Ids for large screen

and

for mobile

If I used thise code the TABBED are not working I copied all the code for TABBED and add it in the section

I want the same function on mobiel but I want to change a small things

leftquark · November 17, 2014

You can try Nick's version of the tabbed pages, although I find on mobile browsers the tabs get really too small to use: http://www.sherlockphotography.org/Customisations/Tabbed-pages

J_deitsch · January 23, 2017

First of all I know this thread is a few years old. But when I asked about creating a tabbed prints page, this was the tutorial I was given. I was also referred to comment here from help@smugmug when I had issues with getting it to work correctly.

I have copied and pasted the HTML and CSS code into a prints page I created following the instruction given. I have tried multiple times of deleting and recopying the code. Here are my issues:
1) there are no tabs that appear. I have changed the links in the CSS section to point to the images uploaded an unlisted gallery. I can hover over where the tabs should be and get a pointer and can click to change tabs. I just can't see the tab itself.

2) there is additional text below the bordered prints box. It appears to be the paper type text from another tab, but it is below the bordered area on each tab.

Hopefully someone can help with this. I can manage software on a computer, but have no experience with HTML and CSS coding.

I am unable to post a link so I will see if I can change it fr M being an actual link .jamesdeitschphotography.com/Prints

Hikin' Mike · February 8, 2017

UPDATE CSS CODE

There is some issues when the new forum converted the old forum's CSS. The HTML is fine, but the CSS didn't work. You need to use this, but you need to copy/paste the two sections of CSS.

CSS 1

/* 
/* =====================================
   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');
}

  /* This Print Page doesn't look right on mobile browsers because the
  width of the screen is too small. It must be hidden and a different 
  page, formatted for small screens, will be displayed. */
@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 */

Hikin' Mike · February 8, 2017

Copy/paste this under CSS 1 above

CSS 2

 .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
}

Lille Ulven · February 8, 2017

@leftquark and everybody else who uses the "more"-link from the "Lustre" print section for BayPhoto: the link does no longer work. Not even from the smugmug bay photo catalog page (https://smugmug.com/prints/catalog/BP).

I will send a mail to the smug mug heroes in a second, but wanted to give you all a heads up first

Good luck

Lille Ulven

leftquark · February 9, 2017

We're in the process of updating our catalog page(s) -- the team is already aware, but thanks for passing along! Second set of eyes never hurts!

brandofamily · February 9, 2017

Will the "old" page become updated or will I have to fix my links? Will my whole Fancy page become obsolete?

leftquark · February 9, 2017

The old pages will remain live. For now they'll stay as they are, but eventually they'll get an upgrade!

brandofamily · February 9, 2017

Will the links change w/ the upgrade?

leftquark · February 10, 2017

Nope. We'd just update it to have a modern SmugMug look (similar to our current homepage) with updated information and graphics so that your customers can get a better understanding of what these products are.

J_deitsch · February 10, 2017

Thank you Mike for updating the CSS for this page. It really is appreciated. And thank you to leftquark for the info on the links.

Now that I have it up and going, I am making some small edits for it to fit my page. I've gotten the links changed to link the photos back to an unlisted gallery. Now maybe this is just my lack of knowledge, but how can i edit the image on the Dowloads tab to one of my images?

Hikin' Mike · February 10, 2017

@J_deitsch said:
Thank you Mike for updating the CSS for this page. It really is appreciated. And thank you to leftquark for the info on the links.

Now that I have it up and going, I am making some small edits for it to fit my page. I've gotten the links changed to link the photos back to an unlisted gallery. Now maybe this is just my lack of knowledge, but how can i edit the image on the Dowloads tab to one of my images?

You need to navigate to one of the pictures from your gallery and click on the download button. Then do a screen print, crop it to suit and upload it to your site. Replace his photo with the one you just created.

<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" />

That said, I don't offer downloads, so I'm "flying blind", so to speak.

J_deitsch · February 10, 2017

Thanks Mike. I figured it was something like that. Got it done.

Fancy "Prints" Page Describing Print Options

Comments