This topic has 14 replies, 3 voices, and was last updated 7 years by 
-
-
Hi,
Please could someone help me with some quick css to style the search form on the homepage of my website https://greenscotland.org/
I want to be able to stop the search box turning a darker colour when you click somewhere else on the page. Please see the two attachments which show the normal search box (white/ok) and then a darker search box (after clicking somewhere else on the page). I would like the search box to stay the same colour white all the time.
Also, I would like some css to make the search icon on the right hand side of the box always show as a darker shade of grey (the same shade as the placeholder text “Search members, groups &forums”).
Any help with these two things would be greatly appreciated.
Many thanks
Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Thanks!
By the way, I have now decided to use “just ajax results” with this search form so I don’t need to know how to make the search icon bolder.
But I would still like to know how to stop the search box turning a darker colour when you click somewhere else on the page. Please see the two attachments which show the normal search box (white/ok) and then a darker search box (after clicking somewhere else on the page). I would like the search box to stay the same colour white all the time.
ThanksHi,
Use this CSS selector
COPY CODE.home .kleo-search-form #searchform .input-lg { opacity: 1 !important; }The CSS will be added to wp-admin -> theme options -> general settings -> quick CSS
Cheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionThat code is perfect, thanks. Could you also help me with one more thing related to this search box… If you type in a search, say “organic”, and click enter it stops the search working. It works fine if the user waits for the results to arrive, but if someone clicks enter (which I think they will) it stops the search from working properly. Is there something I can do/add/change to stop this happening. Thanks!
hi again,
please can you show me how to make the search box on this page: https://greenscotland.org/directory/ a different colour (#07da00) with the text (#003300).
please can you also give me a similar bit of code that you gave me previously to stop this search box turning a darker colour when you click elsewhere on the page (so that it stays the same colour #07da00)
many thanksHi,
For the directory page use this CSS
COPY CODE.page-id-7504 .kleo-search-form #searchform .input-lg {background-color:#07da00;color:#003300;}Using this code will stops to search to changes the opacity when it;s out of focus
COPY CODE.kleo-search-form #searchform .input-lg { opacity: 1 !important; }Cheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionBrilliant, thanks Radu!
Finally, could you let me know what css to add to this so that the placeholder text on the directory search box always shows as white.
CheersYou’re welcome
Use this css
.page-id-7504 .kleo-search-form #searchform .input-lg::placeholder {color:#fff;}
Cheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionSorry, that code didn’t seem to work.
This is what I have so far for this search box on the directory page, but the placeholder text is not showing white:.kleo-search-form #searchform .input-lg {
opacity: 1 !important;
}.page-id-7504 .kleo-search-form #searchform .input-lg {background-color:#07da00;color:#003300;}
.page-id-7504 .kleo-search-form #searchform .input-lg::placeholder {color:#fff;}
TRy using next instead of : .page-id-7504 .kleo-search-form #searchform .input-lg::placeholder {color:#fff;}
COPY CODE.kleo-search-form #searchform .input-lg::-webkit-input-placeholder { /* Safari, Chrome and Opera */ color: #fffff !important; } .kleo-search-form #searchform .input-lg:-moz-placeholder { /* Firefox 18- */ color: #fffff; } .kleo-search-form #searchform .input-lg::-moz-placeholder { /* Firefox 19+ */ color: #fffff !important; } .kleo-search-form #searchform .input-lg:-ms-input-placeholder { /* IE 10+ */ color: #fffff !important; } .kleo-search-form #searchform .input-lg::-ms-input-placeholder { /* Edge */ color: #fffff; } .kleo-search-form #searchform .input-lg:placeholder-shown { /* Standard one last! */ color: #fffff !important; } .kleo-search-form #searchform .input-lg:placeholder-shown { /* Standard one last! */ color: #fffff !important; } .kleo-search-form #searchform .input-lg::-webkit-input-placeholder { /* Safari, Chrome and Opera */ color: #fffff !important; } .kleo-search-form #searchform .input-lg:-moz-placeholder { /* Firefox 18- */ color: #fffff; }Cheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionThank you. Finally could you please show me some code to make a small border around the whole search box on this directory page (003300). Many thanks!
Hi again
You’re welcome
.page-id-7504 .kleo-search-form #searchform .input-lg {
border: 2px solid #003300;
}R.
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionGreat
Cheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
The forum ‘General questions’ is closed to new topics and replies.
