[Support request] Archive Page border under title

[Sabbir]

Hi,

I want to add a border under the posts title and an arrow on right side like the screenshot (https://prnt.sc/HxGDZ-R17aHA)

also want round the search box and next previews post design as like screenshot.

I like to do this for this site archives pages: https://www.disabilityresources.org/state-services

can you help me with that?

Thanks advance

[Fernando]

Hi Sabbir,

Here’s a CSS you may try adding in Appearance > Customize > Additional CSS:

.category-95 main#main > article {
    border-bottom: solid 1px #333;
    padding-bottom: 20px;
    position: relative;
}

.category-95 main#main > article:after {
    color: #777;
    content: "\2192";
    font-weight: 300;
    font-size: 20px;
    position: absolute;
    top: 0;
    right: 0;
}

.category-95 input#wp-block-search__input-1 {
    border-radius: 30px;
}

.category-95 nav#nav-below .nav-links > a {
    border: solid 1px black;
    border-radius: 4px;
    background-color: black;
    color: white;
    padding: 2px 5px;
    margin: 0 4px;
}

.category-95 nav#nav-below .nav-links span.page-numbers.current {
    border: solid 1px black;
    border-radius: 4px;
    background-color: white;
    color: black;
    padding: 2px 5px;
    margin: 0 4px;
}

.category-95 nav#nav-below .next > span, .category-95 nav#nav-below .previous > span {
    display:none;
}

.category-95 nav#nav-below .nav-links {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

.category-95 nav#nav-below .next {
    position:absolute;
    right:0;
    top:0;
}

.category-95 nav#nav-below .previous {
    position:absolute;
    left:0;
    top:0;
}

Kindly modify the values to your liking. This code will work only for this Category as requested. If you wish to make it work for other categories, replace .category-95 with .category.

Hope this helps!

[Sabbir]

Thank you so much, it’s works.

[Fernando]

You’re welcome Sabbir!

[Sabbir]

Can you tell me if the spacing between the page link and the page description text can be removed so there’s no space in between them? (Search Result page) Take a look at the screenshot: https://prnt.sc/1IoVQimKBTV3. I’m referring only to the space which I highlight in yellow for each search result.

[Ying]

Try this:

.search .entry-summary {
    margin-top: 0;
}

[Author]

Posts