Fancy "Prints" Page Describing Print Options

135

Comments

  • ko04ko04 Registered Users Posts: 370 Major grins
    edited January 30, 2014
    This is something I've been thinking of adding to my site for awhile. I just now decided to take it on and see where I can go with it. I have one question though and that is if I want to delete a tab say the "Downloads" tab because currently I don't offer that how do I go about doing this. If you need a link to my page let me know but I figured you probably wouldn't due to this being a generic question about the code it self and not my page.

    Also this may have been talked about but how do I change what I offer like on the table it starts off with "Standard Sizes" and it goes from 8x10 to 40x60. What I would like to do is make that table match what I offer along with it match the sizes I offer for each product.
  • FritzFritz Registered Users Posts: 36 Big grins
    edited January 30, 2014
    ko04 wrote: »
    This is something I've been thinking of adding to my site for awhile. I just now decided to take it on and see where I can go with it. I have one question though and that is if I want to delete a tab say the "Downloads" tab because currently I don't offer that how do I go about doing this. If you need a link to my page let me know but I figured you probably wouldn't due to this being a generic question about the code it self and not my page.

    Also this may have been talked about but how do I change what I offer like on the table it starts off with "Standard Sizes" and it goes from 8x10 to 40x60. What I would like to do is make that table match what I offer along with it match the sizes I offer for each product.

    Go into the gallery where you want to turn off the download.

    - Organize
    - Settings
    - Right-Click Protect "Yes"

    That should turn it off and hide the download button.
    __________________
    --Bruce
    Homepage
  • FritzFritz Registered Users Posts: 36 Big grins
    edited January 30, 2014
    Fritz wrote: »
    I did a little investigation this weekend. This may have cleared the issue.

    - View the image (already pasted in my directory) in "Original" view
    - Click on the image, Sizes, Original, Right Click - View Image Info
    - Copy the location of the last 4 directories /i-4VL9x3H/0/O/i-4VL9x3H.jpg
    - Add to: http://www.brucefratto.com/Photos (specific to each owner of a site)
    - The replacement image code would be an original or http://www.brucefratto.com/Photos/i-4VL9x3H/0/O/i-4VL9x3H.jpg

    This seems to go with the tips. I can't tell if it is fixed since it varies by computers. Perhaps others can tell me if the images are showing from their computer? headscratch.gif

    Tried from another computer today. Still not working from some. Can only see the text version as if this was an I-pad or phone. Worked from a Mac but not my laptop. I think it may be a security setting through our VPN or perhaps the screen setting. headscratch.gif
    __________________
    --Bruce
    Homepage
  • ko04ko04 Registered Users Posts: 370 Major grins
    edited January 30, 2014
    Fritz wrote: »
    Go into the gallery where you want to turn off the download.

    - Organize
    - Settings
    - Right-Click Protect "Yes"

    That should turn it off and hide the download button.

    Thanks for the info but im actually talking the download button in this code
  • FritzFritz Registered Users Posts: 36 Big grins
    edited January 30, 2014
    ko04 wrote: »
    Thanks for the info but im actually talking the download button in this code

    Got it. Way above my pay grade. Will defer to someone else. :ian
    __________________
    --Bruce
    Homepage
  • ko04ko04 Registered Users Posts: 370 Major grins
    edited February 4, 2014
    Fritz wrote: »
    Go into the gallery where you want to turn off the download.

    - Organize
    - Settings
    - Right-Click Protect "Yes"

    That should turn it off and hide the download button.
    Fritz wrote: »
    Got it. Way above my pay grade. Will defer to someone else. :ian

    Haha thanks anyways...hopefully someone can help on this question, thanks for trying to
  • coutzcoutz Registered Users Posts: 3 Beginner grinner
    edited February 6, 2014
    Thank you!!!...but I have a question
    Let me start by saying I have never taken a computer or coding class in my life...after (too many) hours of playing, I changed everything based on what you did to make it my own-ish. I still need to figure out how to line up the photo link boxes on my first tab page but I really wondered if someone could please tell me how to get my

    <h3 class="openSans">Contact Me</h3>
    Ready to book a session? Have some more questions? Contact Christal Outz via phone or text at 40*****
    <ul style="font-size: 14px;">
    <li><a href="mailto:christaloutz@gmail.com">E-mail C. Outz Photography</a></li>"


    to show at the bottom of this (or these) pages. I am sure I have to code for height or something, but I really am just winging it here! Thank you so much for sharing this!!iloveyou.gif
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited February 7, 2014
    coutz wrote: »
    Let me start by saying I have never taken a computer or coding class in my life...after (too many) hours of playing, I changed everything based on what you did to make it my own-ish. I still need to figure out how to line up the photo link boxes on my first tab page but I really wondered if someone could please tell me how to get my

    <h3 class="openSans">Contact Me</h3>
    Ready to book a session? Have some more questions? Contact Christal Outz via phone or text at 40*****
    <ul style="font-size: 14px;">
    <li><a href="mailto:christaloutz@gmail.com">E-mail C. Outz Photography</a></li>"


    to show at the bottom of this (or these) pages. I am sure I have to code for height or something, but I really am just winging it here! Thank you so much for sharing this!!<img src="https://us.v-cdn.net/6029383/emoji/iloveyou.gif&quot; border="0" alt="" >

    Just paste it in before:
    </div>
          <div class="sm-panel-content sm-panel-shadow sm-panel-padded">
    
    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
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited February 7, 2014
    For some reason I wasn't getting notifications of the posts here. Sorry to go MIA on you guys. I'm having a hard time following peoples quesitons because they're broken out over many posts. If you're having issues, post below (and assume I'm an idiot and haven't read anything) and I'll try to help.
    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
  • coutzcoutz Registered Users Posts: 3 Beginner grinner
    edited February 7, 2014
    leftquark wrote: »
    Just paste it in before:
    </div>
          <div class="sm-panel-content sm-panel-shadow sm-panel-padded">
    




    um...you are amazing! Thank you for the help!!!<img src="https://us.v-cdn.net/6029383/emoji/clap.gif&quot; border="0" alt="" >
  • ko04ko04 Registered Users Posts: 370 Major grins
    edited February 16, 2014
    leftquark wrote: »
    For some reason I wasn't getting notifications of the posts here. Sorry to go MIA on you guys. I'm having a hard time following peoples quesitons because they're broken out over many posts. If you're having issues, post below (and assume I'm an idiot and haven't read anything) and I'll try to help.


    I asked this a few weeks ago if are able to help me out on these question that would be great!

    Here is what I said: This is something I've been thinking of adding to my site for awhile. I just now decided to take it on and see where I can go with it. I have one question though and that is if I want to delete a tab say the "Downloads" tab because currently I don't offer that how do I go about doing this. If you need a link to my page let me know but I figured you probably wouldn't due to this being a generic question about the code it self and not my page.

    Also this may have been talked about but how do I change what I offer like on the table it starts off with "Standard Sizes" and it goes from 8x10 to 40x60. What I would like to do is make that table match what I offer along with it match the sizes I offer for each product.
  • Ed LOEd LO Registered Users Posts: 7 Beginner grinner
    edited March 14, 2014
    This is genius guys. Thanks very much....

    Don't suppose anyone has a version for Loxley given that I'm not in US of A...?!
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited March 17, 2014
    ko04 wrote: »
    I asked this a few weeks ago if are able to help me out on these question that would be great!

    Here is what I said: This is something I've been thinking of adding to my site for awhile. I just now decided to take it on and see where I can go with it. I have one question though and that is if I want to delete a tab say the "Downloads" tab because currently I don't offer that how do I go about doing this. If you need a link to my page let me know but I figured you probably wouldn't due to this being a generic question about the code it self and not my page.

    Also this may have been talked about but how do I change what I offer like on the table it starts off with "Standard Sizes" and it goes from 8x10 to 40x60. What I would like to do is make that table match what I offer along with it match the sizes I offer for each product.

    To delete the downloads tab you just need to get rid of this portion of the HTML code:
     <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 &quot;Downloads&quot; section of my shopping cart. <br />
              Select any photo, choose &quot;Add to Cart&quot;, then click on the &quot;Downloads&quot; 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 &quot;Contact&quot; 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>
    

    You'll need to clean-up some CSS too:
    Change all instances of "5" to "4" here:
    /* 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)
    }
    

    Your best bet for fixing the tables on the page is to paste the code into a WYSIWYG (What you see is what you get) editor like Dreamweaver or something. That's how I edited it. It's kinda a pain otherwise but it is just simple HTML.
    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
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited March 17, 2014
    Ed LO wrote: »
    This is genius guys. Thanks very much....

    Don't suppose anyone has a version for Loxley given that I'm not in US of A...?!

    It should be pretty easy ... all you have to do is change the image that says "Prints Bay Photo" to "Prints Loxley" ... then customize the HTML to your liking. Photoshop should be able to alter the image for you. The HTML may be a bit trickier but Dreamweaver or similar can help.
    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
  • LiveAwakeLiveAwake Registered Users Posts: 263 Major grins
    edited March 25, 2014
    This is AMAZING. First of all, thanks for posting this! I haven't even unveiled my new SM yet, so I'm a little bit off making this happen, but I've created a page with your code so I can come back and tinker soon.

    My question is this: I may end up using the tabbed format of this page to provide other information (for example various services that I provide). I love the idea of having all of the info on one page, but separated into tabs. Is it possible, then, to have links from the nav bar or other links direct to a specific tab on a page, or must all links to the page bring you to the first tab?

    Again, THANK YOU!!
  • LiveAwakeLiveAwake Registered Users Posts: 263 Major grins
    edited March 26, 2014
    LiveAwake wrote: »
    This is AMAZING. First of all, thanks for posting this! I haven't even unveiled my new SM yet, so I'm a little bit off making this happen, but I've created a page with your code so I can come back and tinker soon.

    My question is this: I may end up using the tabbed format of this page to provide other information (for example various services that I provide). I love the idea of having all of the info on one page, but separated into tabs. Is it possible, then, to have links from the nav bar or other links direct to a specific tab on a page, or must all links to the page bring you to the first tab?

    Again, THANK YOU!!

    Does anyone know the answer to this? Is it possible to have a link on another page or in the nav-bar send you to a specific tab?
    Thanks!
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited March 26, 2014
    LiveAwake wrote: »
    Does anyone know the answer to this? Is it possible to have a link on another page or in the nav-bar send you to a specific tab?
    Thanks!

    1st, you need to realize there are probably 3 SM'er who know anything about this code. So it takes time to get answers. especially if any of us three are not around for awhile.

    Anyway, w/ the new version of the code I do not see a way to do what you want. My old code gave a different URL for each tab. Not w/ the new code.
  • LiveAwakeLiveAwake Registered Users Posts: 263 Major grins
    edited March 26, 2014
    1st, you need to realize there are probably 3 SM'er who know anything about this code. So it takes time to get answers. especially if any of us three are not around for awhile.

    Anyway, w/ the new version of the code I do not see a way to do what you want. My old code gave a different URL for each tab. Not w/ the new code.

    Thanks Brando, sorry to seem impatient, just didn't know if anyone had seen my post so I gave it a bump.

    If any other coding gurus know of a way to link to tabs with this design, I would very much like to know of it. This will do so much for my (coming soon) unveiled new SM site.

    Thanks!
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited March 27, 2014
    LiveAwake wrote: »
    My question is this: I may end up using the tabbed format of this page to provide other information (for example various services that I provide). I love the idea of having all of the info on one page, but separated into tabs. Is it possible, then, to have links from the nav bar or other links direct to a specific tab on a page, or must all links to the page bring you to the first tab?

    (Without making the page jump each time a tab header is clicked) that is just barely possible in CSS. I've revised my tab code to support that, here's the new version:

    http://www.sherlockphotography.org/Customisations/Tabbed-pages-advanced
  • LiveAwakeLiveAwake Registered Users Posts: 263 Major grins
    edited March 27, 2014
    Lamah wrote: »
    (Without making the page jump each time a tab header is clicked) that is just barely possible in CSS. I've revised my tab code to support that, here's the new version:

    http://www.sherlockphotography.org/Customisations/Tabbed-pages-advanced

    That is fantastic, thank you so much Lamah!
    I've spent quite a bit of time tinkering with it to combine your code with some of the prettier features in leftquark's original design . . . with all this tinkering, I'm almost beginning to feel like a coder! I think I've got the two effectively merged: it looks great, but since I haven't unveiled my new SM site yet, I can't seem to test whether the #tags will in fact link to specific tabs.

    I hope to unveil within a few days, so I'll post back if it gives me trouble.
    Thank you so much!
  • LiveAwakeLiveAwake Registered Users Posts: 263 Major grins
    edited March 29, 2014
    Ok, I've been tinkering for a few days now, but I can't quite get this to work. I went ahead and published my new SM site even though not all sections are complete, so hopefully one of you gurus can take a look and see what I'm doing wrong.

    I'm trying to meld the fancy-looking design that Leftquark posted with the advanced functionality of Lamah's linkable tabs. I've done my best, but it still doesn't work. Page is here: www.manifestphoto.com/Services

    My best guess is that it has something to do with using this code to show PNG files for the tabs, but I'm not sure.
    /* The "Rotations" tab, unselected */
     .ss-tabs>label:nth-of-type(1) {
      background: url(http://www.manifestphoto.com/Unlisted-Pages/Unlisted-Images/n-BSZqD/i-hXkG7L4/0/O/Tab%20ROTATION%20Green.png);
      margin-left: 4px
    }
    
    /* The "Rotations" tab, selected */
     .ss-tabs>input[type='radio']:checked:nth-of-type(1)+label {
      background: url(http://www.manifestphoto.com/Unlisted-Pages/Unlisted-Images/n-BSZqD/i-CbB4cRX/0/O/Tab%20ROTATION%20Selected.png);
      margin-left: 4px
    }
    

    Any insight would be greatly appreciated! If this were working as desired, then the link http://www.manifestphoto.com/Services#tab-tutoring would bring you to the services page and open the last tab.
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited March 29, 2014
    Okay, in your HTML code you need to move your <input> tags so they're all listed before the <label> tags. Then remove the 'checked="checked"' attribute from that first input. Replace the CSS you're using to set the PNG header images with this:
    .ss-tabs > label:nth-of-type(1), 
    .ss-tabs > input[type="radio"]:target ~ label:nth-of-type(1),
    .ss-tabs.ss-tabs-sp1 > input[type="radio"]:checked ~ label:nth-of-type(1) {	
    	background: url(http://www.manifestphoto.com/Unlisted-Pages/Unlisted-Images/n-BSZqD/i-hXkG7L4/0/O/Tab%20ROTATION%20Green.png);
        margin-left: 4px
    }
    
    .ss-tabs > label:nth-of-type(1), /* First tab is selected by default */
    .ss-tabs > input:nth-of-type(1):target ~ label:nth-of-type(1),
    .ss-tabs > input[type="radio"]:nth-of-type(1):checked ~ label:nth-of-type(1) {
        background: url(http://www.manifestphoto.com/Unlisted-Pages/Unlisted-Images/n-BSZqD/i-CbB4cRX/0/O/Tab%20ROTATION%20Selected.png);
        margin-left: 4px
    }
    
    .ss-tabs > label:nth-of-type(2), 
    .ss-tabs > input[type="radio"]:target ~ label:nth-of-type(2),
    .ss-tabs.ss-tabs-sp1 > input[type="radio"]:checked ~ label:nth-of-type(2) {	
        background: url(http://www.manifestphoto.com/Unlisted-Pages/Unlisted-Images/n-BSZqD/i-VgNxrRX/0/O/Tab%20PURCHASE%20Orange.png)
    }
    
    .ss-tabs > input:nth-of-type(2):target ~ label:nth-of-type(2),
    .ss-tabs > input[type="radio"]:nth-of-type(2):checked ~ label:nth-of-type(2) {
        background: url(http://www.manifestphoto.com/Unlisted-Pages/Unlisted-Images/n-BSZqD/i-h83Qpsp/0/O/Tab%20PURCHASE%20Selected.png)
    }
    
    .ss-tabs > label:nth-of-type(3), 
    .ss-tabs > input[type="radio"]:target ~ label:nth-of-type(3),
    .ss-tabs.ss-tabs-sp1 > input[type="radio"]:checked ~ label:nth-of-type(3) {	
        background: url(http://www.manifestphoto.com/Unlisted-Pages/Unlisted-Images/n-BSZqD/i-zLz7vR2/0/O/Tab%20COMMERCIAL%20Purple.png)
    }
    
    .ss-tabs > input:nth-of-type(3):target ~ label:nth-of-type(3),
    .ss-tabs > input[type="radio"]:nth-of-type(3):checked ~ label:nth-of-type(3) {
        background: url(http://www.manifestphoto.com/Unlisted-Pages/Unlisted-Images/n-BSZqD/i-C6ktwws/0/O/Tab%20COMMERCIAL%20Selected.png)
    }
    
    .ss-tabs > label:nth-of-type(4), 
    .ss-tabs > input[type="radio"]:target ~ label:nth-of-type(4),
    .ss-tabs.ss-tabs-sp1 > input[type="radio"]:checked ~ label:nth-of-type(4) {	
        background: url(http://www.manifestphoto.com/Unlisted-Pages/Unlisted-Images/n-BSZqD/i-6GSrkjd/0/O/Tab%20CANDID%20blue.png)
    }
    
    .ss-tabs > input:nth-of-type(4):target ~ label:nth-of-type(4),
    .ss-tabs > input[type="radio"]:nth-of-type(4):checked ~ label:nth-of-type(4) {
        background: url(http://www.manifestphoto.com/Unlisted-Pages/Unlisted-Images/n-BSZqD/i-CRGZbhm/0/O/Tab%20CANDID%20Selected.png)
    }
    
    .ss-tabs > label:nth-of-type(5), 
    .ss-tabs > input[type="radio"]:target ~ label:nth-of-type(5),
    .ss-tabs.ss-tabs-sp1 > input[type="radio"]:checked ~ label:nth-of-type(5) {	
        background: url(http://www.manifestphoto.com/Unlisted-Pages/Unlisted-Images/n-BSZqD/i-mrj5b9M/0/O/Tab%20TUTORING%20brown.png)
    }
    
    .ss-tabs > input:nth-of-type(5):target ~ label:nth-of-type(5),
    .ss-tabs > input[type="radio"]:nth-of-type(5):checked ~ label:nth-of-type(5) {
        background: url(http://www.manifestphoto.com/Unlisted-Pages/Unlisted-Images/n-BSZqD/i-qF2WDbn/0/O/Tab%20TUTORING%20Selected.png)
    }
    
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited March 29, 2014
    LiveAwake wrote: »
    Ok, I've been tinkering for a few days now, but I can't quite get this to work. I went ahead and published my new SM site even though not all sections are complete, so hopefully one of you gurus can take a look and see what I'm doing wrong.

    I'm trying to meld the fancy-looking design that Leftquark posted with the advanced functionality of Lamah's linkable tabs. I've done my best, but it still doesn't work. Page is here: www.manifestphoto.com/Services

    My best guess is that it has something to do with using this code to show PNG files for the tabs, but I'm not sure.
    /* The "Rotations" tab, unselected */
     .ss-tabs>label:nth-of-type(1) {
      background: url(http://www.manifestphoto.com/Unlisted-Pages/Unlisted-Images/n-BSZqD/i-hXkG7L4/0/O/Tab%20ROTATION%20Green.png);
      margin-left: 4px
    }
    
    /* The "Rotations" tab, selected */
     .ss-tabs>input[type='radio']:checked:nth-of-type(1)+label {
      background: url(http://www.manifestphoto.com/Unlisted-Pages/Unlisted-Images/n-BSZqD/i-CbB4cRX/0/O/Tab%20ROTATION%20Selected.png);
      margin-left: 4px
    }
    
    Any insight would be greatly appreciated! If this were working as desired, then the link http://www.manifestphoto.com/Services#tab-tutoring would bring you to the services page and open the last tab.

    I see you have it working. Looks very nice!
  • LiveAwakeLiveAwake Registered Users Posts: 263 Major grins
    edited March 29, 2014
    Lamah wrote: »
    Okay, in your HTML code you need to move your <input> tags so they're all listed before the <label> tags. Then remove the 'checked="checked"' attribute from that first input. Replace the CSS you're using to set the PNG header images with this:
    .ss-tabs > label:nth-of-type(1), 
    .ss-tabs > input[type="radio"]:target ~ label:nth-of-type(1),
    .ss-tabs.ss-tabs-sp1 > input[type="radio"]:checked ~ label:nth-of-type(1) {	
    	background: url(http://www.manifestphoto.com/Unlisted-Pages/Unlisted-Images/n-BSZqD/i-hXkG7L4/0/O/Tab%20ROTATION%20Green.png);
        margin-left: 4px
    }
    
    .ss-tabs > label:nth-of-type(1), /* First tab is selected by default */
    .ss-tabs > input:nth-of-type(1):target ~ label:nth-of-type(1),
    .ss-tabs > input[type="radio"]:nth-of-type(1):checked ~ label:nth-of-type(1) {
        background: url(http://www.manifestphoto.com/Unlisted-Pages/Unlisted-Images/n-BSZqD/i-CbB4cRX/0/O/Tab%20ROTATION%20Selected.png);
        margin-left: 4px
    }
    
    .ss-tabs > label:nth-of-type(2), 
    .ss-tabs > input[type="radio"]:target ~ label:nth-of-type(2),
    .ss-tabs.ss-tabs-sp1 > input[type="radio"]:checked ~ label:nth-of-type(2) {	
        background: url(http://www.manifestphoto.com/Unlisted-Pages/Unlisted-Images/n-BSZqD/i-VgNxrRX/0/O/Tab%20PURCHASE%20Orange.png)
    }
    
    .ss-tabs > input:nth-of-type(2):target ~ label:nth-of-type(2),
    .ss-tabs > input[type="radio"]:nth-of-type(2):checked ~ label:nth-of-type(2) {
        background: url(http://www.manifestphoto.com/Unlisted-Pages/Unlisted-Images/n-BSZqD/i-h83Qpsp/0/O/Tab%20PURCHASE%20Selected.png)
    }
    
    .ss-tabs > label:nth-of-type(3), 
    .ss-tabs > input[type="radio"]:target ~ label:nth-of-type(3),
    .ss-tabs.ss-tabs-sp1 > input[type="radio"]:checked ~ label:nth-of-type(3) {	
        background: url(http://www.manifestphoto.com/Unlisted-Pages/Unlisted-Images/n-BSZqD/i-zLz7vR2/0/O/Tab%20COMMERCIAL%20Purple.png)
    }
    
    .ss-tabs > input:nth-of-type(3):target ~ label:nth-of-type(3),
    .ss-tabs > input[type="radio"]:nth-of-type(3):checked ~ label:nth-of-type(3) {
        background: url(http://www.manifestphoto.com/Unlisted-Pages/Unlisted-Images/n-BSZqD/i-C6ktwws/0/O/Tab%20COMMERCIAL%20Selected.png)
    }
    
    .ss-tabs > label:nth-of-type(4), 
    .ss-tabs > input[type="radio"]:target ~ label:nth-of-type(4),
    .ss-tabs.ss-tabs-sp1 > input[type="radio"]:checked ~ label:nth-of-type(4) {	
        background: url(http://www.manifestphoto.com/Unlisted-Pages/Unlisted-Images/n-BSZqD/i-6GSrkjd/0/O/Tab%20CANDID%20blue.png)
    }
    
    .ss-tabs > input:nth-of-type(4):target ~ label:nth-of-type(4),
    .ss-tabs > input[type="radio"]:nth-of-type(4):checked ~ label:nth-of-type(4) {
        background: url(http://www.manifestphoto.com/Unlisted-Pages/Unlisted-Images/n-BSZqD/i-CRGZbhm/0/O/Tab%20CANDID%20Selected.png)
    }
    
    .ss-tabs > label:nth-of-type(5), 
    .ss-tabs > input[type="radio"]:target ~ label:nth-of-type(5),
    .ss-tabs.ss-tabs-sp1 > input[type="radio"]:checked ~ label:nth-of-type(5) {	
        background: url(http://www.manifestphoto.com/Unlisted-Pages/Unlisted-Images/n-BSZqD/i-mrj5b9M/0/O/Tab%20TUTORING%20brown.png)
    }
    
    .ss-tabs > input:nth-of-type(5):target ~ label:nth-of-type(5),
    .ss-tabs > input[type="radio"]:nth-of-type(5):checked ~ label:nth-of-type(5) {
        background: url(http://www.manifestphoto.com/Unlisted-Pages/Unlisted-Images/n-BSZqD/i-qF2WDbn/0/O/Tab%20TUTORING%20Selected.png)
    }
    

    Lamah, you are my HERO. Simply awesome - thank you so much!
  • LiveAwakeLiveAwake Registered Users Posts: 263 Major grins
    edited March 29, 2014
    I've noticed that if I make my window short enough that I can scroll the page, the active tab will float on top of my top menu/navbar (which is docked to the top of the page). Is there a way to adjust the z-index of the top bar (or another way to fix this)?
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited March 29, 2014
    Ah sure, try this in a CSS block on that page:
    .sm-page-layout-region.sm-page-layout-region-header.sm-page-layout-region-pinned {
    	z-index:10 !important;
    }
    
  • LiveAwakeLiveAwake Registered Users Posts: 263 Major grins
    edited March 30, 2014
    Nice! I just put it in the CSS for my theme so nothing else will give me the same issue (is there any reason that I should NOT do that?).
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited March 30, 2014
    I wouldn't add that to the theme, as it could cause issues with the header appearing on top of dialogues like the "add to cart" one. I'd add it as a CSS block on the pages it's required for only.
  • LiveAwakeLiveAwake Registered Users Posts: 263 Major grins
    edited March 31, 2014
    Lamah wrote: »
    I wouldn't add that to the theme, as it could cause issues with the header appearing on top of dialogues like the "add to cart" one. I'd add it as a CSS block on the pages it's required for only.

    You're so SMART, Lamah! Thank you.
  • LiveAwakeLiveAwake Registered Users Posts: 263 Major grins
    edited March 31, 2014
    I'm not sure if I can stump you, but try this one:

    I used this code:
    <div class="sm-footer-navitem-contact">
      Please <a href="#">Contact Us</a> today . . .
    </div>
    
    from this thread to get the built-in contact form to pop up from a text link. It seems to work from the first tab, but not from any of the others.

    Can you spot why?
Sign In or Register to comment.