This topic has 16 replies, 2 voices, and was last updated 8 years by 
-
-
Hello, is it possible to make the search bar rectangular with no curved corners and a little bit shorter (padding inside the search box)? I am trying to keep everything squared on the site.
See attached for example.
Kevin
Provide page url where i can see that
R.
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionUse this CSS, it’s applied only to that page if you want to have that style site-wide remove .page-id-8803 from the CSS
COPY CODE.page-id-8803 .kleo-search-form #searchform .input-lg { border-radius: 0; } .page-id-8803 .kleo-search-form { max-width: 500px; }Cheers
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionOK great that worked for the squaring, but can I change the height of the search box (looks like significant padding within the box).
COPY CODE.kleo-search-form #searchform .input-lg { border-radius: 0; margin: 0 !important; height: 45px !important; }Cheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionOk I can see the difference in height, but is it possible to keep the search icon centered when changing the height? At 45px, it becomes uncentered vertically…
Kevin
Use this instead
COPY CODE.kleo-search-form #searchform .input-lg { border-radius: 0; margin: 0 !important; height: 45px !important; } .kleo-search-form #searchform .input-group-btn { top:10px !important;}Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionYou’re welcome
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionattachment missing
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionUse this css
COPY CODE.kleo-search-form .kleo-ajax-search-loading { margin: 0 auto; left: 200px !important; top: 15px; }Replace 200px with your desired value
Cheers
R>Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionWhat happens if I revome the following code:
left: 200px !important;I only need it centered vertically
No problem
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.
