Jump to content


Photo

Add Colored Badge To Any Line Of Text


  • Please log in to reply
2 replies to this topic

#1 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 02 February 2016 - 04:25 PM

NOTE: As of MD4.5, the badge CSS is included in MD by default. To output a badge on your site, just apply the badge class to any HTML element (examples below).

 

If you pay attention to the smaller details around the Kolakube site you'll notice I use small orange badges to highlight important bits of text.

 

Check out the menu and some of the other widgets in the sidebar to see badges like "NEW" or "POPULAR".

 

To get these badges on your own site, first paste this little line of CSS into your child theme's style.css file:

.badge {
    background-color: #f58f2a;
    border-radius: 3px;
    color: #fff;
    margin-left: 4px;
    font-size: 12px;
    padding: 3px 5px 3px 4px;
    position: relative;
    text-transform: uppercase;
}

...customize it any way you want, including background color, text color, font size, padding, and any other CSS attribute.

 

Now, anywhere you can paste HTML in WordPress, use the following code to place badges next to text:

<span class="badge">NEW</span>

This is a versatile way of doing things because you can customize the badge any way you want and can implement it nearly everywhere in your admin panel. Posts, nav menu items, widgets—go crazy!

 

I also use them to do things like highlight the price of MD and other products on sales pages.

 

How do you use these on your own site?

 

P.S. To adjust the badges vertical position in your text, use this quick little hack:

<span class="badge" style="top: -5px;">NEW</span>

- Alex
Check out the Kolakube blog or follow me on Twitter.

#2 Ray

Ray

    Brooklyn's Finest

  • + Legacy Member
  • PipPipPip
  • 132 posts
  • LocationLos Angeles

Posted 16 March 2016 - 06:43 PM

Nice touch Alex.

 

I'm using colored badges to highlight all the free products/services listed on my Resource page, and blog.

 

 

<span class="badge" style="top: -3px;">#free</span>

 

 

 

I consult, create products and brainstorm all day


#3 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 17 March 2016 - 04:40 PM

 

Nice touch Alex.

 

I'm using colored badges to highlight all the free products/services listed on my Resource page, and blog.

 

I love it, there's so much you can do with them!


  • Ray likes this
- Alex
Check out the Kolakube blog or follow me on Twitter.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users