Search button delivers mess page

[x_new]

Hi there,
I would like to install a search button on my page. Installation is easy but not what’s coming afterwards… How can I influence the page which delivers the results?
Actually I get a mess, see screnshot: search results come on a page looking just like my blog page, with the search result headlin in the middle of my header image. Font size is really huge. Of course I would like to get search results in fontsize 16 on an blank page, if possible
Please, could you help me customizing this? That would be great.
Regards, Karen

[Prasant]

Hello @x-vision,

Thanks for asking.

Please add following CSS under X > Launch > Options > CSS to make changes in search result page:

.search .x-header-landmark {display: none;}

.search .x-sidebar.right {display: none;}

.search .x-main.left {width: 100%;}

.search .entry-title {font-size: 180%;}

Upon adding above code the output would look as shown in screenshot. https://screencast.com/t/ZBCmuRvu, https://screencast.com/t/Xs120dmSHUbE

Please let us know your feedback and if that’s what you were looking for.

Thanks.

[x_new]

Hi Prasant,
thank you! That went well and looks (almost) good. I played with “180%” to see if I could get font size smaller, but I couldn’t really see a change. What do you suggest?

Two more questions: would there be a way to get the search a little more elaborate? I mean, if I look for “monday”, search shows me all pages containing “monday”. Is there a way to maybe highlight “monday” in the page I click in the search results? Just wondering…

And last: how can I translate “search” and “type search and enter”, can I do that in X directly or would I need e.g. Locotranslate as plugin?

Anyway the problem ist solved mainly, thanks a lot!
Regards, Karen

[friech]

Hi There,

Please test a static font size unit like 16px and see if that works, if not please clear your browser’s cache.

@x-vision

Is there a way to maybe highlight “monday” in the page I click in the search results?

Regretfully, that would require a customization which falls outside the scope of the support that we can offer.

@x-vision

And last: how can I translate “search” and “type search and enter”, can I do that in X directly or would I need e.g. Locotranslate as plugin?

You can add this to your child theme’s functions.php file.

add_filter('gettext', 'translate_text' );
function translate_text($translated) { 
  $translated = str_ireplace('Type and Press “enter” to Search', 'YOUR TRANSLATION HERE', $translated);
  return $translated; 
}

Replace the YOUR TRANSLATION HERE with the actual translation phrase.

Cheers!

[x_new]

Hi Friech,
thank you. In the meantime I managed to downsize font size with “140%” - and browser caching
And thanks for helping with translation in functions.php, I’ll work that out tonight.

There is one more font size problem. When I hit the search button and the page with “type and search” opens, then font size installed for the search word is terribly huge. See screenshot. Could I customize that?
Thanks, Karen

[mldarshana]

Hi There,

Try adding the following CSS rule for that.

.x-searchform-overlay .form-search .search-query {
    font-size: 4.2em;
}

Hope that helps.

[x_new]

Hi Darshana,

worked at once, problem solved - great, thanks a lot
Cheers, Karen

[jade]

You’re welcome, Karen.