User:Ricardo Vidal/sandbox

<html><style type="text/css"> .formbody { font-family: Monospace; font-size: 11px; max-width: 300px; } .form_format { font-family: Monospace; font-size: 11px; border: 1px solid #999999; color: #666666; } .wikitable {width:800px;} a[href $='.pdf'] {

  padding-right: 18px;
  background: transparent url(http://www.askthecssguy.com/images/061220_icon_pdf.gif) no-repeat center right;

} a[href $='.doc'] {

  padding-right: 18px;
  background: transparent url(http://www.askthecssguy.com/images/061220_icon_doc.gif) no-repeat center right;

} a[href $='.xls'] {

  padding-right: 18px;
  background: transparent url(http://www.askthecssguy.com/images/061220_icon_xls.gif) no-repeat center right;

} </style> </html>

One-Click Form message

Error Messages

IGEM team error
- You are attempting to create a notebook in a non-existing IGEM team page, <igem-team-name-here>. Please visit [[<igem-team-name-here>]] and click "edit" to create your IGEM page.

Lab error
- There is no Lab page called <lab-name-here>. Please visit [[<lab-name-here>]] and click "edit" to create your lab page. Further instructions on setting up a lab page can be found here.

Page already exists
- The project you are attempting to create already exists. Please check the fields again and try again. Thanks!

Success Messages

IGEM Team Notebook
- Congratulations! Your IGEM Team Notebook has been created with success. You can visit it [[<igem-lab-notebook-url>|here]]

Lab notebook success
- Congratulations! Your lab notebook has been created with success. You can visit it [[<lab-lab-notebook>|here]]

Personal notebook success
- Congratulations! Your lab notebook has been created with success. You can visit it [[<user-lab-notebook>|here]]

Message Box

Background red or green depending on error or success?

Success!
Message goes here Message goes here Message goes here Message goes here Message goes here.

Error
Message goes here Message goes here Message goes here Message goes here Message goes here.

OWW LN Image

OWW Logo with text

Links with graphic cues

Simply using CSS it is possible to make links to files such as PDF, DOC or XLS (or anything else for what matters) more visible to the user.

Icons temporarily borrowed from Ask the CSS Guy

Support OWW

Go ahead and add one of these banners to your site. Just copy the HTML code within the textarea (ctrl/cmd + C) below your chosen banner and add it to your webpage. It's that easy!

<html><form class="formbody"><textarea class="form_format" rows="4" cols="20" onClick="this.select();"><a href="http://www.openwetware.org"><img src="http://openwetware.org/images/9/96/02_JoinOpenWetWare.png" border=0 /></a></textarea></form></html>	<html><form class="formbody"><textarea class="form_format" rows="4" cols="20" onClick="this.select();"><a href="http://www.openwetware.org"><img src="http://openwetware.org/images/2/23/01_ISupportOpenWetWare.png" border=0/></a></textarea></form></html>
<html><form class="formbody"><textarea class="form_format" rows="4" cols="20" onClick="this.select();"><a href="http://www.openwetware.org"><img src="http://openwetware.org/images/9/96/02_JoinOpenWetWare.png" border=0/></a></textarea></form></html>	<html><form class="formbody"><textarea class="form_format" rows="4" cols="20" onClick="this.select();"><a href="http://www.openwetware.org"><img src="http://openwetware.org/images/c/ce/03_JoinOWW.png" border=0/></a></textarea></form></html>
<html><form class="formbody"><textarea class="form_format" rows="4" cols="20" onClick="this.select();"><a href="http://www.openwetware.org"><img src="http://openwetware.org/images/3/35/04_ISupportOWW.png" border=0/></a></textarea></form></html>	<html><form class="formbody"><textarea class="form_format" rows="4" cols="20" onClick="this.select();"><a href="http://www.openwetware.org"><img src="http://openwetware.org/images/0/03/88x31_JoinOWW.png" border=0/></a></textarea></form></html>
<html><form class="formbody"><textarea class="form_format" rows="4" cols="20" onClick="this.select();"><a href="http://www.openwetware.org"><img src="http://openwetware.org/images/f/f4/140x70_JoinOWW.png" border=0/></a></textarea></form></html>	<html><form class="formbody"><textarea class="form_format" rows="4" cols="20" onClick="this.select();"><a href="http://www.openwetware.org"><img src="http://openwetware.org/images/0/01/80x15_openwetware.png" border=0/></a></textarea></form></html>

If you have any problems inserting your banner into your site, feel free to contact us. We'll do our best to help out.

Etiquette (summary)

Revise, revise, revise

Add pages and edit existing pages

Be respectful of user/lab/group pages

If you feel something should be changed, take the time to leave a note on the talk page or send an email explaining what and why.

Keep an informative and up-to-date user page

This will allow others to know who you are and what you are currently working on.

Search and only then create

Make sure that the page you are about to create doesn't already exist by performing a quick search.

Capitalize only the 1st word on your page

In other words, Gel purification is better than Gel Purification

Follow page naming convention

Use categories

To help structure the content on OWW, categories become very handy. So,

Tables

By simplye adding {{table}} to your tables, you achieve a nice thin grey border on your tables

{|{{table}} width="400px"
|+ Table 1 - This is a nice simple outlined table.
! style="background-color:#EEE;"|name !! style="background-color:#EEE;"|number
|-
| John || 2
|-
| Jill || 3
|-
| Jack || 4
|-
| Joseph || 5
|-
| Jenny || 6
|}

Table 1 - This is a nice simple outlined table.
name	number
John	2
Jill	3
Jack	4
Joseph	5
Jenny	6

Playground

Media:test-doc.pdf

User:Ricardo Vidal/sandbox

Contents