- This topic has 6 replies, 3 voices, and was last updated 3 years, 4 months ago by
Leo.
-
AuthorPosts
-
October 6, 2019 at 1:52 pm #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!
October 6, 2019 at 4:34 pm #1027911David
StaffCustomer SupportHi 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 ?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 6, 2019 at 5:25 pm #1027912Robin
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.
October 6, 2019 at 5:28 pm #1027916Robin
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.
October 6, 2019 at 5:49 pm #1027923David
StaffCustomer SupportTry 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; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 8, 2019 at 7:34 pm #1029816Robin
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.
October 8, 2019 at 8:11 pm #1029849Leo
StaffCustomer SupportLooks like you’ve figured out?
This CSS you’ve already added should work:
.search-results h1 { font-size: 1.2em; font-weight: 400; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.