The style sheet, available behind the "Calendar" tab, is reserved for experienced Internet users who wish to create a very specific calendar.
Before using the style sheet, you must first know:
- The examples of calendars offered on this site
- personalization options available with the tabs above each calendar.
With the style sheet, you can finalize the customization of your calendar, in order to obtain exactly the one you are looking for.
Using the style sheet, which requires careful reading of this documentation page, allows you to define specific presentations, which are not provided with the various drop-down lists present behind the "Month" tabs. ;, " Boxes", "Photo" and "Caption".
The style sheet syntax (CSS) used by web designers will become clearer to you if you read this tutorial.
Stylesheet syntax
To modify the style (color, size, effect, etc.) of one or more calendar elements, you must first know either the name of this element, if it is unique (for example "The calendar" or "The photo" or the "Caption"), or the class of elements, if there are several (for example "The boxes" or "The numbers of the days" or "The names of the days" or "The names of the holidays" or "Each monthly calendar of the annual calendar". You must then describe the style to apply (text color, background color, size, font, shading, frame, margin, rotation, etc.).
- The general syntax is as follows:
selector{property:value; property:value;...}
- The selector defines the element(s) on which we wish to apply the style (calendar, photo, caption, boxes, etc.), and the property/value pairs, between an opening brace ({) and a brace closing (}), define the style(s) to apply (color, size, etc.).
- The syntax for the selector is generally as follows:
#element if the element is unique, or
.class to apply formatting to multiple elements.
See below for the list of selectors. - For each selector, we can therefore define one or more property/value pairs.
-
The property defines the type of layout to make ('color' for the color, 'font-size' for the character size, 'background-color' for the background color, 'margin -left' for left margin, etc.)
For the 'color' and 'background-color' properties, choose from the list of colors.
Certain properties (for example color gradients) are only operational with the latest versions of browsers, in particular for Internet Explorer. - The value applies to the property, for example 'green' for the 'color' and 'background_color' properties, or '10px' (px=pixels) for the 'font-size' and 'background_color' properties. 'margin-left'.
The value is always followed by a semicolon (;)
For those who have already read this tutorial and want to know more, the site 'Developpez.com' gives the list of properties and the corresponding values. -
The property defines the type of layout to make ('color' for the color, 'font-size' for the character size, 'background-color' for the background color, 'margin -left' for left margin, etc.)
- Examples :
Rotation (tilt) of the calendar.
Rotation is defined in degrees. Applying a margin avoids overlaps.
Size and color of the day number.
A percentage size indicates the percentage to apply in relation to the character size defined in the 'Boxes' tab. Optionally increase the width in the 'Boxes' tab.
List of selectors (calendar elements) to which a style can be applied.
The examples provided below for each element are for reference only, and you can modify the values before applying the style.
The 'Apply...' buttons allow you to apply the style either to the last calendar viewed (current calendar), or to a specific calendar.
To apply a style to a calendar other than the one proposed below, copy the style, display the calendar, click on the 'Calendar' tab and paste the style into the 'Style Sheet' input box.
The page (calendar, photo and caption) : #calobjets
Example: black border around monthly calendar and photo.
Optionally adjust the transparency of the photo to match the black background of the calendar.
The calendar : #mon_cal
Shadow cast on calendar frame.
Second border around the calendar.
This is an additional border to the one defined in the 'Calendar' tab. This border will be superimposed on the drop shadow if it exists.
Linear color gradient for calendar background.
Also delete the calendar background.
Margin at the bottom of the calendar (for handwritten notes).
Adjust the value (200px) so that when printed, the calendar fits on one page.
Text at the bottom of the calendar (calendar footer).
The photo : #photo_img
Shadow cast on the photo.
Rounded photo.
In the 'Photo' tab, the border style should be 'Normal'.
The Caption : #legende_contenu
Shadow cast on the caption.
Caption tilt.
Optionally use your hand to move the calendar and legend.
The title : #tr_titre1
Example: shadow cast on the calendar title.
The activity report : #divrapport
Example: Size and color of the periodic activity report.
A specific day : #J_aaaa_mm_aa
Example: red border on the December 25, 2024 box, with a height of 100 pixels.
Without adding '!important', the height defined in the 'Boxes' tab would be applied.
Each calendar month : .un_mois
Example: Tilt and shadow on the months, for example for a 3D effect on an annual calendar.
Add if necessary an external margin in the 'Month' tab and a margin in the 'Calendar' tab.
A specific month : .cal_mois[data-mois='m']
Example: Add a green frame to the month of February.
This border will be overlaid on adjacent elements.
Even months of the bimonthly calendar...
Example: reserve a space for a different photo on each month of a bimonthly table calendar.
To add the photo: 'Month' tab, Background: different each month..., choose a photo for each month as a background, then position and size it.
Calendar boxes : .un_jour
Box inclination.
If necessary, add an outer margin and rounding to the boxes.
Round boxes only at top right.
In the Boxes tab, specify a border size, color and normal style.
Added spacing for handwritten notes above the first day of each month, on a columnar calendar.
Sunday boxes : .case_jour_7
Example: radiant color gradient for the background of the Sunday boxes.
The titles : .case_titre
Example: 3D effect (roller) on the boxes containing the names of the months and the general title of the calendar.
Names of the months : .titre_mois
Left alignment of month name.
Color of the link on the name of the month.
Without adding '!important', the default color would be applied to the link.
Add 'Month of' in front of the month name.
To add the text after the month, replace 'before' with 'after'.
Day numbers : .h_numjour
Number of days in bold with a size of 120% compared to the size indicated in the Boxes tab.
Display of the day number on the left, instead of the day name.
Border to the left and right of the day number.
In the 'Boxes' tab, the alignment must be left or centered..
Names of days : .h_nomjour
Example: color of the name of the day.
Names of Saints : .h_nomfete
Example: saints in italic.
Personal data : .h_agenda
Background color for personal data (diary, birthdays, names to wish for.
To see the result, enter a calendar data, a birthday, a name to wish. The drop-down lists must be positioned on 'Show details' or 'Show text' in the 'Data' tab.
Personal calendar data : .jour_agenda
Color for agenda data.
To see the result, enter calendar data, and the 'Diary' drop-down list must be positioned on 'Show details' in the 'Data' tab.
Birthdays : .jour_anni
Color for birthdays.
To see the result, enter a birthday, and the 'Birthdays' drop-down list must be positioned on 'Show text' in the 'Data' tab.
First names to wish : .jour_fetes
Color for names to wish.
To see the result, enter a name to wish, and the 'Names to wish' drop-down list must be positioned on 'Show text' in the 'Data' tab.
Activity tracking borders : .h_liseret
Customize the border dimensions.
For more information: Activity management.
Custom Calendars : https://calendar.calagenda.global