holiday theme

From IndieWeb
(Redirected from πŸŽ„)

A holiday theme is a temporary custom CSS or other change in a website typically meant to visually indicate the celebration of a holiday or special occasion.

Why

A holiday theme is a way of celebrating the holidays that you care about. Similar to how people hang up special decorations for particular holidays, some like to decorate their digital home with a temporary theme.

IndieWeb Gift Calendar

Looking for the latest seasonal end of year IndieWeb Gift Calendar? See:

How

A holiday theme may include:

  • Changes to the styles of a website (such as a colored background)
  • An announcement banner informing people of a special occasion

IndieWeb Examples

Chris Aldrich

  • Chris Aldrich has previously made small changes to background elements to indicate the celebration of particular holidays
    • Christmas 2016 - added an "Ugly Sweater" background to the typically black frame around his page as well as a snow-effect (via JetPack) for the month of December to celebrate the end of year holidays.
    • Ugly Sweater Holiday Border

Aaron Parecki

Aaron Parecki celebrates a few holidays on his website:

  • πŸŽƒ pixel grid turns orange and black, and the background map changes to orange theme during the month of Halloween

See also Aaron Parecki’s entry in the birthday examples

Eddie Hinkle

  • Eddie Hinkle added confetti that drops on a timer on eddiehinkle.com on New Years Eve, New Years Day and January 2nd.
    • New Year’s Confetti Dropping
      New Year’s Confetti Dropping

capjamesg

capjamesg has made a few holiday updates to his site:

  • πŸŽƒ Celebrated Halloween by adding a spooky banner and changing the emoji in his blog's name to a pumpkin (since Halloween 2021)
  • On November 27th, 2021, in anticipation of December, capjamesg updated his website to use a Christmas theme, pictured below:
    • James' website with banner and border colours changed to red and green in some places
      James' website with banner and border colours changed to red and green in some places

See also capjamesg’s entry in the birthday examples

Anthony Ciccarello

Anthony Ciccarello added a red and green color theme and animated snowflakes to his website during December 2021-2023

Mark Sutherland

Mark Sutherland switches his site to a red and white christmas theme that includes a number of over the top and cliche xmas elements which has been used in 2022 & revised in 2023

white and white christmas theme website

Silo Examples

WordPress

Github

  • πŸŽƒ Since about 2017, GitHub changed the colors of their standard contributions calendar visualization from green to shades of yellow, oranges, and black to celebrate Halloween

Facebook

Google

  • Has previously done custom overlays on pages in celebration of their birthdays

Twitter

  • πŸŽƒ For Halloween, users will often change their display name to a play on spooky words often along with emoji including pumpkins, ghosts, spiders, webs, or other holiday related emoji. See Halloween#Twitter for more details.
  • Some users will do a similar play on their names and emojis for Christmas as well
    • examples requested

Letterboxd

  • πŸŽƒ For Halloween, Letterboxd changed their three circle logo to give each circle a scary, ghostish face and animate it to appear as if it was slowly dripping blood. See Halloween#Letterboxd for more details.

Brainstorming

Holiday emojis

There are a number of emojis that primarily mean a specific holiday, listing those here:

  • πŸŽƒ β€” Halloween
  • πŸŽ„ β€” Christmas tree
  • πŸ•Ž β€” Hanukkah menorah (note nine lamps in at least the MacOS/iOS version)
  • ...

There are many more emojis that have a broader meaning but are sometimes used as shorthands for holidays. Those are too broad to list in entirety, however a few are liste here from past mentions on this page, or when used by community members:

  • πŸͺ” β€” diya lamp, used for many ceremonial purposes, including Diwali (also known as Deepavali and Divali)
  • 🧧 – red envelope, red gift envelope, or red packet, used for giving money at weddings, and Chinese New Year
  • ...

Highlighting colors

Inspired by the CSS-based counter display at https://www.pinknews.co.uk/ one could implement highlighting colors for either personal branding or for holiday decoration. It has a clever little hack such that when you highlight across multiple paragraphs it gives each paragraph a different color for a rainbow effect.

Screencapture from article showing multiple paragraphs which are highlighted in a rainbow of different colors.

It's done with a set of styles like: p:nth-child(6n+5)::selection { background-color: blue }

Basically, for every <p> element in the main body of text it just cycles through 5 or 6 possible background colours, using the ::selection pseudo selector (?) to only appear when highlighted and nth-child to target each paragraph differently.

Ideas:

  • Pastel colors for Spring/Easter
  • Red, white and blue for Fourth of July?
  • Orange/black for Halloween?
  • red/white for candy canes or Red/Green in December

This could also be used to spice up one's fragmentioner as well.

See Also