Archived topic
Archive Page border under title
5 replies · Started by Sabbir on June 13, 2022
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
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!
Thank you so much, it's works.
You’re welcome 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.
Try this:
.search .entry-summary {
margin-top: 0;
}