CMS Development

SLV
参加者

Need A Little Help Creating 404 With GIF Background

解決

Hi folks,

 

There's a custom error page that I created in my Wordpress mockup that didn't get migrated into HubSpot 😕 I think it's fairly simple, but it's apparently something I need a little assistance with.

 

Here's what I'm trying to create:

http://slv.ajdesignco.com/templates/custom-404/

 

This is what I have so far in the design manager:custom-404-design-mgr.png

 

 

And it isn't working well at all:custom-404-result.png

 

 

It's not a HUGE priority, but I would love to have this little "easter egg" feature added to our new HubSpot site. Am I close? Can anyone bump me in the right direction?

 

Thanks,

Andy

0 いいね!
2件の承認済みベストアンサー
Stephanie-OG
解決策
キーアドバイザー

Need A Little Help Creating 404 With GIF Background

解決

Hi Andy, 

 

Try also adding in the following to your inline styling: 

 

min-height: 100vh;

This should set the height to at least the window height. 

 

If that doesn't work, click on Preview > Preview without display options and send us that link so that we can take a look.

 


Stephanie O'Gay GarciaHubSpot Design / Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

元の投稿で解決策を見る

Kevin-C
解決策
名誉エキスパート | Solutions Partner
名誉エキスパート | Solutions Partner

Need A Little Help Creating 404 With GIF Background

解決

This will absolutely work, but might I add another suggestion?

 

The parent div (module-group) is not resepecting the height of its children elements because they are floated columns. applying the Clearfix hack to the parent divs might achieve the desired look in a way that won't push the footer out of view on larger displays.

 

Thoughts?

Kevin Cornett - Sr. Solutions Architect @ BridgeRev

元の投稿で解決策を見る

0 いいね!
5件の返信
Stephanie-OG
解決策
キーアドバイザー

Need A Little Help Creating 404 With GIF Background

解決

Hi Andy, 

 

Try also adding in the following to your inline styling: 

 

min-height: 100vh;

This should set the height to at least the window height. 

 

If that doesn't work, click on Preview > Preview without display options and send us that link so that we can take a look.

 


Stephanie O'Gay GarciaHubSpot Design / Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

SLV
参加者

Need A Little Help Creating 404 With GIF Background

解決

Hi Stephanie, that helped! Here's the result:

https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=...

 

Let me know if that link doesn't work for you.

 

Also, I figured out why the CSS wasn't styling my content...I hadn't linked the stylesheets. And once I linked the stylesheets, I saw some conflicts. So I made a copy of my main stylesheet and created a derivative for just this error page. I also edited the GIF in the background so it's darker and allows the text to be clearly seen. I couldn't get a CSS overlay to work.

 

I think the look is about right. All I need to do configure this so it's used as the main 404 error page. If you have any other suggestions, please let me know. 

 

Stephanie-OG
キーアドバイザー

Need A Little Help Creating 404 With GIF Background

解決

That seems to work! It works on IE/Firefox/Chrome at different sizes so I don't think there should be any issues. 

 

Aside from darkening the GIF, one thing I often do is add some text-shadow. Not loads but a subtle amount that helps the text stand out. Something like: 

 

h1 {
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

 


Stephanie O'Gay GarciaHubSpot Design / Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

Kevin-C
解決策
名誉エキスパート | Solutions Partner
名誉エキスパート | Solutions Partner

Need A Little Help Creating 404 With GIF Background

解決

This will absolutely work, but might I add another suggestion?

 

The parent div (module-group) is not resepecting the height of its children elements because they are floated columns. applying the Clearfix hack to the parent divs might achieve the desired look in a way that won't push the footer out of view on larger displays.

 

Thoughts?

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
0 いいね!
SLV
参加者

Need A Little Help Creating 404 With GIF Background

解決

Thanks Kevin! I actually don't mind the footer being pushed out of view. But I may indeed need to implement the clearfix hack.

0 いいね!