Styling the search results page - X Theme

[grindle]

Hi,

I have read quite a few posts in here regarding the search results and have managed to improve them a little with some CSS.

Could someone have a look at my search results - https://www.parishfamilystockton.org.uk/?s=church

I have 4 questions:

1 - Why is the first search result higher than everything else on the first row
2 - How can I add some custom text underneath the page title - something like “your search results are listed below, click on the Blue page titles to go the page”
3 - As well as custom text, would it be possible to add a line of text which reads - “you searched for X” and X could be taken from the search term in the URL string
4 - How can I style the page titles within the search results - Page Titles Blue (for example)

Thanks

[lely]

Hi There,

1.) By default search page has 1 column only. After the first search result, we are adding top margin on the succeeding result for spacing. Since you have altered default structure, we can now remove top margin. Try this custom CSS:

.search .hentry {
    margin-top: 0;
}

2.) The template that handles that part is this:
wp-content\themes\x\framework\legacy\cranium\headers\views\renew\ _landmark-header.php
Copy that file on your child theme here:
wp-content\themes\x-child\framework\legacy\cranium\headers\views\renew\ _landmark-header.php
You might need to create the folders.
On line 55 on that file, you can see this:

<h1 class="h-landmark"><span><?php _e( 'Search Results', '__x__' ); ?></span></h1>

Add the custom text after that line.

3.) Yes, that is possible using the get variable. See this guide:
http://php.net/manual/en/reserved.variables.get.php

4.) See this: https://screencast-o-matic.com/watch/cFfj0KDMVn

.search h1.h-landmark {
    color: #110091 !important;
}

We use that .search class. It is a class added automatically on the search page.

Hope this helps.

[grindle]

This is brilliant…

2 final questions

on point 4 - What I meant was how can I change the colour of the actual page titles WITHIN the search results, as opposed to the page title of the search page.

Is it also possible to add styling to the matched search term within the search results experts - currently it is styled as bold, but is doesn’t really stand out.

THANKS !!!

Thanks

[thai]

Hi There,

Please also add this custom CSS:

.search h2.entry-title a {
    color: #110091
}

.search .entry-content.excerpt strong {
    background-color: yellow;
}

Hope it helps