Display a set of badges based on files in a directory off the root of the blog.
|Author:||Eugéne Roux (profile at wordpress.org)|
|WordPress version required:||2.8|
|WordPress version tested:||5.2.3|
|Added to WordPress repository:||28-01-2011|
Warning! This plugin has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
|Total downloads:||2 844|
Click to start download
Display “Badges” (which are really no more than HTML snippets) from a set of files in a specified directory off the root of the blog. The directory will default to “./badges” and the Zip file contains both that directory as well as a “Sample” badge.
Using the Widget you can choose whether to:
- enable “Display Badge in a Box” (enabled by default, uses internal CSS)
- enable “Display a Drop-Shadow” (probably best used with “Box Mode”)
as well as
- decide whether you would like to use a Title
- define the directory of the badges.
Configuring the widget to read badges from
damn-badgesand display them as "Badges".
The default configuration of the widget, displaying the default path (badges).
Badges displayed Padded and Boxed, but with Drop-Shadows disabled.
Which naming convention is used for the badges
All badges needs to be named
XXname.inc, where “XX” is a number (used to determine ordering) and the “.inc” is required.
What is the format of the “Badge” files?
You could view the included “demo” file:
00testbadge.inc, but here’s another, slightly simpler, example:
<!-- Support CC --> <div id="badge-supportcc-inner" onclick="location.href='http://creativecommons.org';" style="cursor: pointer;"> <img width=88 height=31 alt="http://creativecommons.org" title="Support the Creative Commons!" src="http://creativecommons.org/images/support/2010/cc-support.png" /> <br /> Support the Creative Commons! </div> <!-- /Support CC -->
How do I style the badges using CSS?
Quite simply by using the
div.badgegroup class to style a set of badges. To style them individually, use the
How do I limit the styling to a set of badges?
Look for the relevant “Badge Group’s” ID and then use the
div#badge-ID > div.badge CSS selector.
How do I style a single badge?
Easiest yet: every badge gets a unique ID generated by the plug-in based on the badge’s file-name and the directory. Simply use that (you’ll have to inspect the source to see what the id is; by example the ID generated by my Site-Licence badge is “badge-damn-licencing-licencing”).
- Give groupings of badges a different class than badges
- Moved to a ‘<div>’ based layout instead of using Lists
- Split Boxing and Padding into two separate options
- Fixed the HTML generated to be cleaner and identify the badge class better
- Simplified the examples slightly
- Cosmetic changes
- Added (better) examples to the documentation
- Initial Public Release