1 Adding CSS to Graphic
2 Create simple CSS file for beginners
3 Add CSS file
4 Overwrite Existing CSS file
5 Reuse Existing CSS file
6 Check if CSS file exists on Graphic
- 6.1 Check CSS file across all graphics
7 Deleting CSS file
8 SVG Fill Tip

Adding CSS to Graphic

In Graphics Builder, the user has the ability to drag and drop in any CSS file and it will automatically work within the graphic.

Below we'll be explaining how to:

Create simple CSS file for beginners
Add CSS file
Overwrite Existing CSS file
Reuse Existing CSS file
Check if CSS file exists on graphic
Deleting CSS file
SVG Fill Tip

Create simple CSS file for beginners

First, to apply CSS styling on a graphic, we'll need a CSS file containing those styles. Below is a simple example of how to create a CSS file with a couple items such as changing cursor type and background color.

In our example below, a customer wanted to know if they could change the cursor to a "hand icon" when they mouse over a clickable object and change background color on some objects when mousing over them.

To do this, the user can go do a Google search for "cursor css". We selected the second result from W3Schools, which took us here: http://www.w3schools.com/cssref/pr_class_cursor.asp. From there, we can find the available properties for the cursor.

In their Example, they have a button "Try it Yourself >>" that will then take you to another page where it'll show you examples as you mouse over each different type of property on the right side. Check it out here. The user can check to see which one they would like to use. In our case, the cursor property we are looking for is "pointer". Another way to check each one is to open an online code editing source such as CodePen to see the changes live. Once in CodePen, select "+New Pen" at the top right corner.

Once there, you can add some simple HTML text with a class name being what you would like your new CSS style to be called. This is just to have something to use as a place holder and check the CSS changes you want as you create them.

In this example, we added "<div class = "cursorChange bkChange">Check this out!</div>" inside the HTML editor box. Our class names we chose are "cursorChange" and "bkChange". You can see that this line of code generates "Check this out!" in the console below it. When you mouse over it, it still does the normal thing because we haven't yet defined what our class does.

Now we want to define what our classes do. So we add the below code inside the CSS editor box. We are specifying our class names we chose which are "cursorChange" and "bkChange" following a dot/period before it. Then define what it does inside the curly brackets. In this case, we want the cursor to change to the "pointer" property so we specify it as "cursor:pointer;". Then we want to add the second class to change the background to light blue when mousing over the text. The class for "bkChange" will include hover as well. Notice, that "hover" has to follow the class name with a colon. The property to change is "background-color" so it should be "background-color: lightblue;". They should look like below. Once you add them, you can mouse over the "Check this out!" text in the console and see the hand icon and background change once moused over.

.cursorChange{
  cursor:pointer;
}

.bkChange:hover{
  background-color: lightblue;
}

Now that we have figured out what we wanted, now all we need to do is copy the CSS code only and paste that on a text/code pad/editor and save it as a css file type or change the extension from .txt to .css.

Thats it, now we have our own CSS file we can save and use on our graphics.

Add CSS file

Now that we have our CSS file, we can then just drag and drop that file into Graphics Builder. That will automatically add it to your FIN Files. Now you can add the "cursorChange" and/or "bkChange" class to any component that the properties can be applied to and it should now switch the mouse pointer to a hand icon and/or change background color to light blue when you mouse over it.
Another way to upload the file without Graphics Builder is Folio → Menu → Files → Upload File.

Don't add the same CSS file multiple times. Look at the "Check if CSS file exists on graphic" section on how to check if there are multiple if you think you accidentally added more.

Standard label with no class

Label with only cursorChange class

Label with only bkChange class

Label with both cursorChange and bkChange classes

Overwrite Existing CSS file

If the user wants to overwrite the existing CSS file with same name but with their new changes, they need to overwrite the existing file through Folio app not drag and drop again. Dragging and dropping again would create another file in Folio with the same name but different id. You would then need to remove the one you don't need/want in both the graphic first then in folio files.

With that said, the user would go to Folio → Menu → Files → CSS → and select the CSS file you want to overwrite. Once selected, a slider menu will appear where the user will select the "Overwrite" option.

After overwriting the existing CSS file, the user needs to clear their cache to see the new changes and thats it.

To check the CSS file itself after clearing cache, the user can select "Backup" option and it'll open the file in a new window. The user can then see the file classes there.

This is basically opening the file. Here is the file path after the host ip (just add your projName and file id): /api/demo/rec/p:demo:r:2245469a-cb3ed202/file

Reuse Existing CSS file

If the user wants to reuse their current existing CSS file, they can do so by importing the file through the Assets window. Don't drag and drop CSS file on graphic again because it'll create a new separate file, not overwrite existing one.

The user would select the Assets icon to open the Assets window.

Then the user can select the CSS file from there to import.

Check if CSS file exists on Graphic

To check if a CSS file exists on a graphic, the user can use the Query Control window to query for the CSS file.

The user would select the Query Control icon at the top header bar.

Then query for "style" to find the CSS file.

Check CSS file across all graphics

If the user wants to find out which graphics are using a particular CSS file, they can do so following the below steps. That way the user can know which graphics have it and can be affected if CSS file is removed. Look at the "Deleting CSS file" section first before deleting a CSS file!

First, in Folio app, query for the CSS files available in the database by using this: readAll(file).findAll(x=> x→file.toStr.contains("css"))
Then copy the id of the CSS file you would like to search for in the graphics. You can find the id if you select the 'i' icon on the left side of the record returned.
Then run this query but replace the id with the one you copied in step 2: readAll(fin5).findAll(x=> x.readFinFile.find(y=> y["src"].toStr.contains ("@p:demo:r:2650abda-202eff25")) != null)
That would return you the list of graphics that have that CSS file if any. Now you know which graphics to open and delete the CSS file if needed.

Deleting CSS file

If the user wants to delete the CSS file to replace it completely instead of using the overwrite method above or just to completely get rid of it, they would first have to get rid of it in the graphic then the database.
First open the graphic that has the CSS file you wish to delete and using the above method to check for it. Then once you find the CSS file, scroll to the far right and select the "trash" icon to remove it from the graphic first.

Then save the graphic. Now that graphic doesn't have a reference to the CSS file in the database. You can now delete the CSS file from the database in Folio files (Folio → Menu → Files → CSS).

Not deleting CSS file from the graphic first will break your graphic because it relies on that file. Without that file, that graphic doesn't know what to do and so it breaks. We'll look to add an exception to not have it break if that file doesn't exist.

SVG Fill Tip

For SVG fill properties, the Graphics Builder property will override the CSS due to how this was designed. To remove or make the fill property on the SVG component so that we can apply the CSS class to it, we created the program below that runs on the world. This will only be executed once and that is when the graphic is first loaded. Then the CSS will apply to the SVG. You can modify if needed, but below program will be applied to all SVGs. If you want only certain SVGs, you can add a unique tag to those and include that tag in the program.

Program Name = Remove SVG Fill
Filter = world
Code = queryAll('svg and fill').forEach(function(itm){ itm.fill = undefined; });