How to implement a top border

  • vikral

    (@vikral)


    5 years, 8 months ago

    Hello, I need to add top border to post content class is inside-article
    CSS Code I` tried

    .inside-article, .sidebar .widget, .comments-area {
    border-top: 4px solid;
    border-image: linear-gradient(to right, #ff117f, #ffa014) 30 stretch !important;
}

    But the border is also added to the homepage (Latest posts card)
    I just want to add top border on posts

    Thanks

Viewing 9 replies - 1 through 9 (of 9 total)
  • Leo

    (@leohsiang)

    5 years, 8 months ago

    Hi there,

    Try this instead:

    body.single .inside-article, body.single .sidebar .widget, body.single .comments-area {
    border-top: 4px solid;
    border-image: linear-gradient(to right, #ff117f, #ffa014) 30 stretch !important;
}
    Thread Starter vikral

    (@vikral)

    5 years, 8 months ago

    Worked… Thanks

    Leo

    (@leohsiang)

    5 years, 8 months ago

    No problem 🙂

    Thread Starter vikral

    (@vikral)

    5 years, 8 months ago

    Hi Leo,
    I just checked. The Given CSS code is not working on pages. eg. about us page, policy pages, etc it’s not working there.

    Leo

    (@leohsiang)

    5 years, 8 months ago

    That’s because the CSS is targetting posts only as you requested in the original message.

    So what is the condition you are looking for?

    Everything except the home page?

    If so then try this:

    body:not(.home) .inside-article, body:not(.home) .sidebar .widget, body:not(.home) .comments-area {
    border-top: 4px solid;
    border-image: linear-gradient(to right, #ff117f, #ffa014) 30 stretch !important;
}
    Thread Starter vikral

    (@vikral)

    5 years, 8 months ago

    Everything except the home page. And Category Pages and also Tags pages

    example.com/category/name
    example.com/tags/name

    Leo

    (@leohsiang)

    5 years, 8 months ago

    Try this:

    body:not(.home):not(.archive) .inside-article, body:not(.home):not(.archive) .sidebar .widget, body:not(.home):not(.archive) .comments-area {
    border-top: 4px solid;
    border-image: linear-gradient(to right, #ff117f, #ffa014) 30 stretch !important;
}
    Thread Starter vikral

    (@vikral)

    5 years, 7 months ago

    Hi, @leohsiang
    I need to remove the top border from the search result page.

    body:not(.home):not(.archive) .inside-article, body:not(.home):not(.archive) .sidebar .widget, body:not(.home):not(.archive) .comments-area {
    border-top: 4px solid;
    border-image: linear-gradient(to right, #ff117f, #ffa014) 30 stretch !important;
    }
    I used this CSS

    • This reply was modified 5 years, 7 months ago by vikral.
    Elvin

    (@ejcabquina)

    5 years, 7 months ago

    Include :not(.search) on your body selector.

    Try this out.

    body:not(.home):not(.archive):not(.search) .inside-article, body:not(.home):not(.archive):not(.search) .sidebar .widget, body:not(.home):not(.archive):not(.search) .comments-area {
border-top: 4px solid;
border-image: linear-gradient(to right, #ff117f, #ffa014) 30 stretch !important;
}
Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘How to implement a top border’ is closed to new replies.