Add some holiday cheer to your site with custom css

Happy Holidays

Like those little bells? That’s done by applying some custom css to the Font Awesome bell icons that I placed before and after “Happy Holidays”.

If you’re using the CE4 plugins, then the Font Awesome code to place the bell is <i class=”fa fa-bell”></i>. (If you’re using CE3, then use <i class =”icon-bell-alt”</i>)
Place one of those before “Happy Holidays” and one after and you’ll have Happy Holidays with bells on. If you’re doing this on your Pages Home page, just enter it in the Home Page Copy(md) field.
To make the text bigger I wrapped it all in H2 header tags. I also want to give a little space between the bells and the words so I include a space before and after “Happy Holidays”, like so:

<h2><i class=”fa fa-bell”></i> Happy Holidays <i class=”fa fa-bell”></i></h2>

text in Lightroom text block

This is what you’ll see in Lightroom:

Happy Holidays with black bells, lightroom screen shot

But that makes for boring black bells (or whatever color you’ve selected for text in the plugin) on each side of the greeting. I want one red bell and one green bell. And I want the bells to swing back and forth. The red and green part is easy. You can do that with inline styling. And if you do this in Lightroom, you’ll see the colored bells:

<i class=”fa fa-bell” style=”color:red;”></i>

Or I can assign a custom class to each bell and style it from my custom css file. Since I need to add a class so I can target the bells with css animations, I might as well just add the color in the custom css too. So in Lightroom, in the Page Copy (md) block, I’ll assign a custom class to each bell:

<h2><i class=”fa fa-bell bellLeft“></i> Happy Holidays <i class=”fa fa-bell bellRight“></i></h2>

text block in Lightroom

Again, in Lightroom all you’ll see are those static black bells.

Now we’re going to get into some custom css. If you’ve not yet set up your site for custom css you’ll need to enable phplugins and then enable custom css from within the phplugins.php file.
In my custom css file, if I simply wanted to color the bells I would add the classes to my custom css file and style them with color:

.bellLeft {
color: red;
}
.bellRight{
color: green:
}

And if that’s all you want, you could stop there.

But let’s make those bells swing. I won’t go into the explanations of what all this does. If you want to know about css animations (and all sorts of other things about css, I recommend CSS3: The Missing Manual by David Sawyer McFarland). I will tell you that I set the rotation and animation time different for each bell. This is so they don’t just swing back and forth together. That would be boring. So now they each swing at a different rate and one swings farther than the other. so much more exciting, don’t you think? You can adjust those setting to your own liking.

Below is the code you need. The animations should work in all modern browsers. If you want to make sure it works in older browsers you can add the extra vendor prefixes on your own. Frankly, this is just for fun anyway so I’m not really concerned if the bells swing in older browsers.

/*Bell ring animations*/

@-webkit-keyframes bellringleft {
from {
-webkit-transform: rotate(20deg);
}
to    {
-webkit-transform: rotate(-20deg);
}
}

@keyframes bellringleft {
from {
transform: rotate(20deg);
}
to    {
transform: rotate(-20deg);
}
}

@-webkit-keyframes bellringright {
from {
-webkit-transform: rotate(-30deg);
}
to    {
-webkit-transform: rotate(30deg);
}
}

@keyframes bellringright {
from {
transform: rotate(-30deg);
}
to    {
transform: rotate(30deg);
}
}

.bellLeft {
color: red;
display:inline-block;
-webkit-animation: bellringleft 2.5s linear infinite alternate;
animation: bellringleft 2.5s linear infinite alternate;
}

.bellRight {
color: green;
display: inline-block;
-webkit-animation: bellringright 2s linear infinite alternate;
animation: bellringright 2s linear infinite alternate;
}

When the holiday season has passed you can simply remove the bell icons and change your text. In the custom css file you can either leave things as they are or you can comment out the code. If you leave the bell ring css as is, then next year all you’ll have to do is add in the Happy Holidays text along with the bell icons and custom classes. I just keep text files handy of all these kinds of code snippets so I can just copy and paste as needed instead of having to type it all over again.
To comment out the code, remove the trailing */ from after /*Bell ring animations*/ and place it behind the last closing curly brace at the end of the code.

See, wasn’t that easier than having to go outside and put up the lights?

And if you want to make it snow on your site, see Matt’s tutorial here.

1 thought on “Add some holiday cheer to your site with custom css”

Leave a Reply

Your email address will not be published. Required fields are marked *

About this site

This site is: a repository of time-savers and best practices from a user's perspective, picked up from several years of using TTG plugins.
This site is not: a support site.
Read more here.

Tip Jar

If this site has saved you some time, kept your hair attached, or otherwise prevented you from tossing the mouse through the monitor, feel free to donate.

Categories


Highly recommended. This is my go-to Lightroom book. Click on the book image. (affiliate link)

Affiliate link!

Current TTG versions

Backlight Versions

Backlight 1.2.2
Pages module 1.2.1
Cart Add-on 4.1.3
Client Response Add-on 7.1.2
Theater Add-on 1.2.1
WordPress Add-on 1.2.1
Publisher 3.2.2

CE4 Versions

TTG-BE: 2.0.5a
Autoindex: 7.0.8
Cart: 3.1.4a
CRG: 6.1.3a
Gallery: 6.1.9
Pages: 7.0.15
Publisher: 2.3.3
Stage: 6.1.6
Theme for WordPress: 3.1.2

Subscribe to new posts