This is the fourth post in my tutorial series on the Self-Service template, which allows Logi Studio users to create dashboards and reports, distribute them, and collaborate with others in a web-based application. Now we’ll talk about how to modify the style of the Report Author super element, which allows end-users to work with a dashboard-like interface to create their own basic reports at runtime.
In this example, we are going to modify the Report Author Style within the Self-Service Template. Figure 1 below shows how to navigate to the Author Report, while Figure 2 shows the simple layout we have out of the box.
Step 1: Go to Logi Studio.
Step 2: Review the Custom.css file (with the new style code). Go to Support Files → Framework → Custom.css.
Step 4: Save the changes.
Step 5: Refresh the Report Author homepage to test results.
The new Report Author style:
- Adds a bigger and more apparent drag zone
- Changes the container around the Master Report Layout
- Offers a different starting point to customize it to the look and feel of your application
How Do You Know Which CSS Selector to Change?
How do you find which CSS file path selector and find the exact classes (like RD Author) to make changes to? First, go to Web Inspector in your web browser of choice:
Next, browse around the code and figure out what you want to do. For instance, in our example, we want to change the background of the Report Author page:
- Find the highest level wrapper (Div layer)
- RD Report Author layer, target by Class
- Change the Background Color, Padding, and Size
- Continue to identify the CSS elements to change based on the Selectors
Note that styles will only be applied if the element has that Class and/or is a child of an element with that Class.
Stay tuned for the final blog in this tutorial series, where we’ll discuss How to Create Responsive Dashboards.
To learn more about self-service styling in Logi Studio, read our other blogs in this tutorial series: