• 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

CSS Code To Add A Ribbon Background to Any Element

This CSS will generate exactly what you see in this screen shot below.

widget title ribbon

The code has been tested on the Genesis Sample child theme and Twenty Twelve.

Register for full access

All you need to do is change the class and values in the code for the width, height and color. Then you can use this CSS on any element including your header.

The CSS code for Media Queries are not included as all themes are coded differently so its impossible to cover all.

Please be advised it could require a fair amount of CSS code if you want to continue displaying these ribbons at different screens sizes. The easy way out is to use display: none.

Related Posts

  • Add CSS Corner Ribbon To Page or Post Content

Reader Interactions

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.