This chapter shows you how to configure the designed template, and discusses the most frequently encountered issues. It also shows you how to upgrade TYPO3 to a newer version. The topics covered are:
- TYPO3 script configuration
- Template markers
- Manual template adding
- Upgrading to a newer version
By the end of this chapter, you will know the difference between the two types of templates—the TypoScript configuration templates and the HTML layout templates—and you will have added design into the TYPO3 CMS. It is useful to follow the TYPO3 CMS updates. So, this chapter explains how to upgrade your web page to newer version of TYPO3.
For TYPO3, you can use templates in the same way as for all web pages and for more well-known content management systems. There are several kinds of templates already developed that you can use, or you can develop your own template.
It is an important fact that for making an HTML template for your TYPO3 web page, you need to have a basic knowledge of HTML and TYPO3-specific configuration—TypoScript. However, you don't have to know PHP.
TypoScript is a powerful configuration language used in TYPO3. TypoScript isn't a programming language, it is a configuration language that provides output for already-programmed functions. With TypoScript, you can't program new functions.
Most of TypoScript configuration is related to creating templates, but you can also use TypoScript for other configurations. For example, with TypoScript you can configure the column amount in the backend, view of RTE (Rich Text Editor), and available functions, among others.
The TypoScript template is composed of several parts:
- Constants part—where values are fixed for repeatable use and extension setups.
- Setup part—this is the configuration for template, menus, h1 tag replacement with graphical image, and so on.
You can also use added resources as templates for your online shop. For example, you can use HTML templates. You need to use a template system so that you can organize or locate your web page content. After setting up the template, you can check the content layout and content view. You can choose the template you want to use. Templates can have one or more columns, with or without a header and footer.
If you are using TYPO3, you can select from several options: using prepared templates, developing a template on your own, using templates with a commercial license and adapting it for TYPO3, and so on.
Templates can be divided into basic types:
- Default static templates: Templates that are already in the TYPO3 package, for example, BUSINESS, CANDIDATE, FIRST, GREEN, HYPER, and so on. You don't need to have any extra skills and knowledge for using these templates, but they have limited capabilities. Using the default templates, it is possible to attain the web page functionality that you need. Using your own templates allows you to make the web page more suitable for page requirements.
- HTML templates (modern template building): This is the kind of template you need to create for your custom template; also, you need to set up the custom TypoScript configuration. This method is similar to the Smarty template system where you use markers for creating templates, but this similarity is partial. Here you need to add markers in the created template, whereas in Smarty added content will be generated. Using TypoScript, you need to specify the kind of content that will be shown in the marker's area—where the HTML template on your web server is located, what is additionally required to be included in the source (CSS, JavaScript files), and also what is outputted in the header section of the HTML document. You can find more detailed information about this template building on the TYPO3 home page: http://typo3.org/documentation/document-library/tutorials/doc_tut_templselect/current/.
- TemplaVoila!: This is an extra extension that you can download from the TYPO3 repository. TemplaVoila! is currently developed by Dmitry Dulepov as a replacement for the normal HTML templates. Using this type of template will make it possible to add design and content in a more flexible manner.
- And a few more: For example, Smarty, and automaketemplate. Smarty and automaketemplate are TYPO3 extensions.
We used pre-developed HTML templates with the TypoScript configuration in our online shop as you'll see further.