Flatsome Search Flat style

Hi @rankmarket!

Here is a code that will make Solaris look like Flatsome search bar:

// Replace FiboSearch search icon with Flatsome search icon
add_filter( 'dgwt/wcas/form/magnifier_ico', function ( $html, $class ) {
  $html = '<i class="icon-search"></i>';

  return $html;
}, 10, 2 );

You have two ways to add this code to your theme:

1. Open the functions.php in your child theme and add the code at the end.
2. or install the Code Snippets plugin and apply this code as a snippet.

Then apply this CSS:

html .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	background-color: #fff;
	border: none !important;
	border-radius: 0;
	box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
	box-sizing: border-box;
	color: #333;
	font-size: .97em;
	height: 2.507em !important;
	max-width: 100%;
	padding: 0 0.75em;
	transition: color .3s, border .3s, background .3s, opacity .3s;
	vertical-align: middle;
	width: 100%;
}

html .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder {
	color: #777;
	font-style: normal;
}

html .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::-webkit-input-placeholder {
	color: #777;
	font-style: normal;
}

html .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:-moz-placeholder {
	color: #777;
	font-style: normal;
}

html .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::-moz-placeholder {
	color: #777;
	font-style: normal;
}

html .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:-ms-input-placeholder {
	color: #777;
	font-style: normal;
}

html .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit:before {
	display: none !important;
}

html .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit, 
html .dgwt-wcas-om-bar .dgwt-wcas-om-return {
  background-color: var(--fs-color-secondary);
  opacity: 1;
  height: 2.507em;
  width: 39px;
  max-width: 39px;
  min-width: 39px;
}

html .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit:hover, 
html .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit:focus, 
html .dgwt-wcas-om-bar .dgwt-wcas-om-return:hover,
html .dgwt-wcas-om-bar .dgwt-wcas-om-return:focus {
	box-shadow: inset 0 0 0 100px rgba(0,0,0,.2);
}

html .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit,
html .dgwt-wcas-om-bar .dgwt-wcas-om-return {
	color: #fff !important;
	display: flex;
	justify-content: center;
	align-items: center;
}

html .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit i {
	font-size: 1.2em;
	top: 0;
}

.dgwt-wcas-search-wrapp .dgwt-wcas-ico-magnifier, 
.dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit svg path, 
.dgwt-wcas-om-bar .dgwt-wcas-om-return svg path {
	fill: #fff !important;
}

.dgwt-wcas-om-bar .dgwt-wcas-search-wrapp-mobile {
  width: calc(100% - 39px);
}

.dgwt-wcas-om-bar .dgwt-wcas-om-return svg {
	width: 18px !important;
	height: 18px !important;
	left: 10px !important;
	top: 11px !important;
}

html .dgwt-wcas-om-bar .dgwt-wcas-has-submit-off .dgwt-wcas-preloader {
  right: 40px !important;
}

Paste it into Appearance -> Customize -> Additional CSS. If you aren’t familiar with custom CSS, take a look at this video.

Regards,
Kris