Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Page Header Code Injection for Blog List affecting all Blog Posts


AllanYung

Question

9 answers to this question

Recommended Posts

  • 0
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
  • 0
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;
  }

 

Link to comment
  • 0
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
  • 0
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
  • 0
15 hours ago, AllanYung said:

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

In above code, which code did you add? I can give code easier.

Link to comment
  • 0
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;
  }

 

Link to comment
  • 0
Posted (edited)

I'm looking to customize my weblog posts so some of those elements, like classes, show up in a extraordinary area than the default. Since ".Blog-meta-object–classes" is the detail, is it possible to code this into an HTML block to insert this meta statistics where I would really like?

Edited by danialev
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...