buttons: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
mNo edit summary
(added instructions for making own buttons)
Line 3: Line 3:
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. - [http://tantek.com/log/ Tantek]
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. - [http://tantek.com/log/ Tantek]


I've added hosted badges for all the microformats and even the draft ones. (14 May 2006) - [http://www.wackomenace.co.uk/ Ruben]
Added hosted buttons for all the microformats, including the draft ones. (14 May 2006) - [http://www.wackomenace.co.uk/ Ruben]


== Badges ==
== Buttons ==


=== [[hcalendar|hCalendar]] ===
=== [[hcalendar|hCalendar]] ===
* http://mirror.oogynetworks.com/microformats/buttons/mf_hcal.png
* http://mirror.oogynetworks.com/microformats/buttons/mf_hcal.png
* CSS-powered badge from [http://www.midgard-project.org/community/events/ Midgard CMS - Event calendar]:  
* CSS-powered button from [http://www.midgard-project.org/community/events/ Midgard CMS - Event calendar]:  


<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>
<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>
Line 32: Line 32:
* http://www.crowley.nl/images/hcard.png (mirrors: http://www.davidjanes.com/images/mf_hcard.png , http://mirror.oogynetworks.com/microformats/buttons/mf_hcard.png )
* http://www.crowley.nl/images/hcard.png (mirrors: http://www.davidjanes.com/images/mf_hcard.png , http://mirror.oogynetworks.com/microformats/buttons/mf_hcard.png )
* http://rbach.priv.at/Misc/Volatile/hCard.gif
* http://rbach.priv.at/Misc/Volatile/hCard.gif
* CSS-powered badge, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]
* CSS-powered button, as evidenced at [http://re-run.com/about/microformat-badges microformat badges @ re-run]


=== [[rel-license]] ===
=== [[rel-license]] ===
Line 55: Line 55:
* http://mirror.oogynetworks.com/microformats/buttons/mf_xoxo.png
* http://mirror.oogynetworks.com/microformats/buttons/mf_xoxo.png


== Badges for draft formats ==
== Buttons for draft formats ==


These may be subject to change if the names of the formats change when they are released.
These may be subject to change if the names of the formats change when they are released.
Line 92: Line 92:
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_xfolk.png
* http://mirror.oogynetworks.com/microformats/buttons/mf_draft_xfolk.png


== Logos ==
== Make your own buttons ==
 
Use the [http://kalsey.com/tools/buttonmaker/ Kalsey Button Maker] with the following settings:
* Outer border: #666666
* Inner border: #ffffff
* Bar position: 25 pixels from the left
* Left box text: &gt;&gt;&gt;
* 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
 
= Microformats Logos =
Rohit is a very poor CSS hacker, but gave it his best shot. He also [http://labs.commerce.net/~rohit/µf-logo.html  rendered it at 72 and 18 points.]  
Rohit is a very poor CSS hacker, but gave it his best shot. He also [http://labs.commerce.net/~rohit/µf-logo.html  rendered it at 72 and 18 points.]  



Revision as of 20:00, 14 May 2006

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. (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

rel-nofollow

  • mf_rel-nofollow.png

rel-tag

  • mf_rel-tag.png

VoteLinks

  • mf_votelinks.png

XFN

  • mf_xfn.png

XMDP

  • mf_xmdp.png

XOXO

  • mf_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

geo

  • mf_draft_geo.png

hAtom

  • mf_draft_hatom.png

hResume

  • mf_draft_hresume.png

hReview

  • mf_draft_hreview.png

rel-directory

  • mf_draft_rel-directory.png

rel-enclosure

  • mf_draft_rel-enclosure.png

rel-home

  • mf_draft_rel-home.png

rel-payment

  • mf_draft_rel-payment.png

Robots Exclusion

  • mf_draft_robots-exclusion.png

xFolk

  • mf_draft_xfolk.png

Make your own buttons

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

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