How to Change the Search Highlight Result Color, Search for Product, Search Function Highlight Color

How to Change the Search Highlight Result Color, Search for Product, Search Function Highlight Color

If you want to customize the color of the search highlight results in your flipbooks, follow these simple steps. This guide will show you how to create a CSS file and apply it to your flipbook using the Custom CSS field in the Design Template.

Create a CSS File

Open a Text Editor: Use any text editor of your choice (e.g., Notepad, Sublime Text).

Write the CSS Code: Copy and paste the following code into your text editor:

css
Copy code
.searchhighlight {
  background-color: #ffff00 !important;
  opacity: 0.5 !important;}

The background-color property sets the highlight color. In this example, it's set to yellow (#ffff00). You can change this to any color you prefer.
The opacity property controls the transparency of the highlight. You can adjust this value to make the highlight more or less transparent.

Save the CSS File

Save the file with a .css extension, for example, search-highlight.css.

Upload the CSS File to DCatalog

Login to your DCatalog account and navigate to Design Template:


Click on the General Appearances tab:





Select the template you wish to modify:

Upload the CSS File

Scroll down to find the Custom CSS field:




Click the Upload  button to locate your search-highlight.css file.

Select the file and click Open to upload it.

Save Your Changes

After uploading the CSS file, scroll down and click the Save button at the bottom of the page to apply your changes.
Test the Search Highlight Color: Navigate to your flipbook and use the search feature to test the new highlight color. The text that matches your search query should now be highlighted in the color you specified in your CSS file.

Additional Notes

Customization: If you wish to change the highlight color or opacity later, you can edit your search-highlight.css file and re-upload it following the same steps.
Multiple Templates: If you use multiple design templates, you'll need to repeat this process for each template where you want to change the search highlight color.

    • Related Articles

    • How Do I Control the Link Highlight?

      Below are the steps on how to change the Link Highlight Time: 1. Go to Design Template 2. Click the Advance Features tab 3. Go to Link Highlight Time field Link Highlight Time is the amount of seconds that links are highlighted in the edition. The ...
    • What is Product Management

      Product Management helps streamline stock management and product organization. It allows for real-time updates, offering features such as custom product descriptions, pricing, images, videos, and SKU management. This system makes it easy to integrate ...
    • Can I select a different link color for different links?

      Yes, you can select a different link color for different links. To do this, go to Properties: Link under the Multimedia Manager and choose a color for the link shape that you draw: Choose from the drop down menu for the color picker: For each link ...
    • Why am I getting 'no results found' when using the search button?

      Search returns no results For the search feature to work, the PDF must contain selectable and searchable text. If the pages are scanned or saved as images, the system cannot read the text, which results in no search results. Solution: If your PDF is ...
    • Link Management - Advanced Links, Copy Links, Import Links, Product Recognition, Import Products, CSV

      Advanced Linking Tool In this article, we’ll explore DCatalog’s Advanced Linking Tools, available in the Multimedia Manager (gear icon ⚙ in your admin dashboard). These features are designed to help you automate, customize, and manage links more ...