
Sample Effect ↑
Deployment
Identify Post-types of Your Articles
Article type identifiers for WordPress posts:
is_sticky(); #Determine whether the blog is stick to top, returns True when positive, and False when negative
post_password_required(); #Determine whether a password is needed, returns True when positive, and False when negative or already entered
get_post_status(); #Returns the status of a blog, results include: publish, pending, draft, auto-draft, future, private, inherit, trash
Find the blog content file or blog list file of your theme. Typically wp-content/themes/[theme]/blog-list (or content).php
Based on the preceding identifiers, add the following lines in the content file, and make sure you insert them in the proper places for the stickers to be displayed correctly:
Set Correspondent CSS Configurations
Add the following class settings in your css file. Typically
wp-content/themes/[theme]/assets/css/style.css:
.top{ position: absolute;content: '';top: 10px;left: -20px;padding: 0 26px;border-top: none;z-index: 1;color: #fff;transform: rotate(-45deg);font-size: 12px;background: #5cd9ce;}
.pwd{ position: absolute;content: '';top: 10px;left: -20px;padding: 0 26px;border-top: none;z-index: 1;color: #fff;transform: rotate(-45deg);font-size: 12px;background: #dd001b;}
.pvt{ position: absolute;content: '';top: 10px;left: -20px;padding: 0 26px;border-top: none;z-index: 1;color: #fff;transform: rotate(-45deg);font-size: 12px;background: #ffc700;}
#Add the following attribute if you need a shadow effect. box-shadow: 1px 2px 3px #9c9a9a;
And we are done, clean up your browser cache, the style should now be correctly displayed.
Comments | NOTHING