Fancy "Prints" Page Describing Print Options

124

Comments

  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited 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)
  • LiveAwakeLiveAwake Registered Users Posts: 263 Major grins
    edited 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.
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited 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 :)
    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 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?
  • LiveAwakeLiveAwake Registered Users Posts: 263 Major grins
    edited 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?
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited June 24, 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)

    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.
  • LiveAwakeLiveAwake Registered Users Posts: 263 Major grins
    edited 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.
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited 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...
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited June 25, 2014
    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.
    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
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited June 25, 2014
    Thanks... got it working.
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited 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.
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited June 26, 2014
    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.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited 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.
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited June 26, 2014
    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>
    ...
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited 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.
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited 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.
  • FredsouFredsou Registered Users Posts: 62 Big grins
    edited 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
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited 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
    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
  • J_deitschJ_deitsch Registered Users Posts: 11 Big grins
    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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 UlvenLille Ulven Registered Users Posts: 567 Major grins

    @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

    https://www.lilleulven.smugmug.com - The Photos of my travels
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins

    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!

    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
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited February 9, 2017

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

  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins

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

    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
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins

    Will the links change w/ the upgrade?

  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins

    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.

    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
  • J_deitschJ_deitsch Registered Users Posts: 11 Big grins
    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited 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. B)

  • J_deitschJ_deitsch Registered Users Posts: 11 Big grins
    Thanks Mike. I figured it was something like that. Got it done.
Sign In or Register to comment.