[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
    Posts
  • #1069545
    Korii

    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

    #1070445
    David
    Staff
    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:

    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.

    #1071405
    Korii

    Amazing!! Thank you so much!

    The border CSS in particular is absolutely mindblowing!!

    Thanks again, David.

    #1071440
    David
    Staff
    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.