The Customization

Goodmorning.js can be styled in your css files targeting the time with a class of timeDisplay and the icon with a class of sunriseIcon. I have included a .css file with some default styling as well if you like. You can also customize your goodmorning.js plugin by choosing the time of day at which you would like to display each message. You can also choose to turn icons on or off and implement Friday or Monday modes. The following chart outlines the different options to personalize your goodmorning.js.

  • Setting
  • Input Value
  • Display
  • Icon
  • Default
  • settings.morning
  • time (24h clock)
  • Good Morning
  • sun
  • 7h
  • settings.noon
  • time (24h clock)
  • Good Afternoon
  • sun
  • 12h
  • settings.evening
  • time (24h clock)
  • Good Evening
  • sun setting
  • 18h
  • settings.night
  • time (24h clock)
  • Good Night
  • moon with stars
  • 22h
  • settings.monday
  • true/false
  • Happy Monday
  • coffee
  • true
  • settings.tgif
  • true/false
  • Happy Friday
  • cocktail
  • true
  • settings.icon
  • true/false
  • icon displayed
  • as indicated
  • true

And Good Night

Goodmorning.js was made possible thanks to the glorious SVG images of LuboŇ° Volkov, hunotika, icons mind, and YEJIN!

Thank you for checking out goodmorning.js.

Happy coding!

- J