[Resolved] Customising Sider Layout

Home Forums Support Customising Sider Layout

  • This topic has 3 replies, 2 voices, and was last updated 10 months ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #1069545

    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!

    Screenshot of Seth Godin website header

    Customer Support

    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:


    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.

    Customer Support

    CSS :before and :after Pseudo elements are rather helpful.

    Glad to be of help

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