Prints page

J_deitsch · February 7, 2017

I tried posting about this I am old thread, but I never received any response. I also contacted help@smugmug and they told me to post it within the thread. So hopefully I can get some response or options here.

I recently decided to add a prints page with tabs and descriptions. But I could never get me tabs to show up. If you hover over where they should be, you can click them. I have tried editing the CSS and making sure it directs to the image link on my page. Nothing I did seemed to work. And to be honest I do not know whether or not it is still changed or if I started back with original code.
Once I get this issue resolved I can dissect and fix other issues with it. Any help is greatly appareciated.
www.JamesDeitschPhotography/Pages/Prints
And it is not available with tabs mobile.

Hikin' Mike · February 7, 2017

I created a test page and added the HTML/CSS and I'm not seeing the tabs either. I can click on the area were they should be, and the pages change. I'm going to see how to "fix" it because Aaron's page works.

J_deitsch · February 7, 2017

Thanks Mike. I was hoping you would chime in. I have contacted Aaron, but he was out of town. I'm not sure what the issue is. And code is not something I know much of anything about to try and really disect and troubleshoot. I have tried and seem to mess things up even more.

Hikin' Mike · February 7, 2017

There was some issues with the old forum's CSS formatting. The new forum can't copy/paste the whole code so copy this:

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 7, 2017

Copy/paste under the '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
}

J_deitsch · February 8, 2017

Thanks so much Mike. I would have never figured that out. Now I can play with it a little bit and make it more "mine" and not just a copy job.

Prints page

Comments