Hi.
I am working on this page: http://storkoksgruppen.com.preview.binero.se
When using the search function in the header I would like to change the color of the search text (it is white and hard too see) and I would also like to change the appearance of the search result page. The search result page is now with with text on white background which makes it…hard.
How do I do this?
Tomas
Hi Tomas,
Thanks for reaching out.
For text readability in search input, please add this to Theme Options > CSS
.x-searchform-overlay .form-search .search-query {
background-color: rgba( 0, 0, 0, 0.1) !important;
color: #999 !important;
}
As for the appearance of the search result, do you wish to change the color of the text or the white background?
For the text color (it’s a link), please go to Theme Options > Typography > SITE LINKS and change its color. It’s currently white.
If it’s just due to the background, then please add this to Theme Options > CSS
.search-results .entry-wrap {
background-color: #999 !important;
color: #000 !important;
}
Cheers!
Ok. Perfect.
How do I remove the righthand widgets with the latest posts and archive? And how do I change the overall black background color?
Tomas
Hi Tomas,
Sure, please add this CSS as well
.search-results .x-sidebar {
display: none !important;
}
.search-results .x-main {
width: 100% !important;
float: none !important;
}
Then this CSS for the black background
body.search-results {
color: #999999;
background-color: #880000;
}
Thanks!
Perfect. But what if i want the background to be white? I have tried to change the background-color to white but it didn’t work.
and also. is it possible to change this into swedish:
Search Results
Below you’ll see everything we could locate for your search of “service”
Hello Tomas,
To change the background color of the search result page, please try this code:
.search-results .site:before {
background-color: #fff;
}
To change the texts, please add this code in the functions.php of the child theme:
// Translate Strings
add_filter( 'gettext', 'translate_x_strings', 20, 3 );
function translate_x_strings( $translated_text, $text, $domain ) {
if ( is_singular() ) {
switch ( $translated_text ) {
case 'Search Results' :
$translated_text = __( 'Search Results Translation', '__x__' );
break;
case "Below you'll see everything we could locate for your search of " :
$translated_text = __( 'Translation here.', '__x__' );
break;
}
}
return $translated_text;
}
Please add the translation text for your site in the code above.
Hope this helps.
Perfect. I wrote the below but still have the english texts. Am I missing something:
// Translate Strings
add_filter( ‘gettext’, ‘translate_x_strings’, 20, 3 );
function translate_x_strings( $translated_text, $text, $domain ) {
if ( is_singular() ) {
switch ( $translated_text ) {
case 'Search Results' :
$translated_text = __( 'Sökresultat', '__x__' );
break;
case "Below you'll see everything we could locate for your search of " :
$translated_text = __( 'Nedan hittar du sökresultaten.', '__x__' );
break;
}
}
return $translated_text;
}
Hello Tomas,
My apologies. Please update the code to:
// Translate Strings
add_filter( 'gettext', 'translate_x_strings', 20, 3 );
function translate_x_strings( $translated_text, $text, $domain ) {
switch ( $translated_text ) {
case 'Search Results' :
$translated_text = __( 'Search Results Translation', '__x__' );
break;
case "Below you'll see everything we could locate for your search of " :
$translated_text = __( 'Translation here.', '__x__' );
break;
}
return $translated_text;
}
Let us know how it goes.
Perfect. Thanks.
Is there a way to translate “type and press enter to search” as well?
Tomas
And also, I saw that if i search for something that couldn’t be found - I end up back to the original background color with the widgets to the right side. Is there a way to change that?
Which means that this would be good to translate as well:
Nothing to Show Right Now
It appears whatever you were looking for is no longer here or perhaps wasn’t here to begin with. You might want to try starting over from the homepage to see if you can find what you’re after from there.
Hi Tomas,
In your custom CSS, please find all the .search-results class then replace with body.search. Example:
body.search.site:before {
background-color: #fff;
}
For the translation, please update the previous custom PHP code to this:
// Translate Strings
add_filter( 'gettext', 'translate_x_strings', 20, 3 );
function translate_x_strings( $translated_text, $text, $domain ) {
switch ( $translated_text ) {
case 'Search Results' :
$translated_text = __( 'Search Results Translation', '__x__' );
break;
case "Below you'll see everything we could locate for your search of " :
$translated_text = __( 'Translation here.', '__x__' );
break;
case 'Nothing to Show Right Now' :
$translated_text = __( 'Search Results Translation', '__x__' );
break;
case "It appears whatever you were looking for is no longer here or perhaps wasn't here to begin with. You might want to try starting over from the homepage to see if you can find what you're after from there." :
$translated_text = __( 'Search Results Translation', '__x__' );
break;
}
return $translated_text;
}
Hope it helps 
Hi.
The translation worked fine.
This is the search result css I have now:
.search-results .entry-wrap {
background-color: #ffffff !important;
color: #000 !important;
}
.search-results .x-sidebar {
display: none !important;
}
.search-results .x-main {
width: 100% !important;
float: none !important;
}
body.search-results {
color: #999999;
background-color: #f1f1f1;
}
.search-results .site:before {
background-color: #f7f5f5;
}
Not sure where I should change to body.search. Can you help me out.
And the last thing. How do I change Type and press enter to search into swedish?
Hi Tomas,
Please add that, it’s a different CSS so you don’t have to modify the already provided CSS. Result page and actual search page have different selectors.
You can translate that text by modifying that existing code
// Translate Strings
add_filter( 'gettext', 'translate_x_strings', 20, 3 );
function translate_x_strings( $translated_text, $text, $domain ) {
if ( is_singular() ) {
switch ( $translated_text ) {
case 'Search Results' :
$translated_text = __( 'Search Results Translation', '__x__' );
break;
case "Below you'll see everything we could locate for your search of " :
$translated_text = __( 'Translation here.', '__x__' );
break;
case "Type and Press “enter” to Search" :
$translated_text = __( 'Translation here.', '__x__' );
break;
}
}
return $translated_text;
}
Thanks!
Hi. I tried this code:
body.search.site:before {
background-color: #fff;
}
But i still have another background color and the righthand widgets.
Tomas
Hi Tomas,
The correct CSS should be:
body.search .site:before {
background-color: #fff;
}
Regards!
100% perfect
Glad to hear that!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.