Development Tips

Logi Tutorial: How to Modify Style for the Search Box

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

This is the third 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 Search Box in the Self-Service Template.

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

As you can see in Figure 1 below, the theme styling of this Search Box is overriding the Logi theme, making it look inconsistent with the rest of the page. In the following steps, you’ll learn how to change that.

Step 1:
Go to Logi Studio.

Step 2: Open the dmfHome.xml (under Support Files and goCustomizations).

Step 3:
Modify the code to change the Search Box behavior.

Step 4:
Save the changes.

Step 5: Refresh the Self-Service Module homepage to test results.

The new Search Box style:

  • Expands upon hover (Figure 4)
  • Auto-filters results (Figure 5)
  • Looks more streamlined than the initial example above (Figure 1)

Step 6:
Review Style (Go to Support Files → Framework → Style.css).

The Style.css file contains all the styles we used to modify the Search Box. The highlighted code above shows the changes we made:

  • Shape of the button: Sets the width, border radius, color, shadow, etc.
  • Transition property: Defines how many seconds it will take to achieve the animation and animation type.
  • Hover selector: Defines the shape and padding whenever you hover over the container.

In the next blog in our Self-Styling series, we’ll discuss How to Modify the Report Author. To learn more about self-service styling in Logi Studio, read our other blogs in this tutorial series:

Originally published January 2, 2018; updated on September 12th, 2019

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.