Table of Contents

Note: The 2-column layout effect can also be built in CSS using no HTML tables. Hopefully we can have an example of that up here soon.

There are a great deal of design options available using the Insert Widget Tool functionality of Wikispaces (formerly called "Embed Media"), but users should be cautious of cross-platform rendering issues. Please consult the lists of Web Browsers and Web Standards when testing custom Themes across multiple browsers for compatibility.



How to Build

  • Item 1
  • Item 2
  • Item 3

2 Blue Columns!

  • Item 4
  • Item 5
  • Item 6

For more on building color boxes, see Pretty colored text boxes in SealWyf's Sandbox Files.
For more on building page columns, see A two-column page in SealWyf's Sandbox Files.

It might sound ironic, but these columns do not use Wikispaces' built-in table functionality ( || Wikispaces || Table || ).
Wikispaces
Table

The blue table effect can be seen on the navigation page. It is recommended that you use 3 include files when building your table of 2 colored columns. In this way, you can reuse your code on as many pages as you like, within your wiki, without having to rewrite more code. This example uses HTML and JavaScript code, but could also benefit from some CSS styling. As you begin to understand how the code works, you can easily develop more sophisticated HTML and CSS effects.

1. Create a wikipage called table_col2_blue_top. This wikipage will hold the information to start building your colored table. The page consists entirely of only 1 section of embedded code -- entered with the Insert Widget Tool. The Widget tool looks like a TV set, and the entered code looks something like the following.

Contents of wikipage: table_col2_blue_top
<script language="JavaScript" type="text/javascript">
document.write('<table bgcolor="#ddeeff" width="100%"><tr><td width="50%">')
</script>
In the code sample above, you could change the bgcolor attribute.

2. Next you will create 2 similar, but simpler wikipages. The second wikipage simply declares where the colored table breaks into its second column. Again, the code must be inserted into the Widget tool. No other content resides on this wikipage.

Contents of wikipage: table_mid
<script language="JavaScript" type="text/javascript">
document.write('<\/td><td width="50%">')
</script>
In this code, you could set bgcolor and CSS stylings for the second column. The code also goes into the Widget tool, with no other wikipage content.

3. Finally, finish off your columns by terminating the table.

Contents of wikipage: table_bot
<script language="JavaScript" type="text/javascript">
document.write('<\/td><\/tr><\/table>')
</script>

Warning! While creating and editing these wikipages, there is a chance that you will have difficulty opening your wikipage for editing. Oftentimes the problem can be remedied by linking directly to your Wikispaces wikipage editor: http://MYWIKISPACE.wikispaces.com/page/edit/MYWIKIPAGE (for example -- point your browser to your own wikispace and wikipage for editing).

Once the 3 wikipages are ready for include, you can create colored tables on as many wikipages as you like. (As of July 2007, page includes are allowed only within the same wikispace -- not across separate wikispaces.) To create the blue table that heads up this section, you would type into your wikipage editor:
[[include page="table_col2_blue_top"]]
===How to Build===
* **Item 1**
* **Item 2**
* **Item 3**
[[include page="table_mid"]]
===2 Blue Columns!===
* **Item 4**
* **Item 5**
* **Item 6**
[[include page="table_bot"]]
Note that when declaring your colored table on a wikipage — according to this method — you are not using the Widget tool. The "widget(s)" (actually, the JavaScript, HTML and CSS) are already embedded in the included pages. This safely hides your widget/media/code on its own separate pages, for re-use whenever you like, and somewhat protected from other users who might edit your code inadvertently.