We just created our own template and placed the markers. So, the next important step is to add that content from the TYPO3 backend.
You need to choose the section Template, and in the site tree, choose the page where you created the template. Click on the pencil icon near the Setup to open and to edit the TypoScript and to add our template:
Here we will place the markers that we specified in the template. Let's insert the following code. First you have to start with the template configuration that specifies to TYPO3 what should be displayed in the code, and which charset and languages should be be used:
# LANGUAGE setup, here we enter the uID of language (default # language has the value "0"), charset utf-8, the page # language, and the html tag configuration #----------------------------------------------------------- config.linkVars = L config.sys_language_uid = 0 config.metaCharset = utf-8 config.language = en config.uniqueLinkVars = 1 config.htmlTag_setParams = xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
If you need a second language for your online shop, you can add a configuration for the alternative language page content. You can also add three or more languages using the [global] condition:
# CONFIG FOR 2ND LANGUAGE
#-----------------------------------------------------------
[globalVar = GP:L = 1]
config.sys_language_uid = 1
config.language = de
config.metaCharset = utf-8
plugin.meta.language = de
config.htmlTag_setParams = xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"
[global]
# PAGE START
#-----------------------------------------------------------
page = PAGE
page {
# HEAD DATA - keywords and description
#-----------------------------------------------------------
meta.keywords = shop, berries, berry
meta.description = Our shop is the best!
# TEMPLATE - CSS and HTML file
#-----------------------------------------------------------
stylesheet = fileadmin/templates/berriesshop/css/style.css
10 = TEMPLATE
10.template = FILE
10.template.file = fileadmin/templates/berriesshop/index.html
10.workOnSubpart = DOCUMENT_BODY
10.marks {
Then you should add markers specifying enclosed resources—logos, content, and so on.
# LOGO - logo with link to "Home" page (that has ID=0) and # alttext
#-----------------------------------------------------------
LOGO = IMAGE
LOGO {
file = fileadmin/templates/berriesshop/img/logo.jpg
stdWrap.typolink.parameter = 0
alttext = Berries Shop
}
The next step is to add the top menu where the first level pages will be displayed. These pages will be specified in the sitemap:
# TOP MENU - this will be a text menu separated with "|" # symbol (pipe)
#-----------------------------------------------------------
TOP-MENU= HMENU
TOP-MENU{
# the first level of TMENU (textmenu) items (1)
1 = TMENU
1.wrap =
1 {
noBlur = 1
### No state (NO): formatting for normal items
NO{
wrapItemAndSub = <span>|</span>
allWrap = ||*| | |*|
}
### Current item (CUR)
CUR = 1
CUR{
wrapItemAndSub = <span class="active">|</span>
allWrap = ||*| | |*|
}
### Active state of item (ACT)
ACT = 1
ACT{
wrapItemAndSub = <span class="active">|</span>
allWrap = ||*| | |*|
}
}
}
Finally, you can add TypoScript to the main function—read the content data:
# LEFT MARKER - will be used for content and need to read the # content data from BE LEFT column
#-----------------------------------------------------------
LEFT = CONTENT
LEFT {
table = tt_content
select.orderBy = sorting
select.where = colPos = 1
}
# CONTENT MARKER - will be used for content and need to read
# the content data from BE CENTER column
#-----------------------------------------------------------
CONTENT = CONTENT
CONTENT {
table = tt_content
select.orderBy = sorting
select.where = colPos = 0
}
You can specify configuration for the language menu. If your web space contains only one language, you can skip the following part of the code. If it contains several languages, you have to specify the extra language IDs in the line. For example:
LANGMENU.special.value = 0,1,2,5
# and extra values for displayed text
10.text = EN || DE || FR || RU
# LANGMENU - Graphical language menu with two languages -
# English and German. To use this function - you must upload
# a true type font file (*.ttf) on your webspace
# You could upload the font in the same way like template/css/image files - using ssh, FTP software or from TYPO3 BE through "Filelist" module on the left menu.
#-----------------------------------------------------------
LANGMENU = HMENU
LANGMENU.special = language
LANGMENU.special.value = 0,1
LANGMENU.1 = GMENU
LANGMENU.1 {
NO {
1 = IMAGE
XY = 30,25
format = gif
backColor = #222222
transparentColor = #222222
10 = TEXT
10.fontFile = fileadmin/fonts/verdana.ttf
10.text = EN || DE
10.fontSize = 14
10.fontColor = #FFFFFF
10.offset = 0,17
10.niceText = 1
10.align = center
}
ACT = 1
ACT {
1 = IMAGE
XY = 30,25
format = gif
backColor = #222222
transparentColor = #222222
10 = TEXT
10.fontFile = fileadmin/fonts/verdana.ttf
10.text = EN || DE
10.fontSize = 14
10.fontColor = #FFFFFF
10.offset = 0,17
10.niceText = 1
10.align = center
}
}
The footer information follows, which provides extra information to visitors about this page, the company, and so on:
# FOOTER MARKER - your copyright, contacts, etc.
#-----------------------------------------------------------
FOOTER = TEXT
FOOTER {
value = All rights reserved, 2009 ©. www.berriesshop.ltd
}
}
After you add data, save it and close the setup.
By clicking on the pencil icon, according to the title, enter the following information:
- Title—name of the template.
- Sitetitle—name of the web page. This value will be seen in the web page source as the
<title>tag. - Description—description of the website.
Many extensions (like the e-Commerce extension) come with additional configuration templates that are used to set up the configuration and style specific to the extension. These are called static templates. You add them to your TYPO3 by clicking on Click here to edit whole template, then clicking on the Includes tab, and adding the CSS Styled Content (css_styled_content) template. If this static template is not added, none the text that you insert in the TYPO3 backend (admin side) will be displayed.
Also, you need to add extension templates in this section, because for this template you have to use static templates too. You can find detailed information about it in the appropriate extension installation guide. You can find all the extension documentation in the TYPO3 repository— http://typo3.org/extensions/repository/.
Save the added data and close the template.
Go to the template section Constants and add the following code. Using this code, we can specify the same fixed values:
- Maximum image width 520 px—image width can't be more than this value. This is useful for the correct page overview because large images can damage the look of the page.
- Replace sign @ with value "(at)" and encoding e-mail address with JavaScript. Replacing @ and encoding is useful to protect e-mails from spambots. Most of them collect e-mail addresses from the page HTML source.
# imgtext width - maximum image width is 520 # pixels styles.content.imgtext.maxW = 520 styles.content.imgtext.linkWrap.width = 520 # spam protection - will replace the "@" symbol with (at). # Works only, if the mailto link is set. config.spamProtectEmailAddresses = 2 config.spamProtectEmailAddresses_atSubst = (at)
Save the added values and close the template.
You will need to edit this field again when working with new extensions that you will use. Mostly, there are stored settings for extensions in this area.
Finally, you should make sure that the template entry in Clear is checked for Constants and Setup. Also, make sure that Rootlevel is checked as well. You should mark these options (Clear: Constants, Setup, and Rootlevel) because page template needs to specify the correct rootline so that TYPO3 doesn't need to search the nearest template by tree level, which could be close to the beginning of the page tree.
