1. Home
  2. Development
  3. How to customize the search bar?

How to customize the search bar?

Jamie Sammons, modified 1 Year ago.
How to customize the search bar?
New Member Posts: 5 Join Date: 2/29/24 Recent Posts

Good morning,
I am using Liferay community 7.4 ga103. I created my pernsonalized search bar in html and css. I want to apply this style to the Liferay widget "Search bar" and keep all the search functionality of the widget. How can i do this?
(Even creating a new portlet that does the search would work for me).
Thanks

search liferay 7.4 search bar liferay 7.4 ga103
Priyank Gajera, modified 1 Year ago.
RE: How to customize the search bar?
New Member Posts: 2 Join Date: 11/23/22 Recent Posts

Hello Marco,

You can create search bar freemarker widget template, where you can use your custom mark up as per your need and can keep OOTB search bar widget behavior.

Liferay DXP > Design > Templates > Widget Templates > Search Bar Template (Click on plus button to see this option)

For you custom CSS you can use themeCSS client extension and can add styles specific to your custom mark up inside themeCSS.

Reference for search bar widget: https://learn.liferay.com/w/dxp/using-search/search-pages-and-widgets/search-bar-suggestions
Reference for widget template: https://learn.liferay.com/w/dxp/site-building/displaying-content/additional-content-display-options/styling-widgets-with-widget-templates
Reference for themeCSS: https://learn.liferay.com/w/dxp/building-applications/client-extensions/frontend-client-extensions/tutorials/using-a-theme-css-client-extension

Thanks
Priyank Gajera