Calendar box

We will configure Agenda Box:



  • Background color: you choose the background color of the agent, here #60C4EA, the same color as the title of the central boxes,
  • Free days of the week: in white so as not to overload,
  • Normal day: also in white, like the bottom of the boxes,
  • Today: color to indicate the current date, here #60C4EA,
         - Text color: a color that matches the background is white,
  • Sundays: the color of Sundays, here #B4EBFA
         - Text color: a background color, here #404040,
  • Today if Sunday: the color of the day on a Sunday, here #FFFFFFFF,
    Text color: a background color, here #0000FF,
  • Fonts (type of texts): the type of texts, you can choose between 7 families of fonts, here the second one is selected,,,
         - Style: choice of options,
         - Size: in the example 15px, you can also choose a slightly smaller font than in the skin,
  • Text color for numbers: the color of the diary numbers, here #00000000, but it could be #404040,
  • Text color for the day: a color matching the background color, here in white,
         - Background color: a color that will match the top part of the agenda, days of the week included,
  • Event: a bright color for your visitors to notice and see the event,
         - Background color: a color adapted to the background, here white for strong contrast,
  • Border spacing: in this skin, 0px, if you set 1px you will have a border on each date of the month,
         - Border size: for this skin, 0px, no borders,
         - Border color: you indicate the border color for the border, for this skin #60C4EA,
  • Radius of rounded corners: a size in pixels, e. g.6px, this will depend on the size of the area. 0px, no rounded corners.

Note: for Background color, no inherit because of the iframe of the calendar, you will display the background image of the site in the background of the calendar.

If you proceed line by line, looking at the result obtained after each modification, you should not have any problems configuring the calendar.

If you use rounded edges and corners, do it sparingly by customizing in styleplus. css, the result can be surprising.

Creation date : 09/05/2017 @ 16:45
Last update : 03/12/2019 @ 15:14
Category : - Tutorial Config look
Page read 21093 times