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

WP SITES

2302

Original Genesis Tutorials & 5000+ Code

Snippets

  • Subscribe
  • Full Access
  • Videos
  • Log in

Create a Ribbon in WordPress Using CSS & HTML

Everyone loves ribbons but there’s not many tutorials on how to create them manually rather than install another plugin.

Add Css code to your custom style.css file in your child theme or your custom css file in your parent theme.

There’s 2 steps that need to be completed to make the ribbon display:

Step 1) Add a large block of css code to your child theme’s or parent theme’s custom style.css file

Step 2) Add a few lines of html code to your html editor

FCC Ribbon Manager Plugin

If you’re not into code, try installing a plugin.

Make sure you upload a .gif image for the ribbon as MS I.E has a problem with .PNG transparency.

Ribbon Code Builder

UIParade offer a free ribbon builder which is a better option than using plugins in my opinion. Check out there ribbon builder.

Subscribe for new Genesis Tutorials

Primary Sidebar

Brad Dalton Specializes In StudioPress child theme customization & code modification. Access all code

Featured Downloads

  • Add Slider To Infinity Pro Front Page 1 Widget Background 67213
  • Responsive Image After Header On Single Pages 67126
  • Rotate Widget Background Images In Genesis 67200
WordPress Speed Test
  • Membership
    • Account Subscription Details
  • Tagged by Theme
  • Blog
  • T.O.C
    • Membership F.A.Q’s
  • RSS
  • Send Message
  • Newsletter ( Twice Weekly )

Usage Policy · Tools & Resources


Images, code, and content on this website are property of wpsites.net and are protected by copyright law.
WP Sites does not grant permission for any repurposing, republication, or redistribution.
"Disclosure: Some of the links in some posts are "affiliate links."
This means if you click on the link and purchase the item, I will receive an affiliate commission.