What is CSS?
CSS (Cascading Style Sheets) is a way to add styling to your web page – things like colors, fonts, spacing and positioning. One of the great things about the Yeeflow designer is that it allows you to add many of these styling elements without knowledge of CSS. However, pro users with CSS knowledge can add custom CSS, giving their pages a unique look and feel.
Where can you add Custom CSS in Yeeflow?
Yeeflow allows you to add Custom CSS at three different levels:
Application Level: From application settings, navigate to the Custom CSS settings page. Adding custom CSS here will affect your entire application:
Page Level: From one of the approval form designer, list form designer or a dashboard page designer, click the page tab of the controls panel. You can find the Custom CSS group. Adding custom CSS here will only affect a specific page
Control Level: Select each control from the designer, from the properties settings panel, navigate to Advanced tab. You can find the Custom CSS group. Adding custom CSS here will only affect a specific control
Use selector in the control level custom CSS
Use “selector” to target a wrapper element.
For example, if you’ve placed an image (or any child element) in a column, you may want to style either the wrapper surrounding the image, or the image itself.
Let’s place a solid 5px red border around the various controls to see what happens.
First, drag a Picture control into a column, and go to Picture > Advanced > Custom CSS
Now, in the Custom CSS tab, enter the following:
selector { border: 5px solid red; }
Because you are editing the Picture control, you might be surprised to discover that the border does not surround the image at all. Instead, it surrounds the wrapper element, which in this case, is the column that the image is within.
To specify the child element, or in this case, the image, enter the following into the Custom CSS instead:
selector img { border: 5px solid red; }
This will place the border around the image because you’ve specified that it should affect the “selector img”.
Enjoy using selector whenever you want to quickly add Custom CSS to target that control’s wrapper.