|
| |||||
Sandbox1
From Brooklyn Centre Wiki
(→THREE COLUMNS) |
|||
| Line 32: | Line 32: | ||
==GOOGLEMAP CODE== | ==GOOGLEMAP CODE== | ||
| - | The following is the correct code for the googlemap extension. The first gives a street map zoomed out enough to give a good idea of where the location is in the general scheme of things. The second is a satellite view zoomed in for better detail. | + | The following is the correct code for the googlemap extension. The first gives a street map zoomed out enough to give a good idea of where the location is in the general scheme of things. The second is a satellite view zoomed in for better detail. (Note that I've removed the "e" from google so that the code could be displayed.) |
| - | <div style="margin-left:1.0cm;margin-right:1.0cm;font-size:80%;border:1px solid #a3bfb1;text-align:left;color:#000;padding:0.8em 0.8em;"> | ||
| - | + | <pre> | |
| - | < | + | <googlmap lat="41.455802" lon="-81.700117" type="map" zoom="12" controls="large"> |
| - | < | + | |
41.455802, -81.700117, Riverside Cemetery in Cleveland, OH, USA | 41.455802, -81.700117, Riverside Cemetery in Cleveland, OH, USA | ||
/Info\ 3607 Pearl Rd, Cleveland, OH 44109-2301 | /Info\ 3607 Pearl Rd, Cleveland, OH 44109-2301 | ||
| - | /Directions\ [http://maps. | + | /Directions\ [http://maps.googl.com Click here] to get driving directions |
| - | </ | + | </googlmap> |
| - | < | + | <googlmap lat="41.455802" lon="-81.700117" type="satellite" zoom="16"> |
41.455802, -81.700117, Riverside Cemetery in Cleveland, OH, USA | 41.455802, -81.700117, Riverside Cemetery in Cleveland, OH, USA | ||
| - | </ | + | </googlmap> |
| - | </ | + | </pre> |
| - | + | ||
*Note that the marker is set by the line following the first set of tags. | *Note that the marker is set by the line following the first set of tags. | ||
| Line 54: | Line 52: | ||
*Controls are 'small', 'medium', or 'large' | *Controls are 'small', 'medium', or 'large' | ||
| - | + | <pre> | |
| - | < | + | <googlmap lat="41.455802" lon="-81.700117" type="map" zoom="12" controls="large"> |
41.455802, -81.700117, Riverside Cemetery in Cleveland, OH, USA | 41.455802, -81.700117, Riverside Cemetery in Cleveland, OH, USA | ||
/Info\ 3607 Pearl Rd, Cleveland, OH 44109-2301 | /Info\ 3607 Pearl Rd, Cleveland, OH 44109-2301 | ||
| - | /Directions\ [http://maps. | + | /Directions\ [http://maps.googl.com Click here] to get driving directions |
| - | </ | + | </googlmap> |
| - | < | + | <googlmap lat="41.455802" lon="-81.700117" type="satellite" zoom="16"> |
41.455802, -81.700117, Riverside Cemetery in Cleveland, OH, USA | 41.455802, -81.700117, Riverside Cemetery in Cleveland, OH, USA | ||
| - | </ | + | </googlmap> |
| - | + | </pre> | |
==BOX CODE== | ==BOX CODE== | ||
Revision as of 16:30, 28 April 2008
Contents |
CODING TIPS
The following examples can be used for reference when coding Wiki pages. Please don't alter this page.
CITATIONS
The extension Cite.php has been added to this WIKI. The following code will allow references to be added as footnotes.
|
==MY TOPIC== Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt<ref>John Brown, Annals of Something Something, (American Press, Jan. 1802): 121-4</ref> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris<ref name="many">Fred Smith, Purposeful Pages, (Ridiculous Publishing, 1754): 3-6</ref> 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<ref name="many">, sunt in culpa qui officia deserunt mollit anim id est laborum.</ref> ==Notes== <references/> |
MY TOPICLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt[1] ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris[2] 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[2] Notes |
GOOGLEMAP CODE
The following is the correct code for the googlemap extension. The first gives a street map zoomed out enough to give a good idea of where the location is in the general scheme of things. The second is a satellite view zoomed in for better detail. (Note that I've removed the "e" from google so that the code could be displayed.)
<googlmap lat="41.455802" lon="-81.700117" type="map" zoom="12" controls="large"> 41.455802, -81.700117, Riverside Cemetery in Cleveland, OH, USA /Info\ 3607 Pearl Rd, Cleveland, OH 44109-2301 /Directions\ [http://maps.googl.com Click here] to get driving directions </googlmap> <googlmap lat="41.455802" lon="-81.700117" type="satellite" zoom="16"> 41.455802, -81.700117, Riverside Cemetery in Cleveland, OH, USA </googlmap>
- Note that the marker is set by the line following the first set of tags.
- Zoom levels are 0 thru 17.
- Map types can be 'map', 'satellite', 'hybrid'
- Controls are 'small', 'medium', or 'large'
<googlmap lat="41.455802" lon="-81.700117" type="map" zoom="12" controls="large"> 41.455802, -81.700117, Riverside Cemetery in Cleveland, OH, USA /Info\ 3607 Pearl Rd, Cleveland, OH 44109-2301 /Directions\ [http://maps.googl.com Click here] to get driving directions </googlmap> <googlmap lat="41.455802" lon="-81.700117" type="satellite" zoom="16"> 41.455802, -81.700117, Riverside Cemetery in Cleveland, OH, USA </googlmap>
BOX CODE
The following is a sample quotebox as is used on this Wiki:
"...the quoted material is entered here and should appear in italics."
--BOOK TITLE by The Distinguished Author's Name
An alternate style:
| <div style="color: #000000;background-color: #C9E4E4;padding: 5px;margin: 10px;border: thin dotted #759BAE;"> Quoted material goes here. </div> |
Quoted material goes here. |
Still another boxed text style:
| <div style="padding: 5px;border: thin solid #666666;margin: 5px;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 82%;"> Text within a box is demonstrated here. </div> |
Text within a box is demonstrated here. |
TWO COLUMNS
This is a demonstration of breaking the page up into two columns. The left column will have no background color, whereas the right column will have a light blue and have a slightly smaller text size. The columns can be separated by a thin black line. Just change the value of the border-right or border-left operator to 1px. It looks best having the border set at 0px for the shorter column and 1px for the longer.
This is the left column
This is the right
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.
THREE COLUMNS
Use the following HTML code to create three columns of text.
Note that the text does not automatically wrap and fill the columns. You'll have to do that yourself and possibly be required to provide linebreaks where necessary to prevent run-on lines..
<div style="... width: 33%; float:left;"> column one... </div> <div style="... width: 33%; float:left;"> column two... </div> <div style="... width: 33%; float:left;"> column three... </div>
column one text
a
b
c
column two text
m
n
o
column three text
x
y
z
ADD NEW EDITING BUTTON
1. Create new .png button and upload to /skins/common/images
2. Add new array to /includes/EditPage.php (around line 1683 in version 1.6.10)
See this URL for more detailed instructions:
http://meta.wikimedia.org/wiki/Customizing:Edit_Toolbar
IMAGE CODE
| [[image:YMCA.jpg|frame|30px|gfx on the right]] |
 gfx on the right |
| [[image:YMCA.jpg|frame|30px|center|gfx centered]] |
gfx centered |
| [[image:YMCA.jpg|frame|30px|left|gfx on the left]] |
gfx on the left |
| [[image:YMCA.jpg|thumb|gfxthumbnail]] |
 |
EXTERNAL IMAGES and TEXT WRAPPING
To use an image from another part of the server and have text wrap around it on the right, code the URL as follows. Note that a small padding of 20px was added to create a pleasant spacing between the image and the text.:
<p style="float:left;padding:20px;"> http://zodiacal.com/barbarowa/trees/photos/Fish,%20James%20Sr.jpg </p>
Follow the image styling with your text outside the paragraph closing tag.
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. 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. 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.
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. 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. 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.
