Often it’s possible to style multiple components without any code. To do this you can style a single component and apply its styles to the Theme Appearance Settings. The Theme Appearance Settings apply the same style to all components of the same type (but they don’t overwrite any specific component level appearance settings if these have been set).

However, you may want to change a style that there is no Appearance Setting for. Or you may want to change the style of a subset of components (ie, you don’t want to use the Theme Appearance settings as this will change all of the components, just a few of them). To do this, you can add a custom CSS style to Fliplet’s Developer Options.

If you haven’t already, please read the article on adding custom styles to a single component. It will give you an understanding of how to add styles to an element.

A basic method for adding a style to a group of Fliplet components or HTML elements is to:

  1. Find the elements’ class name (or give them one if they don’t have one – see here)
  2. Use that class name to reference the elements in the CSS section of the Developer Options and apply a custom style there

However, there can sometimes be issues with this. Issues may arise when two different sections of CSS code are referencing the same element but applying different styles to it. The style that takes precedence (ie, the style that gets chosen) is based on rules known as CSS specificity.

Any custom code you add to your app is generally the last to load so overwriting other CSS styles typically isn’t an issue. But sometimes this doesn’t work.

One possible reason is that sometimes Fliplet uses two classes to refer to an element (one is related to the specific element and one is related to the element type). If you want to overwrite something with two classes you’ll need to use two classes as well (see the CSS specificity rules for details).

This can be further complicated if you are able to add a second class directly to the HTML element you’re interested in directly (for example when referencing an element that is deep within a component and not shown in the Developer Options HTML).

In this situation, you can add a class to a ‘parent’ element (ie, like a family tree, a parent element is one that is higher up the layout structure and contains the ‘child’ element you’re interested in. You should always be able to find a parent element in the Developer Options HTML).

You can then refer to the ‘child’ by using a combination of its parent’s class and its own class. The two classes referenced will comply with the specificity rules and allow you to add your custom styles.

To create a combined class reference using the parent’s class and the child’s class you should put the parent element class first and leave a space before adding the child’s class. See below:

.parent-class .child-class {
  ...
}