[Resolved] Need Assistance With Styling Search Results Page

Home Forums Support [Resolved] Need Assistance With Styling Search Results Page

Home Forums Support Need Assistance With Styling Search Results Page

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1625199
    Marty

    Hey guys, I am working to remove Elementor but retain similar styling. Following Leo’s advice in other threads, I was able to get to a certain point for the search results page but I’m having difficulty completing the styling as needed.

    (also I have some minor questions)

    1. I’m using WP Show Posts Pro for listing posts in category pages (I was able to get it styled ok). I’d like to duplicate that style for the search results also (desktop & mobile). Spacing is way off for the search results elements, and mobile has the image too small also (along with the same spacing issues).

    Search results – I have this right now: https://snipboard.io/dxlnBY.jpg
    Live category page example I’m hoping to replicate the style of: (see provided URL)

    2. What’s the best way to remove the spacing above the title but ONLY in pages, not posts?

    3. I have Simple Custom CSS & JS and can use URL matches or conditional expressions to load code ONLY where needed. For the search results page, I was thinking to use is_search(). Would that be good?

    Thank you very much!

    #1625635
    Elvin
    Staff
    Customer Support

    1.) Add this to CSS to for the search result lists to match the WPSP list closely:

    body.search .inside-article {
        padding: 10px;
    }
    
    body.search .inside-article .post-image {
        margin-bottom: 0em;
    }
    
    body.search .inside-article a.read-more {
        float: right;
    }
    
    body.search .inside-article .entry-summary:not(:first-child) {
        margin-top: 0em;
    }
    
    body.search .inside-article .entry-header {
        margin-bottom: 20px;
    }
    
    body.search .inside-article .entry-title {
        font-size: 18px;
        font-weight: 600;
    }

    2.) You can try to remove the container’s margin-top.

    body.page .separate-containers .site-main {
        margin-top: 0;
    }

    3.) Yes that’s right. is_search() is the function that checks if the queried page is a search result page. It returns a boolean (true or false). True if it is the search page, false if it isn’t.

    #1626900
    Marty

    Thank you so much for the reply, Elvin! That code you provided did not completely work for styling, but it did “send me in the right direction” and allowed me to alter it & add my own, which is now working. ๐Ÿ™‚

    I’ll post my code here in case someone searches for the similar solution/problem. This CSS I am using to have a 1-column search results page identical to my category pages with WP Show Posts Pro 1-column paginated list. (Also, corrects an issue with the mobile rendering where the featured image is not at full width but remains at the defined desktop thumbnail size.)

    /* === Custom CSS for GP search results Layout Element (search results page)=== */
    /* Change the font size to match that of the H2s used in category pages*/
    body.search h1{
      font-size:24px;
      font-family: 'Verdana', 'Geneva', sans-serif;
    }
    /* Assign padding to elements */
    body.search .inside-article {
        padding: 10px;
        border-radius: 4px;
    }
    /* If button option is enabled, give it slightly smaller padding & curved corners */
    .button {
        padding: 6px 14px;
        display: inline-block;
        border-radius: 4px;
    }
    
    /* Set the thumbnail size (replicate former Elmentor sizing) in tablet/desktop */
    @media(min-width: 768px) {
      /* Fix page title/search results text padding & background color */
      body.search .page-header {
          padding: 0px 0px 0px 0px;
          background-color: #F8F8F8;
      }  
      body.search .inside-article .post-image {
          width: 196px;
          height: 115px;
          position: relative;
          overflow:hidden;
          margin-bottom: 0px;  
          margin-right: 20px;
        }
        body.search .inside-article a.read-more {
            float: right;
            font-size: 16px;
            font-weight: 700;
        }
    }
    /* To fix blurriness & fill the space, set the max image width on mobile */
    @media(max-width: 768px) {
      /* Fix page title/search results text padding & background color */
      body.search .page-header {
          padding: 0px 15px 0px 15px;
          background-color: #F8F8F8;
      }
      body.search .inside-article .post-image {
              width: 100%;
              margin-bottom: 0px;
          }
        body.search .inside-article a.read-more {
            float: left;
            font-size: 16px;
            font-weight: 700;
        }
        /* Assign left/right margins to look like WP Posts on mobile */
        body.search .inside-article {
          margin-left: 15px;
          margin-right: 15px;
          }
    }
    /* Modify the post summary text (replicate former Elementor style used) */
    body.search .inside-article .entry-summary:not(:first-child) {
        margin-top: 0em;
        font-size: 16px;
      	color: #777;
    }
    /* Change space between the title text and start of post summary text*/
    body.search .inside-article .entry-header {
        margin-bottom: 10px;
    }
    /* Set teh post title font size & bold */
    body.search .inside-article .entry-title {
        font-size: 20px;
        font-weight: 700;
    }
    /* Set the post title color to black */
    body.search .inside-article .entry-title a{
      color: #000;
    }
    /* Adjust pagination numbers at bottom (make bold) */
    .page-numbers {
        /*margin-top: 1em; */
        font-size: 20px;
        font-weight: 700;
    }
    /* Reduce size of padding and correct the background color */
    .separate-containers .paging-navigation{
      padding: 0px;
      background: #F8F8F8;
    }
    
    #1627053
    Elvin
    Staff
    Customer Support

    Nice one! Glad you got it to work to your preference.

    Thank you for sharing. No problem. ๐Ÿ˜€

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.