- This topic has 3 replies, 2 voices, and was last updated 3 years, 2 months ago by Elvin.
-
AuthorPosts
-
January 19, 2021 at 8:19 am #1625199Marty
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!
January 19, 2021 at 5:02 pm #1625635ElvinStaffCustomer Support1.) 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.January 20, 2021 at 1:16 pm #1626900MartyThank 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; }
January 20, 2021 at 4:16 pm #1627053ElvinStaffCustomer SupportNice one! Glad you got it to work to your preference.
Thank you for sharing. No problem. ๐
-
AuthorPosts
- You must be logged in to reply to this topic.