User:Trevor MacInnis/sandbox/Code

From Wikipedia, the free encyclopedia


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

Ref:

Contents

[edit] To add



How-to:

[edit] TABLES

Title 1 Title 2
  • Item 1

Item 2

[edit] Sortable Table

Table Title
Header H2 H3 H4 H5 H6
A 2 3 4 5 6
Be 20 30 40 50 60
Cee 3 4 5 6 7
Q 0 87 4000 6 7



Lists of people
By name

By belief

By nationality

By occupation

By office held

By prize won


hi

hi

Adding many different syles are posssible here.

hi

Borders
Code Sub-part What it does
border: *; thick solid #DDDDCC thick solid border color by code
" thin solid yellow thin solid border line color by name
border-width:2px; Make border certain width
border-style:*; solid solid border line
" dashed solid border line
" dotted solid border line
" ridge frame-like border line
" groove grooved-like border line
" inset/outset inset/outset border line
border-color:#27160E; border color
border-bottom: 1px solid #AAAAAA; combination of all of the above
-moz-border-radius: 10px; make border corners rounded (Mozilla only)
-moz-border-radius-*,: 10px; topright makes topright border corners rounded (Mozilla only)
" topleft/bottomright/bottomleft makes other border corners rounded (Mozilla only)
Text
Code Sub-part What it does
line-height:1.5; text line height
font-color: #000000; font color by code
font-family: Trebuchet MS, Gill Sans; Optima, Trebuchet MS, sans-serif; font style
" Helvetica, Arial, Verdana, sans-serif font style
" Lucida Sans Unicode font style
font-variant: small-caps; small caps
font-size: smaller; font size
" large/x-large other font sizes
letter-spacing: -0.4px; spacing between letters?
Text
Code Sub-part What it does
margin-left: -1em; margin from text/border/etc (-1 left right puts it right up to edge of page)
margin-*: -1em; right/top/bottom margin from text/border/etc
background: #E0EEE0; color of background by code
background-color:#dc143c; color of background by code


[edit] PAGE LAYOUT

[edit] Header/Footer(Content)/Sideboxes

Stuff in here, image etc. Big Title Stuff here 2 image etc
Inner box text

[edit] Box

Header 1

Link1
Link 2

Header 2

Link 3
Link 4

edit this panel


[edit] Different box

Template:FinestraHome3

[edit] Different Bar

Code NAVIGATION


[edit] Two columns of boxes

Rounded Header/Centered
text Font:Trebuchet MS, sans-serif. HALLLOOO
Top/bottom line header/Centered/Colored
text
Left/Right line header/Centered
text
Padded,Bordered header/Rounded Bottom/Centered
text with a colored background (different from the columns background
Padded,Bordered header/Rounded Bottom/Centered
Rounded Header/Centered/Bordered
text that is small (the header text is also small unless you make it big again as it is
Left/Right line header/Centered
text that is bordered
Rounded Header/Centered

text

Rounded Header/Centered

text

Iconed/colored text header
text
Bordered header/Centered
text
'Rounder Header/Centered
text
Bordered header/Rounded Top/Centered
text
Ridged header/Rounded Top/Centered
text
Padded,grooved header/Rounded Bottom/Centered
text
hello
Outset header/Centered
text
inset header/Centered
text

[edit] Buttons

Subpages


[edit] Whats this?

Personaggi di rilievo
title

text here




[edit] HEADERS

[edit] Simple Separate Header

Big Title

[edit] Multi colored header box

Trevor MacInnis/sandbox/Code 

This box as two colors in the header

[edit] Computer screen looking

X
Filenew.svg
Trevor MacInnis/sandbox/Code

hello

[edit] header with tall letters

Home | Talk | Sandbox | Templates | CSS | JS 


Trevor
 MacInnis
 

[edit] black with three vertical lines at start

||||| Welcome...

hello

[edit] Grey buttons

Sandbox

Aqs

Desk

Welcome

[edit] Curvy and blue w/buttons

[edit] Image in the corner

Wikisaurus:
[[{{{1}}}]]
For information on WikiSaurus formatting and how to create a new WikiSaurus entry please see Creating a Wikisaurus entry.



[edit] Dark blue w white text

Wiktionary WikiSaurus Sense


[edit] 3D'ish

This is a Wikipedia user page.

This is not an encyclopedia article. If you find this page on any site other than Wikipedia, you are viewing a mirror site. Be aware that the page may be outdated and that the user this page belongs to may have no personal affiliation with any site other than Wikipedia itself. The original page is located at http://en.wikipedia.org/wiki/User:Trevor MacInnis.

Wikimedia Foundation

[edit] FOOTER

[edit] Simple Separate Footer

footer box text

[edit] HEADER AND FOOTER

[edit] Simple Footer/Header Together

Big Title
footer box text

[edit] header/footer w/icons

Photos 


[edit] Photos

here is some good styled text

another para

50.000+ Link 1 – Link 2
10.000+ another
1.000+ wha?
< 1.000 de – fr – ja – pl – sv – zh –

meta – wikisource


[edit] or - end pic right

Photos 

[edit] Photos

Some text which is pushed around the pic

some moRe

Another paragraph etc



[edit] or - Lead pic right

Photos 

[edit] Photos

Some text which is pushed around the pic

some moRe

Another paragraph etc




user:
Trevor MacInnis



[edit] CONTENT

[edit] Dropcap Tall

Lorem 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.

[edit] Dropcap aboveline

Lorem 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.

[edit] Dropcap Plain

Using css:

Lorem 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.

[edit] Dropcap Fancy

Lorem 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.

[edit] Fonts allowed in Wikipedia

Script MT Bold

Comic Sans MS

Impact

Trebuchet MS

Lucida Handwriting

Lucida Calligraphy

Lucida Console

Font Name: Example of font:
Agency FB Example
Algerian Example
Andale Mono IPA Example
Arial Example
Arial Black Example
Arial Narrow Example
Arial Rounded MT Bold Example
Baskerville Old Face Example
Bauhaus 93 Example
Bell MT Example
Berlin Sans FB Example
Berlin Sans FB Demi Example
Bernard MT Condensed Example
Blackadder ITC Example
Bodoni MT Example
Bodoni MT Black Example
Bodoni MT Condensed Example
Bodoni MT Poster Compressed Example
Book Antiqua Example
Bookman Old Style Example
Bradley Hand ITC Example
Britannic Bold Example
Broadway Example
Brush Script MT Example
Californian FB Example
Calisto MT Example
Castellar Example
Centaur Example
Century Gothic Example
Century Schoolbook Example
Chiller Example
Colonna MT Example
Comic Sans MS Example
Cooper Black Example
Copperplate Gothic Bold Example
Copperplate Gothic Light Example
Courier New Example
Curlz MT Example
Edwardian Script ITC Example
Elephant Example
Engravers MT Example
Eras Bold ITC Example
Eras Demi ITC Example
Eras Light ITC Example
Eras Medium ITC Example
Felix Titling Example
Footlight MT Light Example
Forte Example
Franklin Gothic Book Example
Franklin Gothic Demi Example
Franklin Gothic Heavy Example
Franklin Gothic Medium Example
Franklin Gothic Medium Cond Example
Freestyle Script Example
French Script MT Example
Garamond Example
Georgia Example
Gigi Example
Gill Sans MT Example
GulimChe Example
Impact Example
Lucida Console Example
Lucida Handwriting Example
Marlett Example
MingLiU Example
Monotype Corsiva Example
MS Gothic Example
MS Hei Example
MS Outlook Example
MS Song Example
Symbol Example
Tahoma Example
Times New Roman Example
Trebuchet MS Example
Webdings Example
Wingdings Example
Wingdings 2 Example
Wingdings 3 Example

[edit] BACKGROUND

[edit] Background image ala Ed2g

Image:Lockheed SR-71 Blackbird.jpg
ed
Korean War
picture of the day
1
2
3
4
5
6
  • 7
  • 8
Links
list
  • Some
dfg
  • dfg
  • [dfg
  • dfg
Trafalgar SquareEuston Tower
dfgdfgfdgdfg • dfgfgdfgdfgdffdgdfgdfgdfg] 03:49, 3 February 2006 (UTC)

[edit] ala Freestyle nl

Purge

en-3 This user is able to contribute with an advanced level of English.

 About me:

  • User:Trevor MacInnis/sandbox/Code/link
  • User:Trevor MacInnis/sandbox/Code/link
  • User:Trevor MacInnis/sandbox/Code/link
  • User:Trevor MacInnis/sandbox/Code/link

 My other userpages:

  • User:Trevor MacInnis/sandbox/Code/link

 Links for personal use:

  • User:Trevor MacInnis/sandbox/Code/link
  • User:Trevor MacInnis/sandbox/Code/link
  • User:Trevor MacInnis/sandbox/Code/link


[edit] and


Trevor

Image:Dropshadow lang.jpg

Links etc

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

Hello

Some good images for the header:


[edit] SHOW/HIDE

See MediaWiki:Monobook.css for original codeing.


[edit] or (with hidden image and in template form)

[edit] or

[edit] or

[edit] or


[edit] CALENDARS

Friday
13
June


[edit] or


Friday
13
June


[edit] or

(from Template:Today)

Today is



[edit] clock

The time is 14:21.

This template transcludes Ais523's clock, with a clock background.

[edit] BOXES

[edit] tabbed

user page criticism trivia see also references external links

Image:No image.png

Image:No image.png

Image:No image.png

Image:No image.png

Image:No image.png

Image:No image.png

Image:No image.png

User:Trevor MacInnis

From Wikipedia, the free encyclopedia

[edit] CategoryTree



[edit] tab box

Recently featured: DurianGeorge I of Great Britain2006 Atlantic hurricane season

Image:cartella_blu.jpg
Sommario
edit    
The attack on Joseph Priestley's home, Fairhill
The Priestley Riots took place from 14 July to 17 July 1791 in Birmingham, England; the rioters' main targets were religious Dissenters, most notably the religious and political controversialist, Joseph Priestley. The riots started with an attack on a hotel that was the site of a banquet organized in sympathy with the French Revolution. Then, beginning with Priestley's church and home, the rioters attacked or burned four Dissenting chapels, twenty-seven houses, and several businesses. Many of them became intoxicated by liquor that they found while looting, or with which they were bribed to stop burning homes. A small core could not be bribed, however, and remained sober. They burned not only the homes and chapels of Dissenters, but also the homes of people they associated with Dissenters, such as members of the scientific Lunar Society. While the riots were not initiated by Prime Minister William Pitt's administration, the national government was slow to respond to the Dissenters' pleas for help. Local Birmingham officials seem to have been involved in the planning of the riots, and they were later reluctant to prosecute any ringleaders. Those who had been attacked gradually left, leaving Birmingham a more conservative city than it had been throughout the eighteenth century. (more...)


[edit] scrolling box


stuff

  • a


[edit] box with sidebar

title...

dfgsdsddsfgsdgsdg

 edit 


[edit] Pinned up note

.
Image:Pin-45right.png
.
. .
en This user is a native speaker of English.


[edit] Box list, color titles

13 June 2008  14:21 (UTC)
Title 1
  • list
  • stuff
    • here
Titole 2
  • more listings
  • here



[edit] table grey header, black line

Recent changes by namespace

Title 1
Link 1

Title 2
Link 2



[edit] box/table with colors

Chicago Transit Authority
Chicago L System
  Red Line
  Orange Line
  Yellow Line
  Green Line
  Blue Line
  Purple Line
  Brown Line


[edit] Dropped header and icon

Welcome to Wizardry Dragon's User Page
  • Stuff
  • Here
  • Etc

Image:Raokbarn rib.pngImage:Barnstar rib.pngImage:Templatestar rib.png



[edit] Green 3D'ish

Intro

[edit] light blue 3d ish

Title

Content


1px
1px
1px
2px
{{{titolo}}}modifica

{{{contenuto}}}

[edit] Wiktionary main page style

Behind the scenes

Community portal

  • A page containing everything you wanted to know about Wiktionary.

Discussion rooms

  • A collection of pages for the discussion of Wiktionary and the words it contains.

[edit] \'short\

I |- | rowspan=3 style="background: #CCCCFF; padding: 1em; width:+50%; vertical-align:top" |

[edit] \sə-'jes-chənz\

Bla bla bla | style="background: #DDEEDD; padding:1em; width:+75%; vertical-align:top" |

[edit] \'tə-dūz\

  • Monitor the following:

|- | colspan=2 style="background: #FFDDFF; padding:1em; width:+50%; vertical-align:top" |

[edit] \dēp 'kwes-chənz\

Feel free to [http://en.wi |}


[edit] VARIOUS CODE

[edit] make pic a link

[edit] make a pic opaque

[edit] Quotes

[edit] 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.

[edit] Substt'ed cquote

(In case it gets deleted)

| fgdfgfgffgfgfgfgf

[edit] text

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

—Author, Book name[1]


[edit] CURRENTTIME (in minutes from 00Z)

861

[edit] Random number generator (See User:Misza13/Random

0

[edit] List on page in columns

[edit] A

sdtst

[edit] B

sdfdf

[edit] C

sdfgdfg

[edit] D

ffdfg


[edit] tests

[edit] CSS rounded corners

This is a header

This is for your content.

[edit] 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.



[edit] 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.

[edit] What is this for. I cant remember!!!

[edit] try an id

  1. 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; }

  1. navcontainer ul

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

  1. navcontainer li

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

  1. 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; }

  1. navcontainer li a:hover

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


[edit] 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; }


[edit] Links

User:Fir0002 Whoa CSS tutorial - borders