How to override inline custom styles?

First, you can customize any of the CSS/HTML for the "Custom" button option. For the other predefined options, you can override the default inline styles as follows: To override the button's outer tag: .show-support-ribbon[style] { font-size: 14px !important; } To override the button's inner tag: .show-support-ribbon a[style] { font-size: 14px !important; } Then you can change the font-size to whatever properties are required.

by Jeff Starr 5 (11 reviews)

Show Support Ribbon

Name: Show Support Ribbon
Rating: 5.0 (11 reviews)
Author: Jeff Starr

Displays a customizable "show support" ribbon, banner, or badge on your site.

Show Support Ribbon ranks #10,998 among WordPress.org plugins with 300+ active installations, is #273 of 2,134 in the Calendar & Events category, a 5/5 rating from 11 reviews, and was last updated Aug 9, 2026. Data from WordPress.org, refreshed twice daily — see methodology.

Compatible with WP 7.1.4

v20260809 Current Version v20260809

Updated 2 months ago Last Update on 09 Aug, 2026

Refreshed 5 days ago Last Refreshed on

#273 of 2,134 in Calendar & Events Top 25% by installs Downloads +286.2% this week

View on WordPress.org

Rank

#10,998

— No change

Active Installs

300+

-22.9%

KW Avg Position

68.3

0.8 worse

Downloads

26.6K

+4 today

Support Resolved

— No change

Rating

100%

Review 5 out of 5

5 (11 reviews)

Next Milestone 400

Total Progress 21%

300+ 400+

1,177

Ranks to Climb

Growth Needed

8,000,000

Active Installs

Pro

Unlock Exact Install Count

See the precise estimated active installs for this plugin, calculated from real-time ranking data.

Exact install estimates within tiers
Track install growth over time
Milestone progress predictions

Upgrade to Pro

Need 79 more installs to reach 400+

Rank Changes

Current #10,998

Change

Best #

Upgrade to Pro

Unlock 30-day and 90-day rank history charts with a Pro subscription.

Upgrade Now

Active Installs Growth

Upgrade to Pro

Active Installs 0,000,000+

Growth +0.0%

Peak 0,000,000

Downloads Growth

Downloads

Growth

Peak

Upgrade to Pro

Unlock 30-day, 90-day, and yearly download history charts with a Pro subscription.

Upgrade Now

Reviews & Ratings

5.0

11 reviews

Overall 100%

11 (100%)

0 (0%)

Security History

Source: WPVulnerability

No known vulnerabilities on record for Show Support Ribbon. Checked 3 months ago.

Track This Plugin

Get detailed analytics, keyword tracking, and position alerts delivered to your inbox.

Start Tracking Free

Plugin Details

Version: 20260809
Last Updated: Aug 09, 2026
Requires WP: 4.7+
Tested Up To: 7.1.4
PHP Version: 5.6.20 or higher
Author: Jeff Starr

Support & Rating

Rating: ★ ★ ★ ★ ★ 5
Reviews: 11
Support Threads: 0
Resolved: 0%

Keywords

badge banner button ribbon support

Upgrade to Pro

Unlock keyword rankings, search positions, and detailed analytics with a Pro subscription.

Upgrade Now

Similar Plugins

Adminify – White Label, Admin Menu Editor, Login Customizer

6K+ installs

#2,757

Master Addons for Elementor – Elementor Addons, Widgets, Mega Menu Builder, Popup Builder, Widget Builder & Template Kits

LightStart – Maintenance Mode, Coming Soon and Landing Page Builder

400K+ installs

#134

BackWPup – WordPress Backup & Restore Plugin

400K+ installs

#135

Activity Log – Monitor User and Agent Changes

200K+ installs

#220

Popup Builder - Create highly converting, mobile friendly marketing popups.

200K+ installs

#271

Appointment Booking Plugin – LatePoint | Calendar & Scheduling for WordPress

100K+ installs

#369

پارسی دیت – Parsi Date

100K+ installs

#374

Schedule Post Changes With PublishPress Future: Unpublish, Delete, Change Status, Trash, Change Categories

100K+ installs

#402

View all Calendar-and-events plugins

TL;DR

AI summary of the plugin's readme

This plugin is for WordPress site owners who want to display a support ribbon, banner, or badge for a cause, event, or charity. It solves the problem of adding a customizable, no-configuration promotional element to a site without needing custom development.

Four built-in ribbon styles
Shortcode and template tag support
Limit display to specific URLs
Custom CSS styling
Control link text and URL
Copy/paste CSS recipes
Restore default settings option
Works with or without Gutenberg

Frequently Asked Questions

Common questions about Show Support Ribbon

Images may be displayed using CSS. Upload the desired file and then display it using CSS, like so: background-image { url(/path/to/image.png) fixed no-repeat center top; } Fine-tune as needed to dial it in. To add via plugin settings, select "Custom" for the "Select your style" option and include for either <div> or <a> styles.

That setting enables you to limit the display of the ribbon to any specified URLs. So if you enter some URLs (separated by a comma), the plugin will display the ribbon only on those pages. Otherwise if no URLs are entered and the option is empty/blank, then the ribbon will be displayed on all pages on the site.

First, you can customize any of the CSS/HTML for the "Custom" button option. For the other predefined options, you can override the default inline styles as follows: To override the button's outer <div> tag: .show-support-ribbon[style] { font-size: 14px !important; } To override the button's inner <a> tag: .show-support-ribbon a[style] { font-size: 14px !important; } Then you can change the font-size to whatever properties are required.

Select "Custom" for the option "Select your style". Then replace the "Markup" option with the following code: <div id="show-support-ribbon" class="show-support-ribbon" style="{{css_div}}">{{text}}</div> Actually you can customize the markup however you want. And as explained in the Installation section of these docs, you can use {{css_div}} and other shortcodes to display related information from the plugin options. Or you can just skip the shortcodes and add whatever text/markup is required.

This can be done with a CSS @media query. Here is an example that you can add via the plugin settings: @media (max-width: 400px) { .show-support-ribbon[style] { right: 15px !important; top: 15px !important; } } That will apply to screens up to 400px wide, so you can adjust to whatever is needed. You can add whatever styles you want. In the example, we're just moving the ribbon a little bit on the page. The !important declaration is needed only if overriding default styles.

By default, the message displayed in the ribbon/badge is linked. To change that to display the message only (with no link), follow these steps: 1) For the option, "Select your style" choose "Custom" 2) In the "Markup" setting that appears, replace whatever is there with this: <div id="show-support-ribbon" class="show-support-ribbon" style="{{css_div}}">{{text}}</div> 3) Then in the "CSS for div" setting, replace whatever is there with this: position:fixed;right:-60px;top:30px;z-index:9999;box-sizing:border-box;display:block;width:220px;padding:10px 0;color:#fff;background:rgba(102,153,204,.9);font-size:12px;line-height:16px;font-family:'Lucida Grande','Lucida Sans Unicode','Lucida Sans',Geneva,Verdana,sans-serif;text-align:center;text-decoration:none;border:1px solid rgba(255,255,255,.7);transform:rotate(40deg);box-shadow:1px 1px 3px 0 rgba(0,0,0,.3); Save changes and done. You may want to customize the CSS and/or other settings as desired. Results in a non-linked ribbon.

To ask a question, suggest a feature, or provide feedback, contact me directly.