Adding CSS classes

Many content components in Veva allow the user to change their styling by selecting CSS classes to apply to them. This CSS class selector lists all CSS classes which the theme provides.

Many content components in Veva allow the user to change their styling by selecting CSS classes to apply to them. This CSS class selector lists all CSS classes which the theme provides.

In the following screenshot, the user has selected a Heading component on a page, and has clicked the Class property, showing all the available CSS classes the theme is providing.

How can we add CSS classes to our theme?

Fortunately, that's really easy. The first step is to modify the theme CSS and add the class declaration. Open up the styles.css file in the wwwroot folder in your theme project. Add this CSS declaration:

.red-bold {
font-weight:bold;
color:red;
}

This is a general purpose class which can be applied to all elements, and should make their text red and font-weight bold.

The next step is to modify the Theme.cs file. Open the Theme.cs file and change the CssClasses public property so it will return this CSS class:

public IEnumerable CssClasses { get; set; } = new List()
{
new CssClass() { ClassName = "red-bold", Scope = "", Description = "Makes the text red and bold" },
};

The ClassName is simply the class selector we specified in the CSS file. The description is optional, so the user knows what this CSS class does. Notice the Scope property, since the class is general purpose, for all elements, leave the Scope as an empty string.

That's it! Now run the application, and go into the Veva backend. If you haven't added any components to the frontpage yet, just add a Heading component and you should be able to choose the red-bold class to change the styling of the heading.

What about more specific classes?

Let's say you'd like a class which should only be applicable to tables. That's easy. Open up the styles.css file and add this table class:

table.full-width {
width:100%;
}

As the name implies, this makes a table fill the entire width of it's parent. Then add this class to the CssClasses property of the theme:

public IEnumerable CssClasses { get; set; } = new List()
{
new CssClass() { ClassName = "red-bold", Scope = "", Description = "Makes the text red and bold" },
new CssClass() { ClassName = "full-width", Scope = "table", Description = "Makes the table fill the entire width of it's parent" },
};

Notice that in this case we set the Scope to "table".

Now run the application and try it out. If you select a Heading component, you should still only see the red-text class, but not the full-width class since that's only applicable to tables.

Insert a table component and choose the "Standard Table" design which allows you to select a CSS class. Notice that the full-width class is now available (and also the red-bold class, since that class was for all elements). If you select the full-width class, the table will become full width.