Archived topic
Customising Sider Layout
3 replies · Started by Korii on November 20, 2019
Hi there,
I'm building a website for a client using the Sider layout.
We're loosely basing it off Seth Godin's website: https://seths.blog.
I'm trying to figure out however, the easiest/best way to add 2x border lines (1x red and 1x black) at the top of the header sidebar, the same as what you see on the Seth Godin website.
I'm also keen to figure out how to style the search box so I can have a button with a magnifying glass icon as well.
See below screenshot for example of what I'm trying to achieve.
Would appreciate any tips!
Hi there,
try this CSS to add the 2 color bar above the header:
.site-header:before {
content: '';
width: 100%;
height: 10px;
background-color: red;
border-bottom: 10px solid orange;
display: block;
}For the search widget i provide a solution here:
https://generatepress.com/forums/topic/change-search-widget-with-an-icon/#post-1068701
Alternative is to look at some of the advanced search widget plugins.
Amazing!! Thank you so much!
The border CSS in particular is absolutely mindblowing!!
Thanks again, David.
CSS :before and :after Pseudo elements are rather helpful.
Glad to be of help
