Customizing Sonia Styles with CSS

Introduction: 

Disclaimer: Using CSS to style Sonia web applications is not supported by Sonia Support and is done at your own risk.

• CSS (Cascading Style Sheets) controls the appearance of web pages, including colors, fonts, text size, spacing, layout, backgrounds, and responsive design.

• CSS can be applied in three ways:

  • Inline: via the style attribute in HTML elements

  • Internal: via a <style> element in the page <head>

  • External: via a <link> to a CSS file

• Examples will use Internal styling to style Form action buttons.

• Tip: Add styles outside the button itself, ideally on the first text field in the form, so it’s easy to locate and adjust as the form grows.

 

 

After clicking to edit the description, make sure HTML editor view is selected.

 

You must define any of your styles within style tags: 

<style type="text/css"> 

 enter/paste changes in here 

</style> 

 

Note: you can define multiple styles within a single set of style tags. 

Once you have clicked into the HTML editor view, you can either enter or copy/paste the following style definition: 
<style type="text/css"> 

    .RadButton_Metro.rbSkinnedButton, .RadButton_Metro.rbVerticalButton,  .RadButton_Metro.rbLinkButton, .RadButton_Metro .rbSplitRight, .RadButton_Metro .rbSplitLeft { 

        border-color: RGB(34,116,71); 

        color: RGB(254,254,254); 

        background-color: RGB(34,116,71); 

    } 

    </style> 

 

Note: the colours defined in the style use a system called RGB. This stands for Red Green and Blue.  To work out your own RGB colours, you can make use of many online resources such as the following website:  

https://www.rapidtables.com/web/color/RGB_Color.html  

 

You should now see the following in the description editor: 

 

Once the Form is saved with your style, when you view this in Sonia Online, the action buttons on the Form should appear as follows: 

 

Removing Borders and adding padding to Form tables  

Like with the Form action button, to remove the borders and add padding to Form tables requires it to be within style tags. 
 

Ensure you already have Style tag in place, if not you need to add them as you must define any of your styles within style tags. 

<style type="text/css"> 

 enter/paste changes in here 

</style> 
 

Note: you can define multiple styles within a single set of style tags. 
 

The following style is used to remove borders and add padding to Form tables. 

.EFormTable th, .EFormTable td { 

    Border: none; 

    Padding: 15px; 

} 

To add the changes, go into the Forms module and select the appropriate Form and edit the field description that has the style tags (If not style tags exist add it to the top field as you only need it in the form). 

 

After you have click to edit the description, ensure the HTML editor view is selected: 

 

 

Here is what the Form table looks like in Sonia Online before the style has been added. 

 

Here is what the Form table looks like in Sonia Online after the styles has been added. 

 

 

Digging deeper 

To see current elements and styles, use your browser’s developer mode.

• In Google Chrome, press F12 while previewing a form, click Inspect Element, and select the element (e.g., an action button) to view its HTML and CSS.

 

This allows you to see various styling options being applied that you might wish to change back in the Form design on the description field as previously shown. 

Below is an example of applying a style to adjust the font of an action button: 

.RadButton_Metro { 

    height: auto; 

    font-family: "Segoe UI",Arial,Helvetica,sans-serif; 

    font-size: 12px; 

    line-height: 1.25; 

} 

As previously explained, ensure this style is within a set of style tags.