Customizing Template or Widget CSS Style Rules

The easiest way to identify the CSS style rule or rules that you would like to change or override is by using the developer tool from your web browser.

Before reading the rest of this page please familiarize yourself with the article about the inspection tools available in all modern browsers from this page:

Identify the CSS selector to use for our custom Style Rule

First, we need to identify the CSS selector for the element we want to create a custom style for. In this worked example we will create a new style for 'Language Filtered Section' widget.

Create a 'Language Filtered Section' widget in your project (You can change the language name as required, in our example we will call it CommandLine).

Build your output and open it in your web browser. Use your browsers inspect element tool to locate the target element; in this case, it is a widget we created in the project.

Using your inspect tool you will see a highlight above your element that is pointing at (1). When you click on the widget, the element for the existing styles is shown in the 'Elements' section of the developer tool highlights.

In our case, this element has a class name of "i-filtered-content-CommandLine", so we will use that as the CSS selector for our custom style (2)


Create a new Style Rule for the identified CSS Selector

Now we go back to editing our CSS file in the project. By default, a stylesheet named customstyles.css is created in each new project - you can find this stylesheet in the Project Explorer, below Other Files\stylesheets

Paste in the class name found in the previous step, with a "." prefix to identify that we are targetting by class name. Note that you should be on the 'Source' tab at this point (3). Paste in our ".i-filtered-content-CommandLine" with empty curly brackets (4). The class will appear on the left side of the CSS editor (5).

To define the attributes that will apply for this new style rule, use the 'Visual' option which is located at the bottom right next to the 'Source' tab (6).

Change the font to 'Calibri' and colour to Blue and switch back to the 'Source' tab. You can see that the style rule attributes have been created automatically. Remember to save the project after making any changes in your CSS file.

The new style has been applied and is visible in our topic editor.





Have more questions? Submit a request


Please sign in to leave a comment.