After i have looket at host.sonspring.com/hoverbox/ (thanks to a forumpost ) i decidet to implement this as a example.

With this small extension i would like to show how to write typoscript code into a extension to reuse it for other projects.

I have used the kickstarter for this.

What i did:

1. Installed the Kickstatrter and selected in the Extension Manager "Create new extension"

2. Written all the details into "General Info" and choosed a unique extension name.

3. Inserted the title and the typoscript setup/ constants in "static TypoScript code ".

After installing the extension you can choose to include the typoscript when editing the template record in "Include static (from extensions):".

For my sample i used following typoscript code:

Constants:

styles.content.imgtext.colSpace = 5
styles.content.imgtext.rowSpace = 5
styles.content.imgtext.borderColor = #CCCCCC
styles.content.imgtext.borderThick = 1
styles.content.imgtext.borderSpace = 8

Setup:

tt_content.image.20.border>
tt_content.image.20.border=1
tt_content.image.20.1.imageLinkWrap =0
tt_content.image.20.1.imageLinkWrap>
tt_content.image.20.1.stdWrap.innerWrap(
  <a href="#"><img src="{current:1}" class="preview" />|</a>
)
tt_content.image.20.1.stdWrap.innerWrap.insertData=1
page.headerData.54=TEXT
page.headerData.54.insertData=1
page.headerData.54.data(
  PATH:EXT:t3w_hoverbox/static/Images_Text_with_image_Hoverbox/style.css
)
page.headerData.54.wrap=<link rel="stylesheet" type="text/css" href="|" />

page.headerData.55=TEXT
page.headerData.55.insertData=1
page.headerData.55.data(
   PATH:EXT:t3w_hoverbox/static/Images_Text_with_image_Hoverbox/ie.css
)
page.headerData.55.wrap(
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="|" />
<![endif]-->
}
 - ERROR: Line 26: A multiline value section is not ended with a parenthesis!;Line 54: A multiline value section is not ended with a parenthesis!

Download t3x

Example Hoverbox