CSS Animation for Dummies

For support and discussion related to templates and themes in phpBB 3.3.
Jocu
Registered User
Posts: 11
Joined: Wed Nov 15, 2023 4:05 pm

CSS Animation for Dummies

Post by Jocu »

Hello! I am not an expert so please bear with me, I use Elementor to design my website and have a PHPBB forum and am wondering if it's possible too steal some code from the former to use on the latter.

Elementor have a basic snowflakes animation that looks really nice on my site, I'd like to see if I can use it as an alternative to the larger snowflakes offered by the popular plugin for PHPBB boards.

It was simple enough on Elementor - copying their free to use code into the page's custom CSS section and then adding the CSS tag 'snow-bg' to any element of the site.

As it was pretty much just copy/paste, I was wondering if there was a way of copy/pasting such a code into the forum style somewhere without too much trouble or editing?

The code is below:

Code: Select all

.snow-bg {
   position: relative;
}

.snow-bg:after {
   content: '';
   display: block;
   position: absolute;
   z-index: 2;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none;
   background-image: url('https://library.elementor.com/resources/christmas-snow-effect/s1.png'), url('https://library.elementor.com/resources/christmas-snow-effect/s2.png'), url('https://library.elementor.com/resources/christmas-snow-effect/s3.png');
    animation: snow 10s linear infinite;
}

@keyframes snow {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
Perhaps I'm barking completely up the wrong tree and if so, do tell me :)
User avatar
Mick
Support Team Member
Support Team Member
Posts: 26677
Joined: Fri Aug 29, 2008 9:49 am

Re: CSS Animation for Dummies

Post by Mick »

This is a question for the styles forums, I’ll move this for you.
  • "The more connected we get the more alone we become" - Kyle Broflovski©
  • "The good news is hell is just the product of a morbid human imagination.
    The bad news is, whatever humans can imagine, they can usually create.
    " - Harmony Cobel©
🇬🇧
Jocu
Registered User
Posts: 11
Joined: Wed Nov 15, 2023 4:05 pm

Re: CSS Animation for Dummies

Post by Jocu »

Mick wrote: Mon Dec 04, 2023 9:26 am This is a question for the styles forums, I’ll move this for you.
Thank you! Sorry about that
User avatar
Mannix_
Registered User
Posts: 1933
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt

Re: CSS Animation for Dummies

Post by Mannix_ »

Just put that css code in any of the css file of your style and then add that .snow-bg class to an html element (by editing the html file of your style) you want that effect to appear.

This link might be helpful for you phpBB • [GUIDE] How to edit any part of the theme with ease!
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
Jocu
Registered User
Posts: 11
Joined: Wed Nov 15, 2023 4:05 pm

Re: CSS Animation for Dummies

Post by Jocu »

Mannix_ wrote: Mon Dec 04, 2023 9:30 am Just put that css code in any of the css file of your style and then add that .snow-bg class to an html element (by editing the html file of your style) you want that effect to appear.

This link might be helpful for you phpBB • [GUIDE] How to edit any part of the theme with ease!
Thank you! I'll give it a go.

I imagine the elements of the board are divided up into the various sections. Is there a particular element that would cover the user's entire screen?
User avatar
Mannix_
Registered User
Posts: 1933
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt

Re: CSS Animation for Dummies

Post by Mannix_ »

Jocu wrote: Mon Dec 04, 2023 9:38 am Is there a particular element that would cover the user's entire screen?
body element in overall_header.html
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!

Return to “[3.3.x] Styles Support & Discussion”