Search
Search

Search

Site Customization

Customizing Search UI

Bullet allows you to enhance the visual appeal and usability of the search functionality on your website. By customizing the colors, fonts, layout, and other visual elements of the search bar and search results, you can create a unique and branded search experience that aligns with your website's overall design aesthetic. Whether you want to create a minimalistic search bar, add animation effects, or customize the appearance of search results, Bullet classes enable you to make a strong visual impression and provide an intuitive search experience for your users.

How to

Customize the overlay background color

Modify the background color and opacity of the search overlay to create a visually appealing and seamless integration with your website's design.
.bullet-search-overlay {
	background: rgba(0,0,0,0.5);
}

Customize the panel background color

Customize the background color of the search panel to match your website's color scheme.
.bullet-panel {
  background-color: #f7f4f4;
}

Customize search input

Tailor the appearance of the search input by customizing the background color, placeholder text color, search icon color, and input text color.
/* input background color and text color */
.bullet-search-input {
	background-color: #f7f4f4;
	color: #5351d4;
}

/* input placeholder color */
.bullet-search-input::placeholder {
	color: #ab9b9b !important;
}

/* search icon color */
.panel-block .control .icon {
  color: #b9b0b0;
}

Customize the search result block

Customize the hover background, highlight background, and text colors to create visually appealing and user-friendly search result blocks.
/* Result block hover background color */
.bullet-result .panel-block:hover{
     background-color:lightgray;
}
/* Search highlight background color */
 mark{
  background:gray;
}

/* Search result title color */
.bullet-result-title{
  color:black;   
}
/* Search result description color */
.bullet-result-desc{
color:black;
}
/* Search result link color */
.bullet-result-link{
 color:blue;
}
 

References

Classes

Customize and style the various components of the search functionality to create a visually appealing and intuitive search experience on your website.
Class
Description
.bullet-search-overlay
Styling class for the search overlay
.bullet-panel
Class for styling the search panel container
.panel-block .control .icon
Class for styling the search icon
.bullet-search-input
Class for styling the search input field
.bullet-result-container
Container class for result elements
.bullet-result
Container class for search result elements
.bullet-result .panel-block
Class for styling blocks within search results
.bullet-result-title
Class for styling the title of search results
.bullet-result-desc
Class for styling the description of search results
.bullet-result-link
Class for styling the link or URL of search results
.bullet-no-result
Class for styling the message when no search results are found
How to use
/* Example: How to use CSS class */
/* Below code will change the background color of the search panel */
.bullet-panel{
   background-color: white;
}
.bullet-search-input{
  background-color: white;
}
  1. Copy the provided CSS code snippet containing the search classes into your CSS file or code > CSS(in bullet site dashboard) section.
  1. Add or Modify the search classes according to your desired customization.
  1. Save the code and publish the site.