Wiki Formatting

Dipity

http://www.dipity.com/

Glogster

http://www.glogster.com/edu/

Chart Gizmo

http://www.chartgizmo.com/

Google Calendar

http://www.google.com/calendar/

Scrapblog

http://www.scrapblog.com/

Quizlet (not a widget)

http://quizlet.com/

FlipBooks

http://www.flip.com/

Grazr

http://grazr.com/

Scribd

http://www.scribd.com/

Chatterous *

http://www.chatterous.com/

Chatsy *

http://www.chatzy.com/

SlideShare

http://www.slideshare.com/

SlideRoll

http://www.slideroll.com/

SlideRocket

http://sliderocket.com/

Bitty Browser

http://bitty.com/

* not embeddable, but still really useful for private, secure chat rooms.

Embedding a Google Calendar

Embedding a Google Calendar into a Wikispaces Wiki

Setting Up Your Calendar for Sharing / Embedding

Create a Google Account https://www.google.com/accounts/
Start your first calendar http://www.google.com/calendar (it will be titled with your first and last name)
Click on Settings (left of calendar field)
Click on the title for the calendar you wish to share
Open the Calendar Details tab (top of the page)
Rename it as you want your students and parents to see it (save)
Click on Settings again and select your calendar
Open the Share this Calendar tab and check Make Calendar Public - be sure that you do not check "Share only my free/busy information" (save)

Two Options for Embedding the Calendar:

Option 1 - Fastest

Click on Settings again and select your calendar
Open the Calendar Details tab
Copy the HTML code in the box next to "Embed this Calendar"
Go to the wiki page on which you want to embed the calendar (be sure you are signed in to Wikisapces)
Click Edit this Page
Put your mouse where you want the calendar to display
Click on the Embed Widget icon (television image) on the editing bar
Select Other HTML
Paste your HTML code from Google Calendar
Click Save (a gray media box will appear where your calendar will display)
Click Save to record your page changes

Option 2 - More Customization Possibilities

Click on Settings again and select your calendar

Open the Calendar Details tab

lick on the HTML button next to Calendar Address

Click on the Configuration Tool link
Set your calendar display preferences
Copy the HTML code
Go to the wiki page on which you want to embed the calendar (be sure you are signed in to Wikisapces)
Click Edit this Page
Put your mouse where you want the calendar to display
Click on the Embed Widget icon (television image) on the editing bar
Select Other HTML
Paste your HTML code from Google Calendar
Click Save (a gray media box will appear where your calendar will

Embedding Google Docs

Embedding a Google Doc or Spreadsheet as a widget

You will need to first publish your Google Doc or sheet and copy the link your are given.

<iframe src='Place your document URL here' frameborder='0' width='410' height='342'></iframe>

change the pink numbers to adjust the size of the doc.

Copy the embed code and add to any blog, wiki, social network, etc... that accepts widgets or HTML code.

Embed a Google Customized Search Engine

Create a Google Customized Search Engine by clicking here
Select the web site(s) to be searched by the engine
Copy the embed code and paste it into the wiki using the Television Icon > Other HTML

Adding a Table of Contents

Type [[toc]] at the top of your wiki page

If you choose heading 1 for your first heading, then heading 2 for the next - heading 2 will be indented when you view the table of contents

Changing Your Wiki Page Background Color

To change the background colour of the editable wiki area, you must edit the themes.

1. Go to Manage Space, and then to Look and Feel.
2. Click on 'Change or make a new theme'.
3. If your are not already using a custom theme, you will need to make one.
4. In 'Make a new theme' type in your theme name and select the original from the dropdown list. NOTE: This only works with the 'original theme' and not any of the other options in the dropdown list.
5. Click edit, and now you will be able to edit your theme.
6. Find the part in the theme that says

#container .field { background-color: #FFF; }

7. Replace the #FFF with the number of the color you want for the background. (put # before the number)
8. Click save

Click here for a list of colors with their corresponding numbers.

Add a Colored Text Box

Click on the embed widget button and go to 'Other HTML'
Copy the code from the link at the bottom of this page. The code needs to have no line breaks in it.
Just substitute your own text where I have written - 'Write your text in here'
Change to suit your own needs. The border thickness can be changed at border: 3px - the background color and border color changed by substituting the #color code for the one you want. You can also change text color, font etc.

NOTE: copy the full code here. It does run off the page, but it is all there - just copy all and paste. (Ctrl A > = select all text, Ctrl C = copy, > Crtl V = paste)

Text Wrapping Images

You can set your image anywhere on the page and wrap your text around it.

1. Prepare a picture to the correct size and upload it using the insert images button. Do not place the picture on your page.
2. Using the embed widget button, paste the following code into the 'Other HTML' box.

3. Substitute 'geger.jpg' (the name of my picture) with the name of your uploaded picture.
4. Format the code according to what you want - change the border, mine is ridge but you and make any border - border px number, the higher the number the thicker the border - change the border color - make the picture float left, or right - change the px margins.
5. The media box will appear on the page.
6. Add the text to your page and save.

Adding a Background Image to Your Menu Frame

1. You will need to prepare the picture you want for the background and make sure it is resized to the actual size.
2. Click 'insert image' button and upload your image to wikispaces. Do not place it on your page.
3. Click on the 'edit navigation' button to bring up the frame page and click the 'embed widget' button, click 'Other HTML' and paste in the following html.

<script language="javascript" type="text/javascript">
document.getElementsByTagName("body").item(0).style.background =
"url(http://gettingtrickywithwikis.wikispaces.com/space/showimage/swirl.jpg) #777";
</script>

4. You will now need to edit the html a little.
5. Change the url to your own wiki url - I used mine but you will need to substitue it for your own.

http://gettingtrickywithwikis.wikispaces.com/

6. Change the image tag at the end of the url to your own image tag - mine was called swirl.jpg. You will need to substitute it with the name of your own image.

http://gettingtrickywithwikis.wikispaces.com/space/showimage/swirl.jpg

7. Make sure you keep the rest of the url the same - i.e. '/space/showimage/' stays the same.

Now you have made a great background for your menu frame.

Using this technique you can make images in photoshop, including titles for your wiki, and bring them in to your wiki page.

Add a Scrolling Banner

1. Click on Manage Space in the left menu bar.
2. Click on Look and Feel under Space Settings heading.
3. Click on Change or Make a New Theme under Theme heading.
4. Go to Custom Themes and name your theme, and select the base theme from the drop down list - this wiki is 'original'.
5. Click edit under Custom Themes.
6. The page will now appear in html. Scroll down the html code until you come to <div class="menuWrapper"> It is about 2/3 of the way down the page.
7. Immediately after that code, copy and paste the following code

<br>
<table cellpadding="0" cellspacing="0" border="0" id="container">
<tr>
<td style="width: 8px;"><img src="/i/bTL.gif" width="8" height="8" alt="" class="corner" /></td>
<td style="border-top: 1px solid #AAA;" class="field" colspan="2"><img src="/i/c.gif" width="1" height="1" alt="" style="border: none; display: block !important;" /></td>
<td style="width: 8px;"><img src="/i/bTR.gif" width="8" height="8" alt="" class="corner" /></td>
</tr>
<tr>
<td style="border-left: 1px solid #AAA;" class="field"><br /></td>
<td valign="top" style="width: 100%;" class="field">
<marquee scrolldelay="100"><b>*Enhance Your Wiki With A Trick Or Two*</b></marquee>
</td>
<td valign="top" class="field"><img src="/i/c.gif" width="1" height="10" alt=""/></td>
<td style="border-right: 1px solid #AAA;" class="field"><br /></td>
</tr>
<tr>
<td width="8" class="bg"><img src="/i/bBL.gif" width="8" height="8" alt="" class="corner" /></td>
<td style="border-bottom: 1px solid #AAA;" class="field" colspan="2"><img src="/i/c.gif" width="1" height="1" alt="" style="border: none; display: block !important;" /></td>
<td width="8" class="bg"><img src="/i/bBR.gif" width="8" height="8" alt="" class="corner" /></td>
</tr>
</table>

8. Find the part in the code you have just pasted that says *Enhance Your Wiki With A Trick Or Two*. This is the bit you will edit.
9. Highlight the text as above in #8 and type your own text in.
10. Click save.
11. Click use theme under Custom Theme.
12. Hey Presto! Your text scrolls across the top of your wiki.

Create a Pop-Up Greeting for a Wiki Page

1. Click on the embed widget button and go to 'Other HTML'
2. Copy the code below and paste in.

<script language="Javascript" type="text/javascript">
//<![CDATA[
<!--
alert ("Lenva says Hi - hope you enjoy this site")
//-->
//]]>
</script>

3. Change my text to your own greeting.

Adding a Backgroung Image or Color to a Page

1. You will need to prepare the picture you want for the background and make sure it is resized to the actual size.
2. Click 'insert image' button and upload your image to wikispaces. Do not place it on your page.
3. Click the 'embed widget' button, click 'Other HTML' and paste in the following html.

<script language="javascript">
document.getElementById("content_view").style.background = "url('http://gettingtrickywithwikis.wikispaces.com/space/showimage/sky.jpg') center center no-repeat fixed;";
</script>

4. You will now need to edit the html a little.
5. Change the url to your own wiki url - I used mine but you will need to substitue it for your own.

http://gettingtrickywithwikis.wikispaces.com/

6. Change the image tag at the end of the url to your own image tag - mine was called sky.png. You will need to substitute it with the name of your own image.

http://gettingtrickywithwikis.wikispaces.com/space/showimage/sky.jpg

7. Make sure you keep the rest of the url the same - i.e. '/space/showimage/' stays the same.

Now you have made a great background for your page.

If you want a solid color background all you need is a solid colored image - make one in photoshop or any photo manipulation program (or take a screenshot on a Mac).

Embed a Webpage into a Wiki

You can make any webpage open in your wiki

1. Copy the code below.
2. Paste the code into the embed widget "Other HTML" button.

<iframe src="http://www.lenva.weebly.com"
frameborder="1" scrolling="auto" width="100%" height="600"></iframe>

3. Substitute my website address for any website you want to appear on your wiki page.
4. Alter the height settings or the border settings to suit.
5. If you don't want scrolling take it off, but make sure the dimensions you enter will show all of the page you want to see.
6. All the webpage links will still work inside this wiki.