This CSS code enables you to display a ribbon on the corner of single posts and/or archive pages.
You can also use text in the CSS to display inside the ribbon like this:
CSS 3
Simply copy and paste this CSS into your themes style.css file near the end of the file.
Theme Running XHTML Not HTML 5?
Simply replace the dot . before the class with a hash #
Change Ribbon Text
To change the text in the ribbon, simply change this text in this line of the CSS code:
content: "Popular";
CSS ::before and ::after Selector Classes
You can use either the ::before or ::after selector classes to insert text into a ribbon and add it to the corner of any HTML element.
You can also use a single colon (:) or double colon (::).
Browser Support for Single (CSS2) & Double (CSS3) Colon Usage
Some old browsers that not many people use may not support the use of the double colon CSS 3 supports.
In that case, you may need to use the single colon like this :before or :after.
Notes
- Tested on the Genesis Sample theme by StudioPress
Cool post brad!
Is there a way that you can apply this to certain posts? I have promotions displayed on one of my sites in a blog format and want to display an “open” or “closed” banner depending on weather the promotion is active or not.
Thanks again for the code snippets.
Jourdain
You can use any class or conditional custom class.