How to change search result icon based on the content category

syafiq - This cannot be done without a customization, and customizing the search page is a mammoth task.

You can change system level icons though, but that won't let you achieve what you are looking at.

I think you could do it with a little JavaScript, conceptually:

- Each search result has a page link where it leads to the topic, the URL of the link contains the board id, which you probably can use to distinguish between external and internal TKB?

- If so, you can loop trough all search results, check the page-link for each result and add a CSS class in the appropriate place to target the :before element (that is the icon)

something like this (entirely untested) could do it:

jQuery('.lia-message-subject-wrapper .page-link').each(function() {
    var $link = jQuery(this);

    // for internal links
    if ( $link.is('[href*="<your.internal.tkb.board.id>"]') ) {
        $link
            .parents('.lia-quilt-message-search-item')
            .find('.lia-component-discussion-style-icon .lia-fa-icon')
            .addClass('is--internal');
    }

    // for external links, of course handling one type of links is enough,
    // you just style one differently (most likely) and leave to other one alone, your choice!
    if ( $link.is('[href*="<your.external.tkb.board.id>"]') ) {
        $link
            .parents('.lia-quilt-message-search-item')
            .find('.lia-component-discussion-style-icon .lia-fa-icon')
            .addClass('is--external');
    }

    // now you need to add CSS styles accordingly to change the color of your icon, e.g. this would do it
    /*
    .SearchPage .lia-fa-icon.is--internal:before {
        color: red;
    }
    .SearchPage .lia-fa-icon.is--external:before {
        color: green;
    }
    */

});

does that work for you?

You can accomplish this quite easily.

This should be enough direction to get you started:

- Add a new component to the MessageSearchItem quilt (this will be each search result where the message context is available!)

- In your new component, add this code

  <#assign message = (env.context.message)! />

  <#if message?? && message!?has_content>
    <#assign singleMessage = rest("2.0", "/messages/" + (message.uniqueId)!?url).data![] />
    <@searchResultMacro result=singleMessage! />
  </#if>

Now you have access to data on each message. In your searchResultMacro macro you can look at result.board.id and change the icon (and anything else) based on the data.

The only caveat here is that overriding this quilt wipes out Lithium's out-of-the-box markup.. but it can be recreated with some copy/paste action.

Hope that helps