User:Trevor MacInnis/sandbox

Todo:Teahouse, Teahouse/Pilot_report, Teahouse/Host_lounge/Metrics WOW, use this!

These is a depository for CSS code that I like may or may not be using.

see also:
 * List of colors
 * Web colors
 * How to use tables
 * m:Help:Table
 * Wiki markup tables
 * User:Dcljr/Tables

How-to:

Sortable Table
hi

Adding many different syles are posssible here.

 hi

Two columns of boxes
{| align="center" style="width: 100%; background: none;"


 * valign=top style="border: 2px solid #CC9; background-color: #F8EABA; -moz-border-radius: 10px;" |


 * valign=top style="border: 2px solid #CC9; background-color: #F8EABA; -moz-border-radius: 10px;" |


 * }

Whats this?
Personaggi di rilievo  text here

Multi colored header box
    This box as two colors in the header

Computer screen looking
X   H ome     T alk     W ikipedians     U serboxes      R ibbons     A wards    T o olset    <span style="color: rgb(0,104,88)">Ta s ks <div style=" border: inset 1px rgb(136,192,184); background-color: rgb(144,224,255); padding: 3px; color: rgb(0,104,88); ">

hello

header with tall letters
<div style="border: 1px solid #8b8b8b; margin: 0px 0px 0px 0px; text-align: left; padding: 4px; clear: both; background-color: #FFF; color:#8b8b8b; width:; "> <div style=" border: none; margin: -4px; text-align: right; font-family: Trebuchet MS; padding:2px; clear: both; background-color: #dfdfdf; color:#8b8b8b; height:50px; font-size:40px; "> <div style=" border: none; margin: -18px -2px; padding: 0px 4px; clear: both; background-color: #FFF; color:#8b8b8b; height:25px; "> Home Talk Sandbox Templates CSS JS <div style=" border: none; margin: -5px; margin-top:-54px; text-align: right; font-family: Trebuchet MS; padding:2px; clear: both; background-color: #8b8b8b; color:#FFF; height:51px; font-size:40px; width:227px; "> <div style=" border: none; margin: -2px -1px; padding: 0px 4px; clear: both; background-color: #ababab; color:#FFF; height:25px!important; ">  Trevor MacInnis 

black with three vertical lines at start
<div style="background-color:#000000; font-family:'Segoe UI', 'Bitstream Vera Sans'; padding: 0.5em"> hello

Grey buttons
<div style="background-color: #EEEEEE; padding-bottom: 0.5em; padding-top: 0.65em; padding-left: 1em; padding-right: 1em; font-family: Trebuchet MS, Gill Sans; border-bottom: 1px solid #AAAAAA; border-top: 1px solid #AAAAAA">

header/footer w/icons
<div style="position: relative; z-index: 3; width: 650px; height: 400px; margin: 0 auto; padding-bottom: 30px;">



or - end pic right
<div style="position: relative; z-index: 3; width: 650px; height: 400px; margin: 0 auto; padding-bottom: 30px;">



Photos
Some text which is pushed around the pic

some moRe

Another paragraph etc



or - Lead pic right
<div style="position: relative; z-index: 3; width: 650px; height: 400px; margin: 0 auto; padding-bottom: 30px;">



Photos
Some text which is pushed around the pic

some moRe

Another paragraph etc



<div style="background-color: #757575; padding: 50px; font: 2em Century Gothic, sans-serif; letter-spacing: 0.2em;"> user:

Trevor MacInnis

<div id="navigation" style="background-color: #eff; border: 1px #cff solid; border-top: 0; margin-left: 10px; margin-right: 10px; padding: 25px; font: 11px Arial, sans-serif;">

Dropcap Tall
L orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Dropcap aboveline
<span style="font-family:Georgia,;color:chocolate;font-size:56px;font-weight:normal;line-height:80%;letter-spacing:-6px;">L orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Dropcap Plain
Using css: L orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Dropcap Fancy
<span style="margin-right:6px;margin-top:5px;float:left;color:white;background:khaki;border:1px solid darkkhaki;font-size:80px;line-height:60px;padding-top:2px;padding-right:5px;font-family:times;">L orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Fonts allowed in Wikipedia
Corbel

Script MT Bold

Comic Sans MS

Impact

Trebuchet MS

Lucida Handwriting

Lucida Calligraphy

Lucida Console

Background image ala Ed2g
<div style="width: 751px; margin: 2em auto; background: #ffffff; border: 1px solid #6576a4;" ><div style="width: 751px; height: 450px;filter:alpha(opacity=25);">

<div style="width: 115px; border: 1px solid #6576a4; border-width: 0 0 1px 1px; float: right; margin: 0 0 0 2em;" >

<div style="width: 115px; float: right; clear: right; color: #6576a4; text-align: center; font-size: 80%; line-height: 94%;" >ed

<div style="width: 115px; border: 1px solid #6576a4; border-width: 1px 0 1px 1px; float: right; clear: right; margin: 10px 0 0 2em;" >

<div style="width: 115px; float: right; clear: right; color: #6576a4; text-align: center; font-size: 80%; line-height: 94%;" >picture of the day


 * 1
 * 2


 * 3
 * 4


 * 5
 * 6
 * 7
 * 8


 * Links
 * list
 * Some


 * dfg
 * dfg
 * [dfg
 * dfg

<div style="padding-top: 1em; border-top: 1px solid #6576a4; text-align: center;" > dfgdfgfdgdfg &bull; dfgfgdfgdfgdffdgdfgdfgdfg] 03:49, 3 February 2006 (UTC)

<div style="font-size: smaller; text-align: right; padding-right: 0.5em;" >Background image

ala Freestyle nl
<span class=plainlinks style="position:absolute; top:-1px; right:1.2em; background:#fff; padding:0 .5em; font-size:85%; border:1px solid #aaa; line-height:1.4em;"> <div style="width:100%;margin:1px;height:530px;opacity: 0.6;-moz-opacity: 0.6;filter:alpha(opacity=60);background-color:#004;"> <div style="margin:1.5em;font-size:120%;font-family:Segoe Script, Purisa, Lucida Handwriting, Bradley Hand ITC, Comic Sans MS, fantasy; color:white;">

<div class=plainlinks style="position:relative;height:23px;margin-top:20px;width:212px;float:right;color:#FFF;background:#C91C3A;padding:15px;border:1px solid #F5B5B5;"> <div style="position:absolute;top:-1px;left:0px;width:243px;height:54px;overflow:hidden;opacity: 0.3;-moz-opacity: 0.3;filter:alpha(opacity=30);"> <div style="position:absolute;top:0px;left:0px;width:212px;height:24px;color:#FFF;font-family:Trebuchet MS, FreeSans, sans-serif;padding:15px;"> code Code<sup style="font-size:10px;">™

About me:

My other userpages:



Links for personal use:



(advertisement)

and
<div style="position:relative;width:-5px;height:13em;border: 1px solid #999999; overflow:hidden;margin:0px;"> <div style="position:relative;top:0;left:0;height:13em;width:100%;text-align:center;padding-top:3em;opacity: 0.5;-moz-opacity: 0.5;filter:alpha(opacity=50);"><span style="font-size: 200%; text-align: center; font-variant: small-caps;font-family:BatangChe,serif;color:White;"> Trevor

<div style="overflow:hidden;width:100%;opacity: 0.4;-moz-opacity: 0.4;filter:alpha(opacity=40);background-color:#FEF;margin:0;padding:0;"> Links etc

This is the Wikipedia-userpage of Trevor MacInnis. You can reach me for discussion at.

Hello

Some good images for the header:
 * Image:Cumulus clouds panorama.jpg
 * Image:Dawn at swifts creek panorama.jpg
 * Image:Cows in green field - nullamunjie olive grove03.jpg
 * Image:Castillo de Jaén nevado.jpg

SHOW/HIDE
See MediaWiki:Monobook.css for original codeing.

dsfsdfdfdsfds fdsfsdfd fdsfdsf dsfdf dfdfdsfdfdfdsfds fsdfsdfsdfdfds fdss Bio

or
Bio

dsfsdfdfdsfds fdsfsdfd fdsfdsf dsfdf dfdfdsfdfdfdsfds fsdfsdfsdfdfds fdss Bio

or
Bio

dsfsdfdfdsfds fdsfsdfd fdsfdsf dsfdf dfdfdsfdfdfdsfds fsdfsdfsdfdfds fdss

or
Aeronautics
 * Airships
 * Balloons

CALENDARS
<div style="border:1px solid #ccc; background: #fff; border-right:3px solid #ccc; border-bottom:3px solid #ccc; text-align: center; padding:3px; float:right; font-size: smaller; line-height: 1.3; margin-right: 4px;"> Monday 29 July  UTC

or
<div style="border:0px solid #ccc; background: none; text-align: center; padding:3px; float:right; font-size: smaller; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 1.144;"> Monday 29 July UTC

or
(from Template:Today)

<div style="border:1px solid #ccc; background: #fff; border-right:3px solid #ccc; border-bottom:3px solid #ccc; text-align: center; padding:3px; float:left; font-size: smaller; line-height: 1.3; margin-right: 4px; width: 65px;"> Today is 

Monday 29      2024 

clock
<div style="width: 220px; height: 235px; border:2px solid black; overflow:hidden; ">

<div style="width:220px; background:#000000; color:#ffffff; text-align: center; height: 20px; position: relative; left: -2.75px">The time is . This template transcludes Ais523's clock, with a clock background.

scrolling box
stuff
 * a

Green 3D'ish
<div style="margin-bottom: 6px; border-left: #003300 solid 1px; border-top: #003300 solid 1px; border-right: #003300 solid 2px; border-bottom: #003300 solid 2px; -moz-border-radius: 8px; background: #CFDBC5; padding: 3px;">

<h3 style="-moz-border-radius: 8px; background: #597368; text-align: center; padding: 3px; margin-bottom: -2px; border-left: #003300 solid 1px; border-top: #003300 solid 1px; border-right: #003300 solid 2px; border-bottom: #003300 solid 2px;"> Intro <div style="padding: 5px; text-align: left; font-family: arial, sans-serif;" class="plainlinks"> Trevor MacInnis is a Wikipedia user who started editing and contributing on X 2006. Blah

light blue 3d ish
<span style="display:block; font-size:130%; padding:1px 0 1px; border-bottom:1px solid #ABCDEF; background-color:#F2FBFF;"> Title

<div class="" style="padding:.4em 1em .2em; background-color:#F2FBFF"> Content

<div style="background:#; height:1px; margin:0 5px; font-size:0"> <div style="background:#; height:1px; margin:0 3px; font-size:0"> <div style="background:#; height:1px; margin:0 2px; font-size:0"> <div style="background:#; height:2px; margin:0 1px; font-size:0"> <div style="background:#; padding:; text-align:; color:#"><span style="filter:alpha(opacity=80); -moz-opacity:.80; opacity:.80"> <span style="color:#">  <span style="line-height:1%; margin:-1em; padding:0 8px; float:right; clear:right; width:19%; font-size:80%; text-align:right" ><span style="color:#">modifica   <div style="border:1px solid #; padding:0 .8em; font-size:; background-color:#">



artistic
The quote goes here and looks pretty cool, especially when it runs to more than one line. The quote goes here and looks pretty cool, especially when it runs to more than one line.The quote goes here and looks pretty cool, especially when it runs to more than one line.

text
This is a quote taken from a textbook, magazine etc...

A
sdtst

B
sdfdf

C
sdfgdfg

D
ffdfg

CSS rounded corners
<div class="cssbox_head">

This is a header  <div class="cssbox_body">  This is for your content.

drop shadow box
Some title

Some text here. Some text here.

Some text here. Some text here.

Some text here. Some text here.

Some text here. Some text here.

drop shadow box (using no images)
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

try an id
{ width: 12em; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; background-color: #90bade; color: #333; }
 * 1) navcontainer

{ list-style: none; margin: 0; padding: 0; border: none; }
 * 1) navcontainer ul

{ border-bottom: 1px solid #90bade; margin: 0; }
 * 1) navcontainer li

{ display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; }
 * 1) navcontainer li a

html>body #navcontainer li a { width: auto; }

{ border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }
 * 1) navcontainer li a:hover

or a class
.navcontainer { width: 12em; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; background-color: #90bade; color: #333; }

.navcontainer ul { list-style: none; margin: 0; padding: 0; border: none; }

.navcontainer li { border-bottom: 1px solid #90bade; margin: 0; }

.navcontainer li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; }

html>body .navcontainer li a { width: auto; }

.navcontainer li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }

Links
User:Fir0002 Whoa CSS tutorial - borders