[Resolved] customizing the search results

[Robin]

I see the Blog options for styling the basic search results page template, and I would like to go further.

I want to style the h1 for the search results, etc. Size, color, and would also like to display not the page title but the permalink only.

Possible?

Thank you!

[David]

Hi there,

you can style the Search Results H1 using CSS:

.search-results h1.page-title {
    /* add your CSS properties here */
}

Just to be clear you want to change each post title in the search results loop to display the URL instead of the_title ?

[Robin]

thank you! will style the h1

yes, I would like to display the link rather than the post/page title

and I would like to style the search results so that there is line-height whatever I specify, instead of margins or padding.

[Robin]

meaning when there are multiple search results– which there will be, because the site will display more than 100 images, and they will be categorized in various ways. For example, there will be many results for the search term “summer” or “fall.” Etc.

[David]

Try this CSS:

/* Remove entry title padding and spacing */
.search-results .entry-title a {
    font-size: 0;
}
.search-results .inside-article {
    padding: 0 !important;
}
.search-results .entry-summary {
    margin: 0;
}
/* Add margin bottom for space below last article */
.search-results article:last-child {
    margin-bottom: 5em !important;
}
/* Display and style URL */
.search-results .entry-title a:before {
    content: attr(href);
    font-size: 32px;
    line-height: 3;
}

[Robin]

Thank you very much.

Some of that code worked and some did not.

The sticking point for me was simply finding which class to style. In this case it was “search-results.” Not sure why I had been unable to figure that out using an “inspect elements” window.

In future, I will simply ask which element/class/etc needs to be modified.

Thanks again.

[Leo]

Looks like you’ve figured out?

This CSS you’ve already added should work:

.search-results h1 {
    font-size: 1.2em;
    font-weight: 400;
}

[Author]

Posts