How can I modify filter tags using CSS on the Dawn theme?

Store Design
, , , ,
1

Hi!

I’m using dawn theme and I’m trying to imitate the design here :

chrome_UU4ozy3KVr.png
chrome_UU4ozy3KVr.png1078×181 4.53 KB

These are tags on the blog page..

tried editing the filters via CSS but I was getting the whole row colored.

Any suggestions how I can make it look the same as the image above?

chrome_bXI48eBogV.png

chrome_oX1ZGFqBFN.png
chrome_oX1ZGFqBFN.png256×200 3.21 KB

Thanks!

2

Hi @parallelism23

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

3

Hi @BSS-Commerce ! sorry for the late reply

here is my site

News – TIMELESS by Kiko (kikostoretest.myshopify.com)

timeless_2022!

4

Hi @parallelism23

This is BSS Commerce - Full-service eCommerce Agency. We’d love to suggest you this solution:

Is this the result you expect?

view (2).png
view (2).png1919×1024 85.1 KB

Then kindly follow these steps:

Step 1: Go to Online store => Themes => Edit code

view (1).png
view (1).png1919×990 88.4 KB

Step 2: Find the file “base.css” and paste the CSS code we’ve edited for you in the last line:

/* start bss fix */
.list-menu__item--active {
    background: #46316F;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
}

.list-menu__item--link:hover {
    background: #240030;
    color: #fff;
    border-radius: 8px;
    margin: 0 4px;
}

.list-menu__item--link:hover {
    color: #fff;
}
/* end bss fix */

Step 3: Save the file and reload your web page.

Good luck!

If this solution helps you, please mark it as a solution. This can be a reference for other merchants if they have an issue like you.