Smart search module styling

When I use the smart search module in the search position instead of the old Joomla search module it doesn't look as good as the old search module does.

The old search module (fotoforalla.se):

old-search.PNG

Smart search module (dev.fotoforalla.se):

smart-search.PNG

The old search module hides behind a magnifying glass icon until you hoover over it and then it expans to what you see in the image above. While the smart search module is too big, have the wrong color and shows expanded all the time.

Is it possible to style the smart search module in the same way as the old search module?

Hi,
it's because Smart Search uses different class'es than default search module.
So our developer decided to design only basic search option. It means it wasn't part of original template

But yes it's possible to get similar appearance but it request some extra job -- which is not part of support I guess.
But using firebug tool you can check by your own what you can do to improve current Smart Search module.

I would say the smart search module is way more relevant than the old searh module now days so maybe you could put more focuus on that module when coding in the future.

I fully agree... if you have good hosting and lot's of space for MySQL because those "smart" will take a lots of them resources.
But what can I say, (M)Social is quite old template and developer didn't predict all users needs ;(

I will try to fix it myself for m social but for future templates it would be good if you can make sure smart search has the right styling also.

Sure I will ask... maybe there is a light in a tunnel , I mean small hope that new template will get style also for Smart Search module. But when next template will be .... even I don't know.

I almost got the style working on the smart search module now. I use this override css:

Code: Select all

#gkSearch .search-query{
        background: #272727;
   border: 1px solid #272727;
   color: #272727;
   display: block;
   height: 32px;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
   width: 30px;
}
#gkSearch .search-query:focus,
#gkSearch .search-query:hover,
#gkSearch:hover .search-query {
   border-color: #444;
   color: #444;
   width: 180px;
}


But there's one little thing I can't seem to solve, the search field is located below the search button. You can see it live here:

http://www.dev.fotoforalla.se/

Do you know of a solution?