Custom Search Components

Question

Hi developers,1. Currently our search bar is custom components. But it is not functional as it was only there for display because when type and press enter/search button, nothing happen. We would like to create a search bar like this.&nbsp;&nbsp;we would like to put picture background behind it that can be occasionally changes with any kind of event, for example seasonal event, Christmas, Chinese New Year etc.&nbsp;2. If (1) is not possible to be customize, I would just add the search widget provided by Khoros. But is there a way to also put the background picture behind it and how?&nbsp;Thanks,Nad&nbsp;

mrb77 · Answer

Screenshot 2019-12-17 10.21.40.png We customized a few searches for various customers and we just did a "Christmas" Version of a header image and we work on making it dynamic and adoptable for other seasonal events. If you're interested in this customization feel free to PM me.

Best

Jan

robertt · Answer

This is possible with some CSS, we've done it on our community, an example of this can be found at https://helpforum.sky.com/t5/What-s-On/bd-p/sky_programmingchannels

You need to ensure if you're displaying any text over the image that there's suitable contrast between the background image and the text, also to have an image which will work with the overlaying elements.

We're using the out of the box search component with some JS and CSS to alter its display.

claudius · Answer

This is really solely a background styling effort. You should be able to replace your custom dummy search input field with the standard Khoros search and then replace the background. The easiest is by embedding the Khoros search component in a container in your custom component as

<@component id="common.widget.search-form" defaultToCommunity="false" useClearSearchButton="false" showAdvancedSearchLink="false" hideGranularity="false"/>

Then you can apply the styling for the background hero picture on your surrounding container.

Examples from other Khoros Communities:

HP Community

Cisco Community