{"id":1068,"date":"2019-07-06T11:57:47","date_gmt":"2019-07-06T11:57:47","guid":{"rendered":"https:\/\/webnus.site\/dox\/?p=1068"},"modified":"2023-10-31T11:21:25","modified_gmt":"2023-10-31T11:21:25","slug":"appearance-settings","status":"publish","type":"knowledgebase","link":"https:\/\/webnus.net\/dox\/modern-events-calendar\/appearance-settings\/","title":{"rendered":"Appearance Settings"},"content":{"rendered":"\n

Users can customize the main part of the modern event calendar according to their theme color branding by accessing the Appearance Settings in MEC<\/a>.<\/p>\n\n\n\n

You have the option to modify more than just the base color in the shortcode settings. You can also customize the title color, title hover color, and description color. Additionally, you can specify a particular font for headings and paragraphs or utilize the fonts from your theme. If you prefer, you can deactivate Google Fonts. Moreover, you have the ability to enable dark mode and adjust the container size.<\/p>\n\n\n\n

<\/span>Appearance Settings<\/span><\/h2>\n\n\n\n

To access the appearance settings, please navigate to MEC Settings > Appearance<\/strong>.<\/p>\n\n\n\n

\"Appearance<\/a><\/figure>\n\n\n\n

<\/span>Color Skin<\/span><\/h2>\n\n\n\n

In this section, you can change the base colors of the modern event calendar skins.<\/p>\n\n\n\n

<\/span>1- Predefined Color Skin<\/span><\/h3>\n\n\n\n

Users have the option to select from the recommended colors to use on their calendars.<\/p>\n\n\n\n

<\/span>2- Custom Color Skin<\/span><\/h3>\n\n\n\n

To select your preferred color, simply use this color picker tool.<\/p>\n\n\n\n

Note: <\/strong>If you want to select a predefined color skin, you must clear the color of this item<\/p>\n\n\n\n

<\/span>3- Dark Mode<\/span><\/h3>\n\n\n\n

You can turn the MEC-related parts of your website to dark mode by using this option.<\/p>\n\n\n\n

<\/span>Advanced Color Options (shortcodes)<\/span><\/h2>\n\n\n\n

<\/span>4- Title<\/span><\/h3>\n\n\n\n

You have the ability to specify the primary color of the event title in the shortcodes.<\/p>\n\n\n\n

<\/span>5- Title Hover<\/span><\/h3>\n\n\n\n

You have the ability to specify the color of the event title hover in the shortcodes.<\/p>\n\n\n\n

<\/span>6- Content<\/span><\/h3>\n\n\n\n

You have the ability to specify the main color of the event content in the shortcodes.<\/p>\n\n\n\n

<\/span>Typography<\/span><\/h2>\n\n\n\n

<\/span>7- Heading (Events Title) Font Family<\/span><\/h3>\n\n\n\n

In this option, you can specify the font family for the title of the event.<\/p>\n\n\n\n

<\/span>8- Paragraph Font Family<\/span><\/h3>\n\n\n\n

In this option, you have the ability to define the font family for the Event Content.<\/p>\n\n\n\n

<\/span>9- Disable Google Fonts<\/span><\/h3>\n\n\n\n

In order to comply with GDPR regulations, it may be necessary to turn off Google fonts. To do so, adjust the “Default Font” setting for the font family and activate this feature.<\/p>\n\n\n\n

<\/span>Accessibility<\/span><\/h2>\n\n\n\n

<\/span>10- Accessibility Options<\/span><\/h3>\n\n\n\n

To improve accessibility in MEC, you can enable the A11Y feature. For further details, please refer to additional information<\/a>.<\/p>\n\n\n\n

<\/span>Container Width<\/span><\/h2>\n\n\n\n

<\/span>11- Desktop Normal Screens<\/span><\/h3>\n\n\n\n

In this field, you can enter the size of your theme container to override it for regular screens.<\/p>\n\n\n\n

<\/span>12- Desktop Large Screens<\/span><\/h3>\n\n\n\n

In this field, you can input the size of your theme container to supersede it for bigger screens.<\/p>\n\n\n\n

<\/span>Other Styling Option<\/span><\/h2>\n\n\n\n

<\/span>13- Frontend Event Submission Color<\/span><\/h3>\n\n\n\n

From this option, you can set the primary color for the front-end event submission form.<\/p>\n\n\n\n

<\/span>14- Notifications Background<\/span><\/h3>\n\n\n\n

Within this option, you have the ability to establish a default value for the background color of notifications.<\/p>\n\n\n\n

Please Note: If you want to set a new font for MEC:<\/p>\n\n\n\n