buttons

From Microformats

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 (http://tantek.com/log/)

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 (http://www.wackomenace.co.uk/)

Licensing

If you add links to buttons you have designed, please also include a statement that you do one of the following:

release them into the public domain
hold copyright, but release all rights as to it use
license them under a specified free license, e.g. consider using a Creative Commons (http://creativecommons.org/) license, such as cc-by-3.0 (http://creativecommons.org/licenses/by/3.0).

Thank you.

Images below hosted at boogdesign.com are available under CC Attribution 2.0 License (http://creativecommons.org/licenses/by/2.0/), see my buttons page (http://www.boogdesign.com/buttons.html) for the Photoshop files if you need them. - Rob Crowther

Images below hosted at rbach.priv.at are available under cc-by-3.0 license (http://creativecommons.org/licenses/by/3.0). - Robert Bachmann

Images below hosted at synaesthetic.net are available under the Creative Commons Attribution 3.0 license (http://creativecommons.org/licenses/by/3.0/). -- Kenn Wilson

Images below hosted at hauntedpalace.net and flickr.com/photos.hauntedpalace (POSH logos and palette cheatsheet) are available under the Creative Commons Attribution-ShareAlike 3.0 license (http://creativecommons.org/licenses/by-sa/3.0/). — Carla Hufstedler

Buttons

Microformat Button

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.

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

- Don Crowley

hCalendar

CSS-powered button from Midgard CMS - Event calendar (http://www.midgard-project.org/community/events/):

››› 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

(mirror: )
CSS-powered button, as evidenced at microformat badges @ re-run (http://re-run.com/about/microformat-badges)

rel-license

rel-nofollow

rel-tag

VoteLinks

XFN (http://gmpg.org/xfn/)

XMDP (http://gmpg.org/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 (http://creativecommons.org/licenses/by-sa/3.0/us/) Zip (http://alyosha.bendebury.net/microformat-css.zip)

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:

Use the Kalsey Button Maker (http://kalsey.com/tools/buttonmaker/) 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:

Get the font Silkscreen (http://www.kottke.org/plus/type/silkscreen/)
Install ImageMagick (http://www.imagemagick.org/)
Get the blank icon ()
Type:

convert blank.png 
 -fill white 
 -font Silkscreen 
 -pointsize 8 
 +antialias  
 -draw "text 28,10 'button label'" 
 output.png

Style 3

Example:

Get the font Silkscreen (http://www.kottke.org/plus/type/silkscreen/)
Install ImageMagick (http://www.imagemagick.org/)
Get the blank icon ()
Type:

convert button2-blank.png 
 -fill white 
 -font Silkscreen 
 -pointsize 8 
 +antialias  
 -draw "text 20,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. (http://labs.commerce.net/~rohit/µf-logo.html)

microformats

The following logo as a transparent PNG (linked here from my own server; if you use it, please copy it for yourself):

Palette

#AEE219

#85BC07

#679A06

I created a cheatsheet using Big Huge Lab (http://bighugelabs.com/flickr/)'s Badgemaker:
(http://flickr.com/photos/hauntedpalace/1296783076/) --Carla 12:11, 1 Sep 2007 (PDT)

Wiki buttons

For use on this wiki.

new! - {{NewMarker}}
Success! - {{SuccessMarker}}
updated! - {{UpdateMarker}}

Requests

Logos for all microformats

When someone has time, these should be repeated on the page for each respective format.

See also

buttons
icons
Semacode (barcode-like graphic for mobile device input)
POSH logos and buttons

Retrieved from "http://microformats.org/wiki/buttons"

Views

Personal tools

log in

Navigation

Search

Toolbox