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

tomnovy

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:

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

lauradonia

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' Mike

@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?

lauradonia

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' Mike

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

lauradonia

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' Mike

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

lauradonia

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' Mike

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

lauradonia

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!

lauradonia

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' Mike

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

tomnovy

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.

lauradonia

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.