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.

Step 1: Create a CSS File

  1. 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.

  2. Save the CSS File: Save the file with a .css extension, for example, search-highlight.css.

Step 2: Upload the CSS File to DCatalog

  1. Login to Your DCatalog Account: Access your DCatalog admin dashboard.

  2. Navigate to the Design Template:

    • Go to the Design Template section in the left-hand menu.

    • .

    • Select the template you wish to modify:

  1. Upload the CSS File:

    • Scroll down to find the Custom CSS field within the Design Template settings.

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

    • Select the file and click Open to upload it.

Step 3: Save Your Changes

  1. Click the Save Button: After uploading the CSS file, scroll down and click the Save button at the bottom of the page to apply your changes.

  2. 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

    • 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 ...

    • How Do I Control the Link Highlight?

      To control the link highlight time, go to Design Template, Advanced Features and scroll to the Link Highlight Time box: Link Highlight Time is the amount of seconds that links are highlighted in the edition. The default highlight time is measured in ...

    • Can I change my URL?

      The URL link is created using the account name (in this sample, it is Admin-Walkthrough) and the edition title (in this sample, it is Test). https://Admin-Walkthrough.dcatalog.com/v/Test/ When you change the URL, you are changing the edition title. ...

    • Advanced Features

      Advanced Features contain the Google Analytics section to enter your UA number as well as several other template setups, particularly if you purchased an eCommerce or Enterprise package. Google Analytics/GA4 DCatalog integrates with Google Analytics ...

    • How Do I set Default Link Color and opacity ( to the entire edition)

      To set the default link color and opacity per edition, go to the Multimedia manager and click on Properties: Link. In the properties link box, you can adjust the color and opacity of the link. For the color, choose from the drop down menu to pick ...