Design – Style Editor

Style Editor is located under My Calendar > Design > Style Editor.

Style Editor

Select My Calendar Theme.

CSS Style Options

Load CSS only on selected pages.
Disable My Calendar CSS.
Edit a My Calendar stylesheet.

CSS Variables

Change the primary, secondary, and hightlight colors.

Select My Calendar Theme.

Choose a theme and click the Preview Stylesheet link that will be seen under the drop down. These are the themes that currently can be selected.

twentytwentytwo.css

Adds support for modal views.

twentytwentyone.css

twentytwenty.css

A more minimal design theme than twentyeighteen.css, but still a full layout. New default them with 3.2.0.

When you upgrade My Calendar, your current stylesheet is retained. You can restore your stylesheet to a default stylesheet at any time, and can always compare your current version of the stylesheet to the version included with the plugin, to see if any changes have been made

Store your styles in a custom directory and protect it from being overwritten when updating the plugin. If the directory exists /wp-content/plugins/my-calendar-custom/styles/ and contains stylesheets, those stylesheets will be added to the list of available styles to work with.

twentyeighteen.css

An updated version of twentyfifteen.css, it supports any combination and order of navigation elements, unlike previous themes. Default theme with version 3.0.0.

Deprecated styles

• dark.css
• light.css
• refresh.css
• my-calendar.css
• twentyfourteen.css
• twentyfifteen.css

Several of the older stylesheets were deprecated in version 3.4.0, and are no longer available to be selected in the plug-in. The stylesheets can be found in the GitHub repository for My Calendar, but if you choose to use them from your custom stylesheet directory you will probably need to customize them.

CSS Style Options

Load CSS only on selected pages

If you only want to load the theme CSS on specific WordPress post ID’s. Add the ID’s into the text field. One way to find the Post ID is by right clicking inside the browser and selecting Inspect (Element) and HTML and CSS areas should show up on the bottom. At the top inside the HTML area one will be able to see postid-(and a number). This postid number would then go into the “Apply CSS on these pages” field.

Disable My Calendar CSS

This will disable the default My Calendar Stylesheet so that you can use your own Stylesheet. Add a custom directory to store your various customizations. In /wp-content/plugins/my-calendar-custom/styles.

Example. In the plugins directory I made “my-calendar-custom” folder and inside another folder “styles”. I went to my-calendar plugin, located the styles folder and duplicated twentytwentyone.css stylesheet into my custom styles folder. I gave the stylesheet a new name “custom-calendar.css”.

In the Design > Style Editor section I clicked the checkbox “Disable My Calendar CSS” and at the bottom of the page clicked “Save Changes”. Refreshed the page. Clicked the “Select My Calendar Theme” drop down and noticed my custom calendar visible at the top of the list. (Refresh a couple of times if you have not seen your own custom stylesheet show in the drop down list.)

I selected my custom-calendar.css, clicked “Choose Style” button and noticed the following screen.

CSS variables can be changed, and you can also add new variables to be used in your stylesheet. To view default themes again. Uncheck “Disable My Calendar CSS” checkbox and click “Save Changes”. Then select one of the default themes and click “Choose Style”.

Edit a My Calendar stylesheet.

One can modify any of the theme stylesheets.

In the following example I added the comment /* My test */ to the twentytwenty.css stylesheet. I then clicked the “Save Changes” button. The following notification came up.

Clicking the text link “Compare Your Stylesheet with latest installed version of My Calendar.” Will show a comparison between the Current (in use) and the Latest (from plugin). Showing the adjustment I made in the Current (in use) column.

Clicking the checkbox – “Reset stylesheet to match core version” and then the “Reset Styles” button will revert the stylesheet back to the Latest (from plugin) version.

Clicking “Return to editing” will keep the change that has been made.

CSS Variables

CSS or custom variables were introduced in twentyeighteen.css, and are not present in earlier stylesheets. Only twentyeighteen.css, twentytwenty.css or newer stylesheets contain CSS variables.

Modify the primary, secondary and highlighted colors used throughout the calendar.
One can also add additional CSS variables.

Accessible Color Combinations overview. Shows which colors are accessible with each other and meets the (WCAG) Web Content Accessibility Guidelines.

An example showing how the CSS Variables are used in the calendar. I am experimenting with the twentytwentyone.css stylesheet.

Calendar seen on the frontend.

CSS Variables are independent of the stylesheet. The colors selected for each variable will affect all the stylesheets where the variable is used.

Here is an example method on how variables are included in the twentytwenty.css stylesheet. Impacting the table header.

/* Calendar table header: Mon, Tue, Wed, Thu, Fri, Sat and Sun. */
.mc-main th {
font-size: 16px;
line-height: 1.5;
text-align: center;
padding: 4px 0;
background: #fff !important;
background: var(--primary-light) !important;
color: #313233 !important;
color: var(--primary-dark) !important;
border-bottom: 1px solid var(--primary-dark);
}

Above the primary light (white) and primary dark (black) colors have been added to the background color, text color and border bottom. A variable can be added in any place and as many times as the specific variable is needed. We can also create additional CSS variables along with selecting the color to be used.

Next: My Calendar > Design > Templates.