buttons: Difference between revisions
(→Microformats Logos: added palette as minicheatsheet image) |
m (→Microformats Logos: added link) |
||
Line 234: | Line 234: | ||
<br /> | <br /> | ||
I created a cheatsheet using Big Huge Lab's Badgemaker:<br /> | I created a cheatsheet using [http://bighugelabs.com/flickr/ Big Huge Lab]'s Badgemaker:<br /> | ||
[http://flickr.com/photos/hauntedpalace/1296783076/ http://farm2.static.flickr.com/1231/1296783076_1d6fe8a1f8_m_d.jpg] | [http://flickr.com/photos/hauntedpalace/1296783076/ http://farm2.static.flickr.com/1231/1296783076_1d6fe8a1f8_m_d.jpg] | ||
--[[User:CarlaHufstedler|Carla]] 12:11, 1 Sep 2007 (PDT) | --[[User:CarlaHufstedler|Carla]] 12:11, 1 Sep 2007 (PDT) |
Revision as of 19:12, 1 September 2007
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
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 license, such as cc-by-3.0.
Thank you.
- Images below hosted at boogdesign.com are available under CC Attribution 2.0 License, see my buttons page 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. - Robert Bachmann
- Images below hosted at synaesthetic.net are available under the Creative Commons Attribution 3.0 license. -- Kenn Wilson
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:
››› 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;"> ››› </span> hCalendar </span>
hCard
(mirror:
)
- CSS-powered button, as evidenced at microformat badges @ re-run
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)
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 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
- Install ImageMagick
- 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
- Install ImageMagick
- 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.
microformats
The following logo as a transparent PNG (linked here from my own server; if you use it, please copy it for yourself):
Palette
I created a cheatsheet using Big Huge Lab's Badgemaker:
--Carla 12:11, 1 Sep 2007 (PDT)
POSH logos
- POSH logos and buttons
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
- 2D Barcodes (barcode-like graphic for mobile device input)
- buttons
- icons
- stickers