• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Add CSS Corner Ribbon To Page or Post Content

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:

corner ribbon

CSS 3

Simply copy and paste this CSS into your themes style.css file near the end of the file.

Register for full access

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

Reader Interactions

Comments

  1. Jourdain says

    September 15, 2014 at 10:56 pm

    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

    Log in to Reply
    • Brad Dalton says

      September 15, 2014 at 11:18 pm

      You can use any class or conditional custom class.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.