Jump to content

Page Header Code Injection for Blog List affecting all Blog Posts

Recommended Posts

21 hours ago, tuanphan said:

Hi. Which code did you use? Can you post here.

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<div class="splash-wrapper">
  <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_biy6osdk.json"  background="transparent"  mode="normal"  speed="1"  style="width: 480px; height: 270px;"  autoplay></lottie-player>
</div>

<style>
.splash-wrapper {
  position: fixed;
  z-index: 9999;
  background-color: #FFFFFF;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center !important;
  align-items: center;
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration: 0.5s;
  animation-delay: 2s;
}

@keyframes slideOut {
  from {margin-top: 0vh; opacity: 1;}
  to {margin-top: 100vh; opacity: 0;}
}
</style>

Here is the code posted in the Page Header Code Injection which I would only like applied to the blog page that lists all the posts. Thanks @tuanphan!

Link to comment
On 6/29/2021 at 12:19 PM, AllanYung said:
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<div class="splash-wrapper">
  <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_biy6osdk.json"  background="transparent"  mode="normal"  speed="1"  style="width: 480px; height: 270px;"  autoplay></lottie-player>
</div>

<style>
.splash-wrapper {
  position: fixed;
  z-index: 9999;
  background-color: #FFFFFF;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center !important;
  align-items: center;
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration: 0.5s;
  animation-delay: 2s;
}

@keyframes slideOut {
  from {margin-top: 0vh; opacity: 1;}
  to {margin-top: 100vh; opacity: 0;}
}
</style>

Here is the code posted in the Page Header Code Injection which I would only like applied to the blog page that lists all the posts. Thanks @tuanphan!

Try new code

<div class="splash-wrapper">
  <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_biy6osdk.json"  background="transparent"  mode="normal"  speed="1"  style="width: 480px; height: 270px;"  autoplay></lottie-player>
</div>

<style>
.splash-wrapper {
  position: fixed;
  z-index: 9999;
  background-color: #FFFFFF;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center !important;
  align-items: center;
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration: 0.5s;
  animation-delay: 2s;
}
  .view-item .splash-wrapper {
  	display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: -100 !important;
  }

@keyframes slideOut {
  from {margin-top: 0vh; opacity: 1;}
  to {margin-top: 100vh; opacity: 0;}
}
</style>

If it doesn't work, keep the code & add this to Design > Custom CSS

/* disable code on blog individual posts */
.view-item .splash-wrapper {
  	display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: -100 !important;
  }

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
6 hours ago, tuanphan said:

Try new code

<div class="splash-wrapper">
  <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_biy6osdk.json"  background="transparent"  mode="normal"  speed="1"  style="width: 480px; height: 270px;"  autoplay></lottie-player>
</div>

<style>
.splash-wrapper {
  position: fixed;
  z-index: 9999;
  background-color: #FFFFFF;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center !important;
  align-items: center;
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration: 0.5s;
  animation-delay: 2s;
}
  .view-item .splash-wrapper {
  	display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: -100 !important;
  }

@keyframes slideOut {
  from {margin-top: 0vh; opacity: 1;}
  to {margin-top: 100vh; opacity: 0;}
}
</style>

If it doesn't work, keep the code & add this to Design > Custom CSS

/* disable code on blog individual posts */
.view-item .splash-wrapper {
  	display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: -100 !important;
  }

 

Thanks!!

Link to comment
On 7/1/2021 at 3:34 AM, tuanphan said:

Try new code

<div class="splash-wrapper">
  <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_biy6osdk.json"  background="transparent"  mode="normal"  speed="1"  style="width: 480px; height: 270px;"  autoplay></lottie-player>
</div>

<style>
.splash-wrapper {
  position: fixed;
  z-index: 9999;
  background-color: #FFFFFF;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center !important;
  align-items: center;
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration: 0.5s;
  animation-delay: 2s;
}
  .view-item .splash-wrapper {
  	display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: -100 !important;
  }

@keyframes slideOut {
  from {margin-top: 0vh; opacity: 1;}
  to {margin-top: 100vh; opacity: 0;}
}
</style>

If it doesn't work, keep the code & add this to Design > Custom CSS

/* disable code on blog individual posts */
.view-item .splash-wrapper {
  	display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: -100 !important;
  }

 

Hey @tuanphan. How can I display a different animation on all of the blog posts but not the main blog list page? Thanks!

Link to comment
On 7/3/2021 at 8:08 PM, AllanYung said:

I used the custom CSS. The first bit of code didn’t load the animation. Thanks!

Add a new lottie file, eg this file

<div class="splash-wrapper-2">
  <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_biy6osdk.json"  background="transparent"  mode="normal"  speed="1"  style="width: 480px; height: 270px;"  autoplay></lottie-player>
</div>

note: change splash-wrapper to splash-wrapper-2

Next, add this to Design > Custom CSS

/* disable code on blog list page */
.view-list .splash-wrapper-2 {
  	display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: -100 !important;
  }

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.