[Resolved] customizing the search results

Home Forums Support customizing the search results

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1027854
    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!

    #1027911
    David
    Staff
    Customer Support

    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 ?

    #1027912
    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.

    #1027916
    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.

    #1027923
    David
    Staff
    Customer Support

    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;
    }
    #1029816
    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.

    #1029849
    Leo
    Staff
    Customer Support

    Looks like you’ve figured out?

    This CSS you’ve already added should work:

    .search-results h1 {
        font-size: 1.2em;
        font-weight: 400;
    }
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.