[Resolved] Sidebar Box CSS styling Question

[Anthony]

Hello,

Is it possible to get one of my sidebar boxes to have this type of styling? I am using content aware sidebar to only show related post by category. That is the box I would like to style.

I added the image in a word doc file.

https://docs.google.com/document/d/1B0nDXSU8XuiH9pypiS26TaB3BjD5sNSw/edit?usp=sharing&ouid=104571090698405576557&rtpof=true&sd=true

I cant seem to get the spacing and the dividing lines. They can be thin gray solid line. They do not have to be dotted. Not sure what CSS I should use for this.

Thanks again.

Anthony.

[Ying]

Hi Anthony,

Can you link us to your site and point us to the sidebar section where you want to style?

[Anthony]

Hi Ying. Sure.

Here is a page from my category that will have that box.

https://mobilitymedicalsupply.com/best-manual-wheelchairs/

Sidebar box says: Manual Wheelchair Guides

[Ying]

To add number before the titles:

.sidebar ul.wp-block-latest-posts__list.wp-block-latest-posts li:nth-child(1) a:before {
    content: "1";
}
.sidebar ul.wp-block-latest-posts__list.wp-block-latest-posts li:nth-child(2) a:before {
    content: "2";
}
.sidebar ul.wp-block-latest-posts__list.wp-block-latest-posts li:nth-child(3) a:before {
    content: "3";
}
.sidebar ul.wp-block-latest-posts__list.wp-block-latest-posts li:nth-child(4) a:before {
    content: "4";
}
.sidebar ul.wp-block-latest-posts__list.wp-block-latest-posts li:nth-child(5) a:before {
    content: "5";
}

To style the numbers:

.sidebar ul.wp-block-latest-posts__list.wp-block-latest-posts li a:before {
    margin-right: 20px;
    font-size: 25px;
    color: grey;
}

To change the title color to black:

.sidebar ul.wp-block-latest-posts__list.wp-block-latest-posts li a {
    color: black;
}

To add underlines to titles:

.sidebar ul.wp-block-latest-posts__list.wp-block-latest-posts li:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 2px dotted lightgrey;
}

[Anthony]

Okay thanks Ying. I can drop this CSS into Additional CSS field? Appearance -> Customize -> Additional CSS?

[Ying]

Yes, correct 🙂

[Anthony]

Okay I dropped that CSS code in. I don’t see any changes. I cleared my Cache. Maybe I got something wrong? Is this because I am using the Content aware sidebar plugin to show posts that belong to certain category?

[Ying]

Do you have any other CSS in the additional CSS field?

If so, can you add my CSS to the top of the field before other CSS?

[Anthony]

I do have a little. Okay let me try.

[Anthony]

That fixed it. Thank you again Ying.

[Anthony]

Thanks Yin for the help. One last thing. Is there a way for me to make the links bold and font larger and when you hover over them they turn blue? In the text CSS can get the text so it does not go under the number for longer titles? So it stays in line with the beginning of the link?

You see 3, 4, and 5 how they go under the number?

https://mobilitymedicalsupply.com/heavy-duty-manual-wheelchairs/

[Ying]

Hover title color:

.sidebar ul.wp-block-latest-posts__list.wp-block-latest-posts li:hover a {
    color: #1e73be;
}

Change this CSS:

.sidebar ul.wp-block-latest-posts__list.wp-block-latest-posts li a {
    color: black;
}

to:

.sidebar ul.wp-block-latest-posts__list.wp-block-latest-posts li a {
    color: black;
    font-size: 1.2em;
    display: flex;
    align-items: center;
}

[Anthony]

Perfect. Thanks Ying for all the help! We can close this if need be.

[Ying]

You are welcome 🙂

[Author]

Posts