WordPress tutorial on changing label random colors

Generally, the tags that come with WordPress themes are either a solid color or the same color as the theme. So how do we change the tags to diverse colors? Like random hashtag colors.

Sometimes a post may have many song tags, and it is not easy to be discovered. If you change the color of the tags, it will not only attract others' attention, but it will also look good!

Display effect

The rendering is as follows. This article has many tags, the colors are random, and it looks diverse.

WordPress tag random color tutorial

First of all, since we are modifying the style, we definitely need to find the css. What is the .CSS file that your theme calls globally? Wu Shi here is a dux theme.

Dux’s css is main.css. Other themes generally have this, and some have style.css, which is generally in the theme’s css folder.

Add the following code to the globally called css file

/**biaoji**/
.article-categories {
 margin-bottom: 10px
}

.article-categories a {
 padding: 4px 10px;
 background-color: #19B5FE;
 color: white;
 font-size: 12px;
 line-height: 16px;
 font-weight: 400;
 margin: 0 5px 5px 0;
 border-radius: 2px;
 display: inline-block
}

.article-categories a:nth-child(5n) {
 background-color: #4A4A4A;
 color: #FFF
}

.article-categories a:nth-child(5n+1) {
 background-color: #ff5e5c;
 color: #FFF
}

.article-categories a:nth-child(5n+2) {
 background-color: #ffbb50;
 color: #FFF
}

.article-categories a:nth-child(5n+3) {
 background-color: #1ac756;
 color: #FFF
}

.article-categories a:nth-child(5n+4) {
 background-color: #19B5FE;
 color: #FFF
}

.article-categories a:hover {
 background-color: #1B1B1B;
 color: #FFF
}

.article-title {
 position: relative;
 margin-bottom: 15px;
 font-size: 26px;
 line-height: 1.3;
 display: block;
 font-weight: 400;
 margin: 0 0 35px;
 padding: 0 0 30px;
 border-bottom: 1px solid #e7e7e7;
 color: #FFF
}

Then we open the location of the tag output and make changes. Generally, we open the file named single.php in the theme folder.

Find tags
You can see that there is a string of code starting with div as follows:

Change it to the following code:

The last modification method here is the code of the dux theme. For other themes, just modify the article-tags after class to article-categories. The css code is universal, just modify the id. As long as you find the theme for The ID name can be modified directly.

Recommended site search: registered unregistered domain name, Singapore server, PHP space recommendation, legendary server rental, virtual space, registration-free jsp space, domain name registration platform, Korean server rental, foreign server, Korean independent server,