Development Tips

Logi Tutorial: How to Modify Report Author Style

By Joshua McClure
Share on LinkedIn Tweet about this on Twitter Share on Facebook

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.

>> Related Tutorial: How to Customize the Self-Service Master Layout <<

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.

Figure 1: Navigating to Author Report
Figure 2: Out-of-the-Box Report Author

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.

Figure 3: Custom.css file in Logi Studio

Step 3: Open the _Shared report under Reports (which includes the JavaScript Includes and CSS files Includes) to update the code.

Figure 4: _Shared report to include custom CSS

Step 4: Save the changes. 

Step 5: Refresh the Report Author homepage to test results.

Figure 5: Report Author with new style applied

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:

Figure 6: Web Inspector tool to inspect CSS

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:

Originally published January 9, 2018

About the Author

Josh McClure is a software developer at Logi Analytics. He's spent time in various engineering and customer solutions roles at Logi, where he's specialized in UI/UX, custom styling, and tailored solutions.