NEW TUTORIAL: Full width image with text over or/and a call to action button

tomnovytomnovy Registered Users Posts: 1,101 SmugMug Employee
edited March 23, 2017 in SmugMug Customization

Hey Friends,

I have written another tutorial. This time something that you have asked about in the past.

A full width image with some text and a call to action button:

Full width image

Link to the tutorial: https://portal.photom.me/portal/add-full-width-image-to-your-smugmug-site-with-text-andor-button-over-it/

Check it out and let me know what you think

SmugMug Support Hero | Customizer | My SmugMug site - http://www.photom.me | Customization Portal - https://portal.photom.me

Comments

  • lauradonialauradonia Registered Users Posts: 18 Big grins

    Hi there,

    I have been trying to use the code in this tutorial to do exactly the same thing on my site, but the CSS in CSS tab of the content block does not seem to be doing anything. I can't find it anywhere when I inspect the page, so it is as if it is not even there. Is there a special trick to get the CSS in the CSS tab to apply to the HTML in the HTML tab of the HTML content block?

    thanks in advance for your help.

    Laura

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @lauradonia said:
    Hi there,

    I have been trying to use the code in this tutorial to do exactly the same thing on my site, but the CSS in CSS tab of the content block does not seem to be doing anything. I can't find it anywhere when I inspect the page, so it is as if it is not even there. Is there a special trick to get the CSS in the CSS tab to apply to the HTML in the HTML tab of the HTML content block?

    thanks in advance for your help.

    Laura

    Can you post your site/page so somebody can take a look?

  • lauradonialauradonia Registered Users Posts: 18 Big grins

    Hi, my site is www.lauradoniaphotography.com

    but the HTML content block that I have added hasn't been published yet... because I can't get it to work & I don't want to break my home page. So I don't think there is anything to see. But basically I am trying to do exactly what is described in the tutorial in this thread. I copied/pasted the code exactly and changed only the links so they reference pages/images on my site.

    What I can do to help troubleshoot is create a test page and replicate everything there, and then publish the test page? Will that help to assist?

    thanks!

    Laura

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @lauradonia said:
    What I can do to help troubleshoot is create a test page and replicate everything there, and then publish the test page? Will that help to assist?

    thanks!

    Laura

    Yes, I was going to suggest that.

  • lauradonialauradonia Registered Users Posts: 18 Big grins

    Hi! Here is the test page URL -

    www.lauradoniaphotography.com/Testpage/n-pWh87Q

    You can see the HTML is there, but none of the CSS is being applied. The CSS has been added to the CSS tab in the HTML content block. Here is the CSS that has been added there:

    /*CSS to modify the appearance of the TITLE text*/
    h1 {
      color: #fff;
      margin: 0;
      width: 100vh;
      text-align: center;
      font-size: 70px;
      font-weight: 700;
      letter-spacing: 3px;
    
    }
     
    /*CSS to modify the appearance of the button*/
    a {
      border: 0 solid;
      box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
      outline: 1px solid;
      outline-color: rgba(255, 255, 255, 0.5);
      outline-offset: 0px;
      text-shadow: none;
      -webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
      transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
      color: #fff; 
      font-size: 20px; 
      padding: 10px;
    }
     
    /*CSS to modify the appearance of the button after a cursor have been hovered over it*/
    a:hover {
      border: 1px solid;
      box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
      outline-color: rgba(255, 255, 255, 0);
      outline-offset: 15px;
      text-shadow: 1px 1px 2px #427388;
    }
     
    /*CSS to modify the appearance of the background of the image*/
    .hero {
       background: pink;
      background-image: url("https://photos.smugmug.com/Portfolio-Gallery/i-SbWHmjr/0/e34e68ea/X3/4K4A2622%20-%20print-X3.jpg");  /*Replace link to the background image with your own image*/
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
      height: 60vh;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
    }
    
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited May 10, 2017

    Are you SURE you're using a HTML/CSS block and posting the HTML in the HTML section and the CSS to the CSS section? I just copied your code to my testing page and it works fine.

    http://gallery.imagesinthebackcountry.com/Test/Test-page/n-f3gmc

  • lauradonialauradonia Registered Users Posts: 18 Big grins
    edited May 10, 2017

    Yup I am sure. Here is a video I made navigating through the content block on this page:

    https://youtu.be/0-EAdLDwIag

    This is driving me nuts! I have no idea what I can be missing.

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @lauradonia said:
    Yup I am sure. Here is a video I made navigating through the content block on this page:

    This is driving me nuts! I have no idea what I can be missing.

    That's odd. I don't see the CSS block by using web tools on Firefox. Time to contact SmugMug support.

  • lauradonialauradonia Registered Users Posts: 18 Big grins

    Yeah, I used web tools to look as well and couldn't find the CSS either. Thanks for trying. I'll contact SmugMug in the morning to see if they can help. I'm stumped!

  • lauradonialauradonia Registered Users Posts: 18 Big grins

    Hi, for anyone interested in knowing what the issue was -

    SmugMug does not scrape out any special characters that may get picked up in a copy/paste. So if you are copying CSS from an editor or web page, it may pick up special characters in the copy/paste, that may break the CSS (which is what happened to me).

    I'm still tweaking the design, but at least I got the main hero banner to work. Thanks for all the help I received here.

    Laura

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @lauradonia said:
    Hi, for anyone interested in knowing what the issue was -

    SmugMug does not scrape out any special characters that may get picked up in a copy/paste. So if you are copying CSS from an editor or web page, it may pick up special characters in the copy/paste, that may break the CSS (which is what happened to me).

    I'm still tweaking the design, but at least I got the main hero banner to work. Thanks for all the help I received here.

    Laura

    Glad you got it working. I use Notepad++ to do any coding.

  • tomnovytomnovy Registered Users Posts: 1,101 SmugMug Employee

    Yes, it is my fault :} The plugin that I use for displaying code on my site does not give you clean code when copying it to the clipboard. You have click the show code button first { screenshot }:

    http://cloud.photom.me/3P0Q3h1R0J33

    To make sure that only the code has been copied. I have to see how to solve this on the portal { I may already have a solution for it }.

    Thanks for bringing this up.

    SmugMug Support Hero | Customizer | My SmugMug site - http://www.photom.me | Customization Portal - https://portal.photom.me
  • lauradonialauradonia Registered Users Posts: 18 Big grins

    Hi, actually the correct place to fix this would be in the SmugMug HTML/CSS content blocks. It is pretty straightforward to strip out formatting characters or other invalid characters when doing the paste. Fixing it on your portal will only resolve the problem when copy and pasting from your portal, but not from other editors, tutorials, etc.

    At the very least, there should be user feedback that invalid characters have been entered w/ the HTML/CSS so the user has some idea as to why the code is not being applied. The fact that there is no indication to the user as to what the problem is is not an acceptable user experience at all.

Sign In or Register to comment.