buttons

From Microformats Wiki
Jump to navigation Jump to search

Microformats Buttons

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

Added hosted buttons for all the microformats, including the draft ones, as well as instructions on how to make your own buttons. (14 May 2006) - Ruben

Buttons

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

  • mf_rel-license.png
  • license.png

rel-nofollow

  • mf_rel-nofollow.png
  • nofollow.png

rel-tag

  • mf_rel-tag.png
  • rel-tag.png
  • tag.png

VoteLinks

  • mf_votelinks.png
  • votelinks.png

XFN

  • mf_xfn.png
  • xfn.png

XMDP

  • mf_xmdp.png
  • xmdp.png

XOXO

  • mf_xoxo.png
  • xoxo.png

Buttons for draft formats

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

adr

  • mf_draft_adr.png
  • adr.png

geo

  • mf_draft_geo.png
  • geo.png

hAtom

  • mf_draft_hatom.png
  • hatom.png

hResume

  • mf_draft_hresume.png
  • hresume.png

hReview

  • mf_draft_hreview.png
  • hreview.png

rel-directory

  • mf_draft_rel-directory.png
  • directory.png

rel-enclosure

  • mf_draft_rel-enclosure.png
  • enclosure.png

rel-home

  • mf_draft_rel-home.png
  • rel-home.png
  • home.png

rel-payment

  • mf_draft_rel-payment.png
  • payment.png

Robots Exclusion

  • mf_draft_robots-exclusion.png
  • robots.png

xFolk

  • mf_draft_xfolk.png
  • xfolk.png

Make your own buttons

Style 1

Example: mf_hcal.png

Use the Kalsey Button Maker with the following settings:

  • Outer border: #666666
  • Inner border: #ffffff
  • Bar position: 25 pixels from the left
  • Left box text: >>>
  • Left box background: #000000
  • Left box text colour: #ffffff
  • Left box text start: 7 pixels from the left
  • Right box text: (The name of the microformat goes here)
  • Right box background: #31757b
  • Right box text colour: #ffffff
  • Right box text start: 3 pixels from the bar

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

Requests

  • Logos for all microformats