TYPO3Buddy
TYPO3Buddy is on FacebookTYPO3Buddy is on Twitter
menu

The main typoscript template

A "template" or "template record" as refered to on pages about typoscript is a record from the database table "sys_template" in TYPO3. The main typoscript template is used to create and configure your website.

TYPO3Buddy constants and setup

The Constants and Setup parts of the main typoscript template of TYPO3Buddy are shown below. A lot of additional code has been added for the setup, mostly config variables. You can find a reference here.

Constants

# Setting link targets to nothing (no frames mode)
PAGE_TARGET =
content.pageFrameObj =

# set the maximum width of images for the RTE
styles.content.imgtext.maxW = 700

Setup for Fluid

config.doctype = html5
config.metaCharset = utf-8
config.no_cache = 0
config.admPanel = 0
config.debug = 0

config.spamProtectEmailAddresses = 2
config.spamProtectEmailAddresses_atSubst = -monkey-tail-
config.spamProtectEmailAddresses_lastDotSubst = -dot-

# replace baseURL with your domain, don't forget to add a trailing slash
# the following 3 lines are used primarily with the RealUrl extension
config.baseURL = http://typo3buddy.com/
config.simulateStaticDocuments = 0
config.tx_realurl_enable = 1

page = PAGE
page.typeNum = 0

page.10 = FLUIDTEMPLATE
page.10 {
    format = html
    file = fileadmin/templates/layouts/main_layout.html
    partialRootPath = fileadmin/templates/partials/
    layoutRootPath = fileadmin/templates/layouts/
    variables {
        content_main < styles.content.get
        content_main.select.where = colPos = 0
        content_column_1 < styles.content.get
        content_column_1.select.where = colPos = 1
        content_column_2 < styles.content.get
        content_column_2.select.where = colPos = 2
    }
}

page.10.file.stdWrap.cObject = CASE
page.10.file.stdWrap.cObject {
    key.data = levelfield:-1, backend_layout_next_level, slide
    key.override.field = backend_layout
   
    default = TEXT
    default.value = fileadmin/templates/main_1_column_with_menu.html
    1 = TEXT
    1.value = fileadmin/templates/main_1_column_with_menu.html
    2 = TEXT
    2.value = fileadmin/templates/main_1_column_without_menu.html
    3 = TEXT
    3.value = fileadmin/templates/main_2_column_without_menu.html
}

page.includeCSS {
    file1 = fileadmin/templates/css/main.css
}

# be sure to display website correctly in mobile browsers
page.headerData.10 = TEXT
page.headerData.10.value (
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="/fileadmin/templates/script/jquery.custom.js"></script>
)

Setup for Templavoila

config.doctype = html5
config.metaCharset = utf-8
config.no_cache = 0
config.admPanel = 0
config.debug = 0

config.spamProtectEmailAddresses = 2
config.spamProtectEmailAddresses_atSubst = -monkey-tail-
config.spamProtectEmailAddresses_lastDotSubst = -dot-

# replace baseURL with your domain
config.baseURL = http://typo3buddy.com
config.simulateStaticDocuments = 0
config.tx_realurl_enable = 1

page = PAGE
page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page

# be sure to display website correctly in mobile browsers
page.headerData.10 = TEXT
page.headerData.10.value (
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="/fileadmin/templates/script/jquery.custom.js"></script>
)

Inclusion of CSS files

When you've followed the Templavoila tutorial, your CSS file is included with Templavoila, but it's also possible to include it with typoscript, as you have seen when you've followed the Fluid tutorial. You can put this in the setup part of the main typoscript template, which includes the CSS file in the header of the HTML template:

page.includeCSS {
    file1 = fileadmin/templates/css/styles.css
}

These lines must be placed after the "page = PAGE" declaration.

Another way to add CSS is by using the page.headerData construct:

page.headerData.10 = TEXT
page.headerData.10.value (
    <link rel="stylesheet" type="text/css" href="fileadmin/templates/css/main.css" media="all">
)

Documentation

Most typoscript configuration options start with "config.". Go to this page for an overview of all options, which is part of a document named "TSRef", which means TypoScript reference. Quite an elaborate piece of text.

There's also another document called "TypoScript by example", which contains a lot of very useful configuration examples.

Next step: fill the empty parts of the website ->

The TYPO3Buddy website is a tutorial to rebuild the TYPO3Buddy website from scratch. You can choose from a TYPO3 Fluid tutorial and a TYPO3 Templavoila tutorial. You'll build TYPO3 websites like you've done so for years!