Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migration of unmigrated content due to installation of a new plugin
Composition Setup
deck.tab.active.background = #6495ED
Section
Column
width20%15%
Excerpt Include
pluglib:Advanced Macros Pluginpluglib:
Advanced Macros Plugin
nopaneltrue
Column
width60%
Deck of Cards
width907px
idContent Formatting
Card
labelOverview

Content Formatting Macros

A set of macros that allow easy formatting of Wiki content.

This plugin includes the following macros:
  • lozenge - an attractive, customisable lozenge button
  • bgcolor - set content background color
  • highlight - highlight background of bits of content
  • Symbols - insert a service, trade, or registered trademark.
  • center - center content on screen (including tables, etc)
  • strike - a graphical strikeout effect
  • clickable - hyperlinks all contained content to a page or URL
  • roundrect - an attractive customisable round rectangle
  • align - allows you to left/right/center and justify-align your content
  • iframe - allows you to create iframes
  • rollover - allows you to create rollover effects
Wiki Markup
{deck:id=Content Formatting|width=907px} {card:label=Overview} h4. Content Formatting Macros A set of macros that allow easy formatting of Wiki content. h5. This plugin includes the following macros: * *lozenge* - an attractive, customisable lozenge button * *bgcolor* - set content background color * *highlight* - highlight background of bits of content * *Symbols* - insert a service, trade, or registered trademark. * *center* - center content on screen (including tables, etc) * *strike* - a graphical strikeout effect * *clickable* - hyperlinks all contained content to a page or URL * *roundrect* - an attractive customisable round rectangle * *align* - allows you to left/right/center and justify-align your content * *iframe* - allows you to create iframes * *rollover* - allows you to create rollover effects {card} {card:label=Documentation} {deck:id=contentm} {card:label=lozenge} This macro creates a professional lozenge effect that's ideal for creating professional looking buttons or simply highlighting important information. h3.The Code : With an icon: {code}
Card
labelDocumentation
Deck of Cards
idcontentm

Card
labellozenge

This macro creates a professional lozenge effect that's ideal for creating professional looking buttons or simply highlighting important information.

The Code

With an icon:

Code Block

{lozenge:icon=!bell.png!|title=Announcement}Some important news here...{lozenge}
{code}

Without

an

icon

and

with

a

custom

color:

{

Code Block
}

{lozenge:title=Announcement|color=red}Some important news here...{lozenge}
{code} h3. What you will get : With an icon : {lozenge:icon=

Toggle Cloak
idcloak
Result

Cloak
idcloak

With an icon :

!bell.png!
|title=
Announcement
}
Some
important
news
here...
{lozenge}

Without

an

icon

and

with

a

custom

color:

{lozenge:title=Announcement|color=red}Some important news here...{lozenge} h3. Parameters ||*Name*||*Required?*||*Default*||*Description*|| |link|(x)| | if specified, clicking the lozenge will go to the specified link.| |color|(x)| silver| The color of the left portion of the lozenge. | |arrow|(x)| none or blue| Defines which arrow to use on the left portion of the lozenge: * none (default if no "link" specified) - the arrow will not be displayed * blue (default if a link is specified) - a blue arrow will be displayed * green - a green arrow will be displayed.| |title|(x)| |The title to show at the top of the main panel.| |icon|(x)| |Attach an image (see above) or some text to the left of the lozenge.| |width|(x)|347px|The width of the entire lozenge in pixels or as a percentage. Specify auto to make the lozenge automatically stretch to fit it's contents.| {card} {card:label=bgcolor} Sets the background color for a section of content. You can specify a background color using color names or hexadecimal color codes. h3. The Code : Color names: {code}

AnnouncementredSome important news here...

Toggle Cloak
idcloak1
Parameters

Cloak
idcloak1

Name

Required?

Default

Description

link

 

if specified, clicking the lozenge will go to the specified link.

color

silver

The color of the left portion of the lozenge.

arrow

none or blue

Defines which arrow to use on the left portion of the lozenge:

  • none (default if no "link" specified) - the arrow will not be displayed
  • blue (default if a link is specified) - a blue arrow will be displayed
  • green - a green arrow will be displayed.

title

 

The title to show at the top of the main panel.

icon

 

Attach an image (see above) or some text to the left of the lozenge.

width

347px

The width of the entire lozenge in pixels or as a percentage. Specify auto to make the lozenge automatically stretch to fit it's contents.

Card
labelbgcolor

Sets the background color for a section of content. You can specify a background color using color names or hexadecimal color codes.

The Code

Color names:

Code Block

{bgcolor:red}red{bgcolor}
{bgcolor:yellow}yellow{bgcolor}
{bgcolor:green}green (default){bgcolor}
{bgcolor:cyan}cyan{bgcolor}
{bgcolor:blue}blue{bgcolor}
{bgcolor:purple}purple{bgcolor}
{code}

Hexadecimal:

{

Code Block
}

{bgcolor:#E47833}mandarin orange{bgcolor}
{bgcolor:#802A2A}brown{bgcolor}
{bgcolor:#F08080}light coral{bgcolor}
{bgcolor:#800000}maroon{bgcolor}
{bgcolor:#D44942}chili{bgcolor}
{bgcolor:#CDB7B5}misty rose{bgcolor}
{code} h3. What you will get : Color names: {bgcolor:red}red{bgcolor} {bgcolor:yellow}yellow{bgcolor} {bgcolor:green}green{bgcolor} {bgcolor:cyan}cyan{bgcolor} {bgcolor:blue}blue{bgcolor} {bgcolor:purple}purple{bgcolor} Hexadecimal: {bgcolor:#E47833}mandarin orange{bgcolor} {bgcolor:#802A2A}brown{bgcolor} {bgcolor:#F08080}light coral{bgcolor} {bgcolor:#800000}maroon{bgcolor} {bgcolor:#D44942}chili{bgcolor} {bgcolor:#CDB7B5}misty rose{bgcolor} h3.Parameters {code} {bgcolor:myColor}your content{bgcolor} {code} ||*Name*||*Required?*||*Default*||*Description*|| |default|(/)|green|The "myColor" default parameter defines the background colour for the content contained within the macro and can be either a common colour name (supported by most browsers) or a hexadecimal colour code (supported by all browsers).| {card} {card:label=highlght} Allows you to highlight a portion of content. You can specify a color using color names or hexadecimal color codes. h3. The Code : {code} {

Toggle Cloak
idcloak2
Result

Cloak
idcloak2

Color names:
redred
yellowyellow
greengreen
cyancyan
blueblue
purplepurple
Hexadecimal:
#E47833mandarin orange
#802A2Abrown
#F08080light coral
#800000maroon
#D44942chili
#CDB7B5misty rose

Toggle Cloak
idcloak3
Parameters

Cloak
idcloak3

Name

Required?

Default

Description

default

green

The "myColor" default parameter defines the background colour for the content contained within the macro and can be either a common colour name (supported by most browsers) or a hexadecimal colour code (supported by all browsers).

Card
labelhighlght

Allows you to highlight a portion of content. You can specify a color using color names or hexadecimal color codes.

The Code

Code Block

{highlight:red}red{highlight}
{highlight:yellow}yellow (default){highlight}
{highlight:green}green{highlight}
{highlight:cyan}cyan{highlight}
{highlight:blue}blue{highlight}
{highlight:purple}purple{highlight}
{code} h3. What you will get : {highlight:red}red{highlight} {highlight:yellow}yellow{highlight} {highlight:green}green{highlight} {highlight:cyan}cyan{highlight} {highlight:blue}blue{highlight} {highlight:purple}purple{highlight} h3.Parameters {code} {bgcolor:myColor}your content{bgcolor} {code} ||*Name*||*Required?*||*Default*||*Description*|| |default|(/)|yellow|The "myColor" default parameter defines the background colour for the content contained within the macro and can be either a common colour name (supported by most browsers) or a hexadecimal colour code (supported by all browsers).| {card} {card:label=Symbols} Add a trademark, a service mark, copyright, or registered trademark h3. The Code : Trademark: {code}

Toggle Cloak
idcloak4
Result

Cloak
idcloak4

redred
yellowyellow
greengreen
cyancyan
blueblue
purplepurple

Toggle Cloak
idcloak5
Parameters

Cloak
idcloak5

Name

Required?

Default

Description

default

yellow

The "myColor" default parameter defines the background colour for the content contained within the macro and can be either a common colour name (supported by most browsers) or a hexadecimal colour code (supported by all browsers).

Card
labelSymbols

Add a trademark, a service mark, copyright, or registered trademark

The Code

Trademark:

Code Block

{tm}Like a Rock{tm}
{code}

Service

Mark:

{

Code Block
}

{sm}My Service{sm}
{code}

Copyright:

{

Code Block
}

{copyright}2010 Massachusetts Institute of Technology{copyright}
{code}

Registered

Trademark:

{

Code Block
}

{reg-tm}Registered Trademark{reg-tm}
{code} h3. What you will get : Trademark: {tm}Like a Rock{tm} Service Mark: {sm}My Service{sm} Copyright: {copyright}2010 Massachusetts Institute of Technology{copyright} Registered Trademark: {reg-tm}Registered Trademark{reg-tm} {card} {card:label=center} Use this macro to center a portion of content. h3. The Code : {code}

Toggle Cloak
idcloak6
Result

Cloak
idcloak6

Trademark:
Like a Rock
Service Mark:
My Service
Copyright:
2010 Massachusetts Institute of Technology
Registered Trademark:
Registered Trademark

Card
labelcenter

Use this macro to center a portion of content.

The Code

Code Block

{center}Some centered content.{center}
{code} h3. What you will get : {center}Some centered content.{center} {card} {card:label=style} This macro is designed to allow a single page to have custom styles applied to it. The style sheet can optionally be restricted to specific media types and you can optionally import an external style sheet from a URL. h3. The Code : This style sheet will make citation text look pretty: {code}

Toggle Cloak
idcloak7
Result

Cloak
idcloak7
Some centered content.
Card
labelstyle

This macro is designed to allow a single page to have custom styles applied to it. The style sheet can optionally be restricted to specific media types and you can optionally import an external style sheet from a URL.

The Code

This style sheet will make citation text look pretty:

Code Block

{style}
/* citation */
cite:before {
 content: "\"";
}
cite:after {
 content: "\"";
}
cite, cite:before, cite:after {
 font-family: Georgia, "Times New Roman", serif;
 font-style: italic;
}
{style}
{code}

Now

enter

some

citation

text:

{

Code Block
}

??Some citation text??
{code} h3. What you will get : ??Some citation text?? h3.Parameters {code} {style:media=x,y,z|import=url} style sheet {style} {code} ||*Name*||*Required?*||*Default*||*Description*|| |media|(x)|All|The media to apply this style sheet to, by default all media types are used.| |import|(x)| | Optionally specify a URL to import an external style sheet.| {card} {card:label=strike} Adds a more graphical representation of -deleted text-. h3. The Code : {code}

Toggle Cloak
idcloak8
Result

Cloak
idcloak8

Some citation text

Toggle Cloak
idcloak9
Parameters

Cloak
idcloak9

Name

Required?

Default

Description

media

All

The media to apply this style sheet to, by default all media types are used.

import

 

Optionally specify a URL to import an external style sheet.

Card
labelstrike

Adds a more graphical representation of deleted text.

The Code

Code Block

{strike}deleted text{strike}
{code} h3. What you will get : {strike}deleted text{strike} {card} {card:label=clickable} With this macro you can easily and cleanly link entire blocks of text, panels and just about anything else that appears on your Wiki pages. h3. The Code : {code}

Toggle Cloak
idcloak10
Result

Cloak
idcloak10

deleted text

Card
labelclickable

With this macro you can easily and cleanly link entire blocks of text, panels and just about anything else that appears on your Wiki pages.

The Code

Code Block

Visit the {clickable:I NEED HELP!!|HELP:Home}*Wiki Help Pages*{clickable} for support.
{code} h3. What you will get : Visit the {clickable:I NEED HELP!!|HELP:Home}*Wiki Help Pages*{clickable} for support. {note:title=Make sure you use a graphical marker to indicate the link otherwise the it will appear as normal text} h3.Parameters {code} {clickable:tooltip|link}body content{clickable} {code} ||*Name*||*Required?*||*Default*||*Description*|| |default|(/)| | The default parameter should contain a tooltip and the page to link to (which can be an internal or external link as desired.| {card} {card:label=roundect} Creates a round rectangle with text or content. h3. The Code : Without a custom color: {code}

Toggle Cloak
idcloak11
Result

Cloak
idcloak11

Visit the HELP:HomeI NEED HELP!!INLINEWiki Help Pages for support.

Make sure you use a graphical marker to indicate the link otherwise the it will appear as normal text

Toggle Cloak
idcloak12
Parameters

Cloak
idcloak12

Name

Required?

Default

Description

default

 

The default parameter should contain a tooltip and the page to link to (which can be an internal or external link as desired.

Card
labelroundrect

Creates a round rectangle with text or content.

The Code

Without a custom color:

Code Block

{roundrect}Some Content{roundrect}
{code}

With

a

custom

color:

{

Code Block
}

{roundrect:bgcolor=#9966CC }Some Content{roundrect}
{code}

With

a

custom

color

and

title:

{

Code Block
}

{roundrect:bgcolor=#9966CC |title=Title}Some Content{roundrect}
{code} h3. What you will get : Without a custom color: {roundrect}Some Content{roundrect} With a custom color: {roundrect:bgcolor=#9966CC }Some Content{roundrect} With a custom color and title: {roundrect:bgcolor=#9966CC |title=Title}Some Content{roundrect} h3.Parameters {code} {roundrect:title=myTitle}body content{roundrect} {code} ||*Name*||*Required?*||*Default*||*Description*|| |bgcolor|(x)|#C0FFC0|The background colour of the rounded rectangle, this should be specified as a hex value.| |title|(x)| |The contents of the title cell, if required.| |footer|(x)| |The contents of the footer cell, if required.| |width|(x)|fit contents|By default, the panel width will stretch to fit it's contents, unless you specify a specific width.| |height|(x)|fit contents|By default, the panel height will stretch to fit it's contents, unless you specify a specific height| |cornersize|(x)|25px|The radius, in pixels, of the panel corners. This sets the defaults for the hSize and vSize parameters below.| |hSize|(x)|cornersize|This parameter, which defaults to the value defined by cornersize, defines the width of the panel corners.| |vSize|(x)|cornersize|This parameter, which defaults to the value defined by cornersize, defines the height of the panel corners.| |antialias|(x)|false|Setting the antialias parameter will result in much smoother corners and enable the cornercolor parameter.| |footerbgcolor|(x)|bgcolor|The background colour of the footer area (defaults to the same colour as the overall background colour bgcolor), this should be specified as a hex value.| |titlebgcolor|(x)|bgcolor|The background colour of the title area (defaults to the same colour as the overall background colour bgcolor), this should be specified as a hex value.| |corners|(x)|true,true,true,true|a comma separated list of flags stating which corners should be rounded: Top Left, Top Right, Bottom Left, Bottom Right. |rows|(x)|true, true, true|a comma separated list of flags stating which rows should be displayed: Top, Middle, Bottom.| {card} {card:label=align} Allows the aligning of text. h3. The Code : Justified: {code}

Toggle Cloak
idcloak13
Result

Cloak
idcloak13

Without a custom color:

Some Content

With a custom color:

#9966CCSome Content

With a custom color and title:

#9966CCTitleSome Content

Toggle Cloak
idcloak14
Parameters

Cloak
idcloak14

Name

Required?

Default

Description

bgcolor

#C0FFC0

The background colour of the rounded rectangle, this should be specified as a hex value.

title

 

The contents of the title cell, if required.

footer

 

The contents of the footer cell, if required.

width

fit contents

By default, the panel width will stretch to fit it's contents, unless you specify a specific width.

height

fit contents

By default, the panel height will stretch to fit it's contents, unless you specify a specific height

cornersize

25px

The radius, in pixels, of the panel corners. This sets the defaults for the hSize and vSize parameters below.

hSize

cornersize

This parameter, which defaults to the value defined by cornersize, defines the width of the panel corners.

vSize

cornersize

This parameter, which defaults to the value defined by cornersize, defines the height of the panel corners.

antialias

false

Setting the antialias parameter will result in much smoother corners and enable the cornercolor parameter.

footerbgcolor

bgcolor

The background colour of the footer area (defaults to the same colour as the overall background colour bgcolor), this should be specified as a hex value.

titlebgcolor

bgcolor

The background colour of the title area (defaults to the same colour as the overall background colour bgcolor), this should be specified as a hex value.

corners

true,true,true,true

a comma separated list of flags stating which corners should be rounded: Top Left, Top Right, Bottom Left, Bottom Right.

rows

true, true, true

a comma separated list of flags stating which rows should be displayed: Top, Middle, Bottom.

Card
labelalign

Allows the aligning of text.

The Code

Justified:

Code Block

{align:justify}
some content
{align}
{code}

Align

right:

{

Code Block
}

{align:right}
some content
{align}
{code}

Align

left:

{

Code Block
}

{align:left}
some content
{align}
{code}

Align

center:

{

Code Block
}

{align:center}
some content
{align}
{code} h3. What you will get : *Justified:* {align:justify} Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam fermentum vestibulum est. Cras rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis tortor. Donec non ipsum. Mauris condimentum, odio nec porta tristique, ante neque malesuada massa, in dignissim eros velit at tellus. Donec et risus in ligula eleifend consectetuer. Donec volutpat eleifend augue. Integer gravida sodales leo. Nunc vehicula neque ac erat. Vivamus non nisl. Fusce ac magna. Suspendisse euismod libero eget mauris. {align} *Align right:* {align:right} Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam fermentum vestibulum est. Cras rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis tortor. Donec non ipsum. Mauris condimentum, odio nec porta tristique, ante neque malesuada massa, in dignissim eros velit at tellus. Donec et risus in ligula eleifend consectetuer. Donec volutpat eleifend augue. Integer gravida sodales leo. Nunc vehicula neque ac erat. Vivamus non nisl. Fusce ac magna. Suspendisse euismod libero eget mauris. {align} *Align left:* {align:left} Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam fermentum vestibulum est. Cras rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis tortor. Donec non ipsum. Mauris condimentum, odio nec porta tristique, ante neque malesuada massa, in dignissim eros velit at tellus. Donec et risus in ligula eleifend consectetuer. Donec volutpat eleifend augue. Integer gravida sodales leo. Nunc vehicula neque ac erat. Vivamus non nisl. Fusce ac magna. Suspendisse euismod libero eget mauris. {align} *Align center:* {align:center} Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam fermentum vestibulum est. Cras rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis tortor. Donec non ipsum. Mauris condimentum, odio nec porta tristique, ante neque malesuada massa, in dignissim eros velit at tellus. Donec et risus in ligula eleifend consectetuer. Donec volutpat eleifend augue. Integer gravida sodales leo. Nunc vehicula neque ac erat. Vivamus non nisl. Fusce ac magna. Suspendisse euismod libero eget mauris. {align} h3.Parameters {code} {align:alignment}your content{align} {code} ||*Name*|*Required?*|*Default*|*Description*|| |default|(/)|justify |* left Aligns text and content to the left of the page * right Aligns text and content to the right of the page * center Aligns text and content to the center of the page * justify Justifies text and content to fit the width of the page (default)| {card} {card:label=iframe} Displays a web-page within a Wiki page. h3. The Code : {code}

Toggle Cloak
idcloak14
Result

Cloak
idcloak14

Justified:

justify

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam fermentum vestibulum est. Cras rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis tortor. Donec non ipsum. Mauris condimentum, odio nec porta tristique, ante neque malesuada massa, in dignissim eros velit at tellus. Donec et risus in ligula eleifend consectetuer. Donec volutpat eleifend augue. Integer gravida sodales leo. Nunc vehicula neque ac erat. Vivamus non nisl. Fusce ac magna. Suspendisse euismod libero eget mauris.

Align right:

right

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam fermentum vestibulum est. Cras rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis tortor. Donec non ipsum. Mauris condimentum, odio nec porta tristique, ante neque malesuada massa, in dignissim eros velit at tellus. Donec et risus in ligula eleifend consectetuer. Donec volutpat eleifend augue. Integer gravida sodales leo. Nunc vehicula neque ac erat. Vivamus non nisl. Fusce ac magna. Suspendisse euismod libero eget mauris.

Align left:

left

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam fermentum vestibulum est. Cras rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis tortor. Donec non ipsum. Mauris condimentum, odio nec porta tristique, ante neque malesuada massa, in dignissim eros velit at tellus. Donec et risus in ligula eleifend consectetuer. Donec volutpat eleifend augue. Integer gravida sodales leo. Nunc vehicula neque ac erat. Vivamus non nisl. Fusce ac magna. Suspendisse euismod libero eget mauris.

Align center:

center

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam fermentum vestibulum est. Cras rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quis tortor. Donec non ipsum. Mauris condimentum, odio nec porta tristique, ante neque malesuada massa, in dignissim eros velit at tellus. Donec et risus in ligula eleifend consectetuer. Donec volutpat eleifend augue. Integer gravida sodales leo. Nunc vehicula neque ac erat. Vivamus non nisl. Fusce ac magna. Suspendisse euismod libero eget mauris.

Toggle Cloak
idcloak15
Parameters

Cloak
idcloak15

Name

Required?

Default

Description

default

justify

  • left Aligns text and content to the left of the page
  • right Aligns text and content to the right of the page
  • center Aligns text and content to the center of the page
  • justify Justifies text and content to fit the width of the page (default)
Card
labeliframe

Displays a web-page within a Wiki page.

The Code

Code Block

{iframe:src=http://stellar.mit.edu/|width=500|height=500}Your browser does not support iframes{iframe}
{code} h3. What you will get : {iframe:src=

Toggle Cloak
idcloak16
Result

Cloak
idcloak16
http://stellar.mit.edu/
|width=
500
|height=
500
}

Your

browser

does

not

support

iframes{iframe} h3.Parameters {code} {iframe:src=http://www.website.com} text to show when browser does not support iframes {iframe} {code} ||*Name*||*Required?*||*Default*||*Description*|| |class|(x)| | The class to associate with the tag. Multiple classes can be specified by separating them with spaces.| |title|(x)| |An optional inline style sheet to apply to the tag.| |style|(x)| |Optional extra information about the tag.| |id|(x)| | The html ID of the tag.| |align|(x)| |The alignment of the iframe

iframes

Toggle Cloak
idcloak17
Parameters

Cloak
idcloak17

Name

Required?

Default

Description

class

 

The class to associate with the tag. Multiple classes can be specified by separating them with spaces.

title

 

An optional inline style sheet to apply to the tag.

style

 

Optional extra information about the tag.

id

 

The html ID of the tag.

align

 

The alignment of the iframe (left/right/top/middle/bottom).

| |frameborder|(x)| |Whether to display a border

frameborder

 

Whether to display a border (0/1).

| |height|(x)| |The iframe height in

height

 

The iframe height in px/%.

| |longdesc|(x)| |A url to a page which contains a long description of the content within the iframe.| |marginheight|(x)| |The size of the top/bottom margins of the iframe.| |marginwidth|(x)| |The size of the left/right margins of the iframe.| |name|(x)| |The name of the iframe.| |scrolling|(x)| |Whether to show scrollbars or not

longdesc

 

A url to a page which contains a long description of the content within the iframe.

marginheight

 

The size of the top/bottom margins of the iframe.

marginwidth

 

The size of the left/right margins of the iframe.

name

 

The name of the iframe.

scrolling

 

Whether to show scrollbars or not (yes/no/auto).

| |src|(/)| |The url to be displayed within the iframe.| |width|(x)| |The width of the iframe in px/%.| {card} {card:label=rollover} Displays text when cursor hovers over designated area. h3. The Code : Basic rollover: {code} {style} .test { background-color:#00AA00; color:#000000; } .test-rollover { background-color:#0000AA; color:#FFFFFF; } {style} {rollover:class=test}{div}Some Content{div}{rollover} {code} Rollover with link: {code} {rollover:class=test|link=ADAPTAVIST:home}{div}Link to main homepage{div}{rollover} {code} Rollover with link and pointer: {code} {style} .pointy-rollover { background-color:#0000AA; color:#FFFFFF; cursor:pointer; } {style} {code} {code} {rollover:class=test|over=pointy-rollover|link=MITDASHBOARD:home}{div}Link to MIT Wikis{div}{rollover} {code} Outside webpages can also be linked to by entering the url in the 'link=' parameter. h3. What you will get : Basic rollover:

src

 

The url to be displayed within the iframe.

width

 

The width of the iframe in px/%.

Card
labelrollover

Displays text when cursor hovers over designated area.

The Code

Basic rollover:

Code Block

{style}
.test {
background-color:#00AA00;
color:#000000;
}
.test-rollover {
background-color:#0000AA;
color:#FFFFFF;
}
{style}
{rollover:class=test}{div}Some Content{div}{rollover}

Rollover

with

link:

Code Block

{rollover:class=test|link=
MITDASHBOARD
ADAPTAVIST:
Wikis
home}{div}Link to 
MIT
main 
Wikis
homepage{div}{rollover}

Rollover

with

link

and

pointer:

Code Block

{style}
.pointy-rollover {
background-color:#0000AA;
color:#FFFFFF;
cursor:pointer;
}
{style}
Code Block

{rollover:class=test|over=pointy-rollover|link=MITDASHBOARD:
Wikis
home}{div}Link to MIT Wikis{div}{rollover}
h3.Parameters {code} {rollover:class=test}body content{rollover} {code} ||*Name*||*Required?*||*Default*||*Description*|| |class|(/)| |The name of the CSS class that contains the styles for the rollover when in it's default state.| |over|(x)|class-over|The name of the CSS class that contains the styles for the rollover when it is in the over state.| |link|(x)| |The page that the rollover should link to when clicked.| |target|(x)| |An optional external target to also modify.| |targetclass|(x)| |An optional class name to use solely for the external target (defaults to class).| |targetover|(x)| |An optional class name to use solely for the external target roll-over state(defaults to %targetclass%-rollover).| {card} {card} {deck} {deck} {roundrect:bgcolor=#828282|width=907px|height=50px|corners=false,false,true,true} {roundrect}

Outside webpages can also be linked to by entering the url in the 'link=' parameter.

Toggle Cloak
idcloak18
Result

Cloak
idcloak18

Basic rollover:

testSome Content

Rollover with link:

testMITDASHBOARD:WikisLink to MIT Wikis

Rollover with link and pointer:

testpointy-rolloverMITDASHBOARD:WikisLink to MIT Wikis

Toggle Cloak
idcloak19
Parameters

Cloak
idcloak19

Name

Required?

Default

Description

class

 

The name of the CSS class that contains the styles for the rollover when in it's default state.

over

class-over

The name of the CSS class that contains the styles for the rollover when it is in the over state.

link

 

The page that the rollover should link to when clicked.

target

 

An optional external target to also modify.

targetclass

 

An optional class name to use solely for the external target (defaults to class).

targetover

 

An optional class name to use solely for the external target roll-over state(defaults to %targetclass%-rollover).

Card

Deck of Cards

Round Rectangle
cornersfalse,false,true,true
bgcolor#828282
width909px
height50px

Column
width20%