Theme: Blue Topaz

Share & showcase
19

That’s a shame. These colorful tags, to be honest, are one of my favourite parts. :joy:

If you hate it, then delete it!

  1. Please try to search for “colorful tags” in the .css file, then you will find the following.
/*colorful tags*/
.tag:not(.token).tag:nth-child(9n+1){background-color: var(--bqys1);} /*1*/
.tag:not(.token).tag:nth-child(9n+2){background-color: var(--bqys6);} /*6*/
.tag:not(.token).tag:nth-child(9n+3){background-color: var(--bqys2);} /*2*/
.tag:not(.token).tag:nth-child(9n+4){background-color: var(--bqys7);} /*7*/
.tag:not(.token).tag:nth-child(9n+5){background-color: var(--bqys3);} /*3*/
.tag:not(.token).tag:nth-child(9n+6){background-color: var(--bqys8);} /*8*/
.tag:not(.token).tag:nth-child(9n+7){background-color: var(--bqys4);} /*4*/
.tag:not(.token).tag:nth-child(9n+8){background-color: var(--bqys9);} /*9*/
.tag:not(.token).tag:nth-child(9n){background-color: var(--bqys5);}   /*5*/

  1. Just delete them.

  2. Now, you need to change the tag style to what you like. You will find the following just below the deleted part.

/* ====== Tag Pills ======== */
.tag:not(.token) {
	border: none;
	color: white;
	padding: 1px 8px;
	text-align: center;
	text-decoration: none;
	margin: 0px 0px;
	cursor: pointer;
	border-radius: 15px;
}
  • If you want to set a tag background color, please add the following to the above part. It is noted that “#000000” is Hex Color Code, you should adjust it to the color you want. BTY, “#000000” refers to black.
background-color: #000000;
  • Then you will get:
/* ====== Tag Pills ======== */
.tag:not(.token) {
	border: none;
	color: white;
	padding: 1px 8px;
	text-align: center;
	text-decoration: none;
	margin: 0px 0px;
	cursor: pointer;
	border-radius: 15px;
    background-color: #000000;
}

  • Or, if you want a tag with a border and no background color, you need to make the following adjustments.

  • You can change

border: none;

to

border: 2px solid #000000;

:arrow_up:That is the border style of tags.

And also change

color: white;

to

color: #000000;

:arrow_up:That is the font color in the tags.

Now you get :arrow_down:

/* ====== Tag Pills ======== */
.tag:not(.token) {
	border: 2px solid #000000;
	color: #000000;
	padding: 1px 8px;
	text-align: center;
	text-decoration: none;
	margin: 0px 0px;
	cursor: pointer;
	border-radius: 15px;
}

I think that’s all. Enjoy!

6 Likes