This is an discontinued version of YahooGridsAddOn. Extensions in the Extensions/Archived web are obsolete and no longer maintained.

How to configure your Foswiki to install from this repository

In lib/LocalSite.cfg, add this web's URL to {ExtensionsRepositories}:

Foswiki.org=(http://foswiki.org/Extensions/,http://foswiki.org/pub/Extensions/);Local=(https://foswiki.org/Extensions/Archived/,https://foswiki.org/pub/Extensions/Archived/)

Read more about configuring Extension repositories

Yahoo Grids add-on

Examples

Usage

1. Create content sections, one for each column
2. Include the column definition
3. Load the required stylesheet

Step 1: Create content sections

%STARTSECTION{"mainleft"}%
contents of the main left column
%ENDSECTION{"mainleft"}%

%STARTSECTION{"mainright"}%
contents of the right side column
%ENDSECTION{"mainright"}%

Step 2: Include the column definition

%INCLUDE{
"%SYSTEMWEB%.TwoColumnDefinition"
section="300right"
CONTENTTOPIC="%BASEWEB%.%BASETOPIC%"
COL1="mainleft"
COL2="mainright"
}%

• section name: one of the column type configurations of the definition topic
  • for example: onethirdleft, 160left, 300right
• CONTENTTOPIC: the topic the content resides in. This can be a different topic.
• For 2 columns (defined in TwoColumnDefinition):
  • COL1: name of the section that contains left column contents
  • COL2: name of the section that contains left column contents
• For 4 columns (defined in FourColumnDefinition):
  • COL1: name of the section that contains column 1 contents
  • COL2, COL3, COL4: section names for the other columns

Step 3: Load the stylesheet

<style type="text/css" media="all">
   @import url("%PUBURLPATH%/%SYSTEMWEB%/YahooGridsAddOn/grids-min.css");
</style>

%ADDTOHEAD{"yahoogridsaddon" text="<style type=\"text/css\" media=\"all\">
@import url(\"%PUBURLPATH%/%SYSTEMWEB%/YahooGridsAddOn/grids-min.css\");
</style>"}%

Column definitions

• TwoColumnDefinition - defines for example: onethirdleft, 160left, 300right
• ThreeColumnDefinition
• FourColumnDefinition

Stylesheet classes

• .ygColumnLeft - right column
• .ygColumnRight - right column
• .ygColumn - a column that is not a left nor a right column

.ygColumn {
   padding:0 .5em;
}
.ygColumnLeft {
   padding:0 .5em 0 0;
}
.ygColumnRight {
   padding:0 0 0 .5em;
}

Installation Instructions

Test

%STARTSECTION{"testleft"}%
3/4 <br />
contents of the main left column
%ENDSECTION{"testleft"}%

%STARTSECTION{"testright"}%
1/4 <br />
contents of the right side column
%ENDSECTION{"testright"}%

Troubleshooting

TML formatting messed up

%STARTSECTION{"mainleft"}%---+ Topic title%ENDSECTION{"mainleft"}%

%STARTSECTION{"mainleft"}%
---+ Topic title
%ENDSECTION{"mainleft"}%

Overlapping columns

Further information

AddOn Info