FANDOM


wikia swatch sample

class name: .swatch_sample

author: tatwell

added: 8 Sep 2006

This is the swatch intended to be used in displaying any sample stylesheet code on this wiki. (To display html code, please see the modern code swatch.) It is based on the .ipod class designed by tatwell and first introduced on his blog.[1] Please apply this swatch inline to any sample css code your present on this site. You can use the following template:

<div style="margin-bottom:0px; padding:0 1em; background:#ddeeff; color:#333399; font-family:'Lucida Console',Monaco,monospace; font-size:.9em; font-weight:normal; border:1px solid #333399; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; _white-space: pre; word-wrap: break-word;"> .swatch_name { STYLE RULES HERE } </div>

To display code with indentation or other more advanced formatting may require the use of <nowiki> tags in order to disable wiki auto-formatting:

<div style="margin-bottom:0px; padding:0 1em; background:#ddeeff; color:#333399; font-family:'Lucida Console',Monaco,monospace; font-size:.9em; font-weight:normal; border:1px solid #333399; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; _white-space: pre; word-wrap: break-word;"> .swatch_name <nowiki>{ STYLE RULES INDENTED }</nowiki> </div>


This page also marks the first swatch sample page and serves as a model for other pages.


syntaxEdit

declaration blockEdit

.swatch_sample { margin-bottom:0px; padding:0 1em; background:#ddeeff; color:#333399; font-family:"Lucida Console",Monaco,monospace; font-size:.9em; font-weight:normal; border:1px solid #333399; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ _white-space: pre; word-wrap: break-word; /* Internet Explorer 5.5+ */ }

inlineEdit

style="margin-bottom:0px; padding:0 1em; background:#ddeeff; color:#333399; font-family:'Lucida Console',Monaco,monospace; font-size:.9em; font-weight:normal; border:1px solid #333399; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; _white-space: pre; word-wrap: break-word;"


sampleEdit

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


referencesEdit

  1. http://phosphorusandlime.blogspot.com/2006/08/css-referencequotation-styles-updated.html