I want to customize the home page search widget to get like this:
As of now I am getting like this, anyone help which things I need to do to get this done.
Hi @Aditya02 ,
I’ve tried to style the homepage search bar to match the design shown in your image.
Below is the result:
To achieve this design, you can use the following HTML and CSS code in your widget:
HTML Template-
<div id="homepage-search" class="homepage-search-container">
<div class="wrapper-xl">
<h1 class="text-4x m-b-lg sp-tagline-color">Hello {{data.userName}}, <br></h1>
<h2 class="text-x m-b-lg sp-tagline-color">
Welcome to the <strong>Brilliance Portal</strong> How can we help <br>you today?<br><br>
</h2>
<!-- Search bar container -->
<div class="search-bar-container">
<!-- Search icon -->
<i class="fa fa-search search-icon"></i>
<!-- Input field -->
<input type="text" class="search-input" placeholder="Enter your search here" />
<!-- Search button -->
<button class="search-button">Search</button>
</div>
</div>
</div>
CSS-SCSS
/* General styles */
.sp-tagline-color {
color: #2A2A2A; /* Updated color for h1 and h2 */
font-family: 'Aptos Mono', sans-serif;
}
/* General styles for headings */
h1, h2 {
margin: 0; /* Remove default margins */
padding-left: 10px; /* Add consistent left padding */
}
/* Updated h1 and h2 styling */
h1.sp-tagline-color {
font-size: 55px;
color: black; /* Example: Orange-red color */
font-family: 'Batang', sans-serif;
font-weight: 1; /* Light weight */
letter-spacing: 3px;
}
h2.sp-tagline-color {
font-size: 18px; /* Reduced font size */
color: black; /* Changed color to white */
font-family: 'Aptos Mono', sans-serif; /* Font family */
font-weight: 300; /* Lighter font weight */
}
/* Homepage search container */
.homepage-search-container {
padding: 50px 0;
background-color: transparent; /* No additional background */
}
/* Search bar container styling */
.search-bar-container {
display: flex; /* Use flexbox for alignment */
align-items: center; /* Center vertically */
position: relative; /* Position relative for absolute child positioning */
}
/* Search input styling */
.search-input {
width: 60%; /* Adjust width for better separation */
height: 50px;
padding: 10px 40px; /* Add padding for the icon */
border: 2px solid #ccc; /* Add border styling */
border-radius: 8px; /* Slightly rounded corners */
font-size: 16px; /* Adjust font size if needed */
background-color: white; /* White background for input */
color: #333; /* Text color for input */
outline: none; /* Remove outline on focus */
box-sizing: border-box; /* Include padding and border in element's total width and height */
}
/* Placeholder text color */
.search-input::placeholder {
color: #999; /* Placeholder text color */
}
/* Search icon styling */
.search-icon {
position: absolute; /* Position absolutely within the relative container */
left: 10px; /* Adjust left positioning as needed */
font-size: 20px; /* Adjust icon size */
color: #999; /* Icon color */
}
/* Search button styling */
.search-button {
height: 50px;
width: 120px;
margin-left: 10px; /* Add space between the input and button */
background-color: DarkGray; /* Change button background color to white */
border: 2px solid #ccc; /* Border styling to match input */
border-radius: 8px; /* Rounded corners */
color: #454545; /* Button text color (blue) */
font-size: 16px;
cursor: pointer; /* Cursor changes to pointer */
transition: background-color 0.3s ease; /* Transition for hover effect */
}
/* Button hover effect */
.search-button:hover {
background-color: #f0f0f0; /* Subtle hover effect */
}
As of now this design won't work with typeaheadsearch widget. this code you need integrate with typeaheadsearch widget HTML and CSS code.
If this resolves your issue, kindly mark it as Correct 
Best regards,
Moin
