CSS is a style sheet language used to define the look and formatting of a website. Conflicts can change the appearance of your Calendar or site, or can make items disappear altogether. While we create our CSS code so that conflicts will be kept to a minimum, conflicts will occur from time to time.
There are 2 types of conflicts:
1. An element of the calendar is being styled by CSS from a theme or plugin. In other words, the calendar appears strange in some way.
2. The CSS of the calendar is styling an element of a theme or plugin. In other words, the page appears strange is some way.
The quickest and simplest way resolve this issue is to use your web browser’s CSS inspector to inspect the misbehaving element’s CSS rules. Document inspectors are available in all modern web browsers - they’re part of the developer tools which are bundled with each browser and are usually opened by pressing F12. We encourage you to learn how to use your browser’s CSS inspector, as it is the most revealing method of determining how CSS is affecting an element.
1. Inspect the element using your browser’s CSS inspector (often by right-clicking the element and selecting Inspect Element).
2. If this is a conflict of the first type, you’ll want to inspect the calendar element which is being affected, and examine whether rules which don’t contain “timely” or are not from ?ai1ec_render_css=.... Note that there usually will be a couple rules which fit under the conditions of mentioned above but don’t affect the element.
If it’s of the second type, you’ll want to do the opposite; you’ll want to inspect the element which isn’t part of the calendar but is changed when the calendar is activated or otherwise present. Inspect the element and look for rules which do contain “timely” or are from ?ai1ec_render_css=....
3. If such a rule is found, attempt to disable or otherwise change the declarations and see whether that resolves your issue.
4. The offending rule or declaration won’t always be found on the first try - debugging such issues does take some time and patience. Also, understanding how CSS works does take some practice.
5. Once you’ve discovered the offending rule or declaration, you’ll have to change the theme or plugin’s CSS if it’s a conflict of the first type, or the theme or plugin’s HTML if it’s a conflict of the second type. In the first situation you’ll be removing the rule or changing it so it’s more specific and doesn’t affect the calendar’s elements. In the second, you’ll be changing the HTML and removing the class name which the calendar has rules for. Note that it is possible to change our plugin’s HTML or CSS to alleviate these conflicts, but that will usually be more complicated than changing the theme/plugin’s CSS or HTML.
Recently published
Contents
