Microformats Buttons

Jump to: navigation, search


There have been requests for buttons for various microformats. Either badges, or buttons that do something with the specific microformats. This page keeps a list of buttons, and requests as well. - Tantek

Contents

Licensing

If you add links to buttons you have designed, please

Thank you.

Buttons

Microformat Button

Main article: spread-microformats

Simple microformats logo-text:

small transparent PNG: logo.gif

large transparent PNG: microformats-logo.png

See spread-microformats for SVG and more.

I've made a button for microformats. Since there are so many microformats and with more to come, just indicating support/ use of might be a good generic approach. The image is free to use. Please copy it to your own hosting account and not link to it.

microformats.png

I already have a "I use microformats.png" on my blog: http://doncrowley.blogspot.com/

- Don Crowley

hCalendar

››› hCalendar


Code (white space added for readability):

<span class="badge" 
      style="float: left; font: 9px Geneva, Verdana, sans-serif; padding: 0 1em 1px 0;
      border: 1px solid #000; background: #D1940C; color: #fff; text-decoration: none;
      text-align: center;">
 <span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; 
       margin-right: 0.1em;">
 &#8250;&#8250;&#8250;
 </span> 
 hCalendar
</span>

hCard

rel-license

rel-nofollow

rel-tag

VoteLinks

XFN

XMDP

XOXO

CSS Styles for microformats

I'm not sure wether this can be under buttons, but I don't know where else to put it. This is a stylesheet containing styles for most microformats. And, it's automatic. I release it under the cc by-sa. Please note that I am new to microformats, and if you can improve this, please do. Mac Lover 13:25, 13 Apr 2007 (PDT)

License Zip


CSS Buttons

As there are new microformats happening all the time I set about making a CSS button that looks like the handmade versions. This is the result.

The file with the CSS and the two images required (logo and background) can be downloaded from The Beastly Beasts.

Extract the microformat directory and the files in it to /css so that you have:
/css/microformat/microformat.css
/css/microformat/background.png
/css/microformat/logo.png

If your paths are different a bit of editing is needed.

The XHTML to create a button is:

<tag class="microformat-button microformat-type"><span></span>microformat-type</tag>

For example, an hCard button with a link to the spec:

<a href="http://microformats.org/wiki/hcard" title="Microformat enabled" class="microformat-button hcard"><span></span>hcard</a>

Buttons for draft formats

These may be subject to change if the names of the formats change when they are released.

adr

geo

hAtom

hResume

hReview

rel-directory

rel-enclosure

rel-home

rel-payment

Robots Exclusion

xFolk

Make your own buttons

Style 1

Example: hcard.png

Use the Kalsey Button Maker with the following settings:

Style 2

Example: hcal.png

  1. Get the font Silkscreen
  2. Install ImageMagick
  3. Get the blank icon (blank.png)
  4. Type:
convert blank.png 
 -fill white 
 -font Silkscreen 
 -pointsize 8 
 +antialias  
 -draw "text 28,10 'button label'" 
 output.png

Microformats Logos

Rohit is a very poor CSS hacker, but gave it his best shot. He also rendered it at 72 and 18 points.

logo.gif

microformats


Palette

#AEE219
#85BC07
#679A06


I created a cheatsheet using Big Huge Lab's Badgemaker:
1296783076_1d6fe8a1f8_m_d.jpg --Carla 12:11, 1 Sep 2007 (PDT)


Wiki buttons

For use on this wiki.

Requests

See also

Microformats Buttons was last modified: Sunday, September 15th, 2013

Views