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

WP SITES

2662

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

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

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems