holiday theme

This article is a stub. You can help the IndieWeb wiki by expanding it.

🎃🎄🎂 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. Like how one would hang up a Christmas tree to celebrate Christmas, one may decide to decorate their digital house appropriately when a special occasion is coming up or has arrived.

IndieWeb Gift Calendar

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

• IndieWeb Gift Calendar

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

Eddie Hinkle

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

• He also supports weather effects as a theme as of 2018-11-15

capjamesg

James has made a few holiday updates to his site:

• Added a banner to his website that displays his birthday on his website. The countdown was manually updated three days in advance of his birthday.
  • 

• Celebrated Halloween 2021 by adding a spooky banner and changing the emoji in his blog's name to a pumpkin.

• On November 27th, 2021, in anticipation of December, capjamesg updated his website to use a Christmas theme, pictured below:
  • 

Aaron Parecki

• The home page shows animated balloons on his birthday since 2016
• The pixel grid turns orange and black during the month of Halloween
• The background map changes to orange theme during the month of halloween

Silo Examples

WordPress

• WordPress.com has previously enabled an option to allow virtual snow to fall as an overlay on user's pages
  • JetPack has an extension for WordPress.org self-hosted sites to do this
  • There are also a variety of plugins that allow this type of funcitonality as well.[1]

Github

• For Halloween 2017, 2020, (and possibly others?), GitHub changed the colors of their standard contributions calendar visualization from the traditional shades of green to shades of yellow, oranges, and black to celebrate Halloween

Facebook

• Customization for birthday celebrations
  • need examples

Google

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

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.
  • Example: Jillian York has documented being quoted in the New York Times as having done this with friends in 2013: https://jilliancyork.com/2013/11/01/thats-yikes-chillian-j-yikes/
  • Examples: Chris Aldrich wrote about several people who did this in 2017: https://boffosocko.com/2017/10/27/halloween-flavored-names-on-twitter/
• 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.

Brainstorming

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

• fun
• CSS
• https://twitter.com/ChloeCondon/status/1319830109692411905
  • "For the month of October, plz don't say you have "bugs" in your code, instead say "my code is haunted", thanks!!!! 👻🏚️🎃🦇🦴👩🏼‍💻👻🔮💾" @ChloeCondon October 24, 2020
• IndieWeb Gift Calendar
• 2017-10-27 Chris Aldrich Halloween flavored names on Twitter
• CSS Naked Day