![[Tatwell]](http://images4.wikia.nocookie.net/messaging/images/1/19/Avatar.jpg){kind=avatar}
From CSS Swatches
user name: tatwell
wikia profile: http://wikia.com/wiki/User:Tatwell
blog: http://phosphorusandlime.blogspot.com/
password: m{wikia.com/tatwell > mws} (?)
About Me
Creator of this wiki. See wikia profile above for more information. Please refer any comments to my wikia talk page.
Contents |
[edit] Prospective Contributions
[edit] links
[edit] Sandbox
[edit] how to create a sample swatch
see also create sample swatch
to create and display a sample swatch follow these steps:
[edit] 1 Create Your Swatch Code
Start with the block declaration format:
.sample { padding:1em; background-color:#fff; color:#ccc; border:1px solid #ccc; }
[edit] 2 Convert It to Inline Format
This webpage will automatically convert your block declaration into the inline format. This is the actual code you'll use to demo the style on this site.
style="padding:1em; background-color:#fff; color:#ccc; border:1px solid #ccc;"
[edit] 3 Give It a Title
If you haven't done so already, give your swatch a title. The title and the rule name (in the example above, .sample) should be similar, but don't have to be exactly the same. Both should have the sort of name a programmer would give a class or variable name. For instance, a swatch with a dark green background and bold white text might have the class name .chalkboard and the title chalkboard.
[edit] 4 Create Your New Page
Once you have your rule (in both formats) and title, your're ready to create your new page.
It should begin with the word 'Swatch:' followed immediately by your title, like so:
[[Swatch:your_title]] => Swatch:your_title
For information on how to create a new page in wiki media, see ...
[edit] 5 Format Your New Page
It will have an intro section consisting of two parts:
- title
- intro or overview
three (3) basic subsections:
- syntax
- sample
- references
You can use the template here: swatch page template
[edit] 6 Wrap Your Code in the Swatch Sample Style
<div style="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;""> YOUR CODE HERE </div>
[edit] 7 Create a Lipsum Swatch to Demo Your Code
<div style="YOUR CODE HERE"> 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. </div>
Because of the automatic line-breaks in this wiki software, you may need to tweak margin and padding settings.
[edit] 8 Add link to home page
Add your link to the top of the latest sample swatches section of the Main Page
[edit] wiki icon
