style.css

With style.css you can affect how your svg symbols look in different states. You can also create a unique graphical standard for your headers, texts and tags for each symbol. Every library has its own style.css. When creating styles in this file it is important to name the “paths” to the classes correctly.

Example 1

Here is an example of a “path” to a class can look:

  .fastighet-svg.Fan.on .ind_on {
                fill: #23d879;
  }

.fastighet-svg is the name of the library
.Fan is the name (ID) of the symbol
.on is in this case a state
.ind_on is the class set on the specific element of the svg image. In this example we switch color of the element when the state is “on”.

Another thing you can do with style.css is to set unique text styles for your symbol library. If you want to create a generic style throughout all symbol libraries you should instead add the style in /assets/theme/style.css.

Tip!

You can edit the standard color for all suffixes. On the local computer go to your web port directory/assets/theme/style.css and open it. Here you can change what color each suffix should be presented in under a symbol.

There are example classes in these files which shows how to change the text styles. Below follows another example:

Example 2

  .fastighet-svg.WpCompV2 .wpCompText .NAME
  {
  font-weight:bold;
  }

In this example we change the header on all symbols to bold.

Here is a list of standard classes:

Class	Description
.fastighet-svg.WpCompV2 .wpCompText .NAME	header style
.fastighet-svg.WpCompV2 .wpCompTag	description and tag value style
.fastighet-svg.WpCompV2 .wpCompTag .wpCompDescription	value description style
.fastighet-svg.WpCompV2 .wpCompTag .wpCompTagValue	value style
.fastighet-svg.WpCompV2 .wpCompSelectBox	style for the box containing the symbol and all its texts
.fastighet-svg.WpCompV2 .wpCompImage	style around the symbol