CSS to style smart search

arimakidd

The template styles a normal search box module class suffix declaration " search-box". However this style doesn't work on a 'Smart Search' box. I want my 'Smart Search' box to look like the normal search that has been styled up with the declaration. On the link, the top search is the smart one as indicated by the title.

paulus1031

hmm I'm going to have to get back to you on this one as there does appear to be a problem with how this particular module displays and functions

Thanks for your patience

Cheers
Paul

arimakidd

Okay, but as soon as you figure it out let me know what was done cause the same thing has to be done to the smart search on this site as well:
http://www.tellannie.com/index.php

Not the same colors, just the same neat layout.

aman204

arimakidd Try add this to custom.css file :

.finder.search-box{display: flex;width: 100%;}

Kindly ensure to clear your browser cache if changes dont reflect

arimakidd

arimakidd
I fixed the tellannie.com site box using this css

form#mod-finder-searchform .input-medium {
    width: 80%;
}

The client is happy with it so it's staying just like that. Go ahead with the other site though.

paulus1031

Can you add this to a new thread as this looks a much more simple fix once I can get in the admin of the site

arimakidd

I used the css from tellannie site and that didn't work. The recommendation by aman204, .finder.search-box{display: flex;width: 100%;}, didn't work either. There are 2 things to be addressed. The search input field and the button has to be side by side filling up the width of the column. Second the height of the search input field is slightly greater than the button. If it could look just like the normal search which is on top that would be great. Go ahead and ignore the tellannie.com stuff, that's fixed.

aman204

arimakidd The search input field and the button has to be side by side filling up the width of the column. Second the height of the search input field is slightly greater than the button. If it could look just like the normal search which is on top that would be great.

Try add this to custom.css file and adjust height and width value accordingly :

input#mod-finder-searchword116{width: 73% !important;float: left;height: 30px;}

Adding above css rule-set would make the appearence almost identical as above search module as envisaged. Ref: Screenshot

arimakidd

This one did the trick. Thanks. Solved.

paulus1031

Thanks for the update