how customize "live search" field; text color, text size and so on
in Other
I use the "live search" field on my website. https://pilze-vogtland.de/pilze/
I'm not finding the right place in BeTheme, whre I can customice the font color, font size, background color from the "live search" field. Please tell me, whre is the right place? :)
Please see picture and/or website.
KInd Regards,
Steffen
Comments
Hi,
To change that, you would have to write a custom CSS code.
Do you need help with it?
Best regards
Hello,
yes please help me with the custom CSS-Code for the "search field"
Kind Regards,
Steffen
Hello,
I need the used font in field, color, size, name, shadow (color, size).
All you have. :)
How can I change the icon of the magnifying glass?
Kind Regards,
Steffen
Please, use the following CSS:
.mfn-live-search-wrapper #searchform input{ font-size: 20px!important; color: red; font-family: 'Times'; } .mfn-live-search-wrapper #searchform input::placeholder{ font-size: 18x!important; color: green!important; font-family: 'Arial'; } .column_livesearch .mfn-live-search-wrapper{ box-shadow: 0px 15px 46px 0px rgba(255,0,0,.4)!important; }Thanks
Hello,
thanky you very much, I try your CSS today and will give feedback.
Kind Regards,
Steffen
Hello,
aczual I use this CSS:
/* Live Search Feld */
.mfn-live-search-wrapper #searchform input{
font-size: 17px!important;
color: #831e10;
font-family: 'Pilze-Vogtland-Main_local';
}
.mfn-live-search-wrapper #searchform input::placeholder{
font-size: 17px!important;
color: #831e10!important;
font-family: 'Pilze-Vogtland-Main_local';
}
.column_livesearch .mfn-live-search-wrapper{
box-shadow: 2px 2px 2px 2px rgba(50,50,50,.1)!important;
border-radius: 20px !important;
background-color: #fff9f0 !important;
}
As you can see here https://pilze-vogtland.de/pilze/
the search field has as blue #2196f3 background. In BeTheme I dont use this color.
How can I set this background-color?
Kind Regards,
Steffen
Hello
I solved the problem with the blue color, #2196f3.
Kind Regards,
Steffen
Hello,
the Live search function is great! No question.
My wish: the design of the serach field must be full integratet in BeTheme options.
Kind Regards,
Steffen
Thanks for the suggestion.
Please, leave it in the following topic:
https://forum.muffingroup.com/betheme/discussion/113/your-suggestions-for-future-updates#latest
Thanks to that we will not miss your idea among other forum discussions.
Thanks
Hello,
since last BeTheme Update V26.4 my custom CSS for the live search field ist not longer working. Specially the font size and color.
Please see here: https://pilze-vogtland.de/lamellenpilze/
I use this CSS code:
/* Life Search Field */
@media only screen and (max-width:767px){
.mfn-live-search-wrapper #searchform input{
font-size: 25px!important;
color: #831e10 !important;
font-family: 'Pilze-Vogtland-Main_local';
}
.mfn-live-search-wrapper #searchform input::placeholder{
font-size: 25px !important;
color: #831e10 !important;
font-family: 'Pilze-Vogtland-Main_local';
}
}
@media only screen and (min-width:961px){
.mfn-live-search-wrapper #searchform input{
font-size: 25px!important;
color: #831e10 !important;
font-family: 'Pilze-Vogtland-Main_local';
}
.mfn-live-search-wrapper #searchform input::placeholder{
font-size: 25px !important;
color: #831e10 !important;
font-family: 'Pilze-Vogtland-Main_local';
}
}
@media only screen and (max-width:960px) and (min-width:768px){
.mfn-live-search-wrapper #searchform input{
font-size: 25px!important;
color: #831e10 !important;
font-family: 'Pilze-Vogtland-Main_local';
}
.mfn-live-search-wrapper #searchform input::placeholder{
font-size: 25px !important;
color: #831e10 !important;
font-family: 'Pilze-Vogtland-Main_local';
}
}
Kind Regrads,
Steffen
Please, remove the #searchform ID everywhere, and check if it works then.
Thanks
Hello,
I removed the #serachform and all is working very well. :)
Thank you for fast helping!
Kind Regards,
Steffen