Menu
The introduction should explain the aim of the tutorial, the needed requirements and the skill level of the target group(s). (Possibly refering to?) About this document Aim In this tutorial you will learn how to build up a web-site with TYPO3: The tutorial explains how to use an HTML document as a template for a website, which is run by TYPO3.
You will learn how you can integrate a HTML document into a TYPO3 system so that this template is then used as a basis for each single page. Then this tutorial explains how to dynamically insert content into the HTML template: You will learn how you can make TYPO3 insert the content of each page into the HTML template. Finally it shows how to create text-based dynamic navigations (the menus on each page). The result of the tutorial produces a site similar to the Introduction Package. The tutorial includes a set of files (mainly an HTML file and a CSS file), which are used as an example troughout this tutorial. Requirements To go through the steps in this tutorial you need an installed version of TYPO3 4.6 or higher. Use the 'Introduction Package' or the 'Blank Package' as a basis.
They are downloadable from here:. If you are a beginner, you should choose the Introduction Package. It already includes a running website and we also used it for the screenshots in this tutorial. If you use it too, things will look the same for you. However, this tutorial is not based on the HTML and CSS of the Introduction Package. Instead it comes with all the needed HTML and CSS files.
Using the Blank Package is the usual way of starting a new site, if you do not need the stuff, which is offered by the Introduction Package. Skills You should have read Ts45min. It is enough if you have quickly read that document; you must not have understood everything noted there (and surely not all the details). Ts45Min should give you an overview of things in TYPO3. However, we will also repeat things in the Templating Tutorial where they are needed. Basic knowledge of HTML is needed (but no knowledge about details). Knowledge about CSS is not mandatory.
Skill level You are a beginner as a site developer. This tutorial contains step by step instructions, which enable you to create your first website with TYPO3, based on a given HTML file. The job is to integrate a template into the TYPO3 system.
This job is what is called 'Integratoin' in the TYPO3 world. What's new This is the first version of this manual. It replaces the old 'Modern Template Building Tutorial', which was originally written in 2003. Although we have tested the descriptions in this manual, there might still be places, which somehow are not clear or not understandable.
If something remains unclear when you are working through the manual, please drop us a note! Either write us a mail to [email protected] or create a new issue in the issue tracker of this manual at (to create an issue you will need an account on typo3.org). Credits (A place to give credit to whoever worked on the manual, in particular mentioning older versions which may have had other authors. Also mention if some of the content is coming from other manuals and credit its authors.). Christopher, you should be mentioned here? 21:15, 31 January 2012 (CET) Feedback For general questions about the documentation get in touch by writing to [email protected].
If you find a bug in this manual, please file an issue in this manual's bug tracker: Maintaining quality documentation is hard work and the Documentation Team is always looking for volunteers. If you feel like helping please join the documentation mailing list (typo3.projects.documentation on lists.typo3.org). Preparation This tutorial comes with example files, which are used throughout this tutorial. These files include the HTML template, which we use in this tutorial. Use them to reproduce each step of what we do in your own TYPO3 installation.
To get all the needed files, please download this extension and install it into your TYPO3 installation; do not only view it in the TYPO3 Extension Repository (TER) or online at typo3.org. By installing it you directly have all the needed template files (HTML, CSS and the TypoScript in an textfile) on your system. (If you have already done that, you can skip the rest of this chapter.). As for the moment there is a bug that makes it a bit harder than it should be to install the extension.
Please read the explanations 22:00, 31 August 2016 (CET) Copying the template files to the right place Now you have the extracted files in your file system. They are, from the folder where you installed TYPO3, inside the subfolder typo3conf/ext/doctuttemplating/template. Next copy the folder 'template' with its contents and paste it all into the folder fileadmin/, so that you get the folder fileadmin/template/ and the files inside.
Creating a page structure We will now create some pages inside TYPO3. These pages are helpful, when you later want to check, if TYPO3 uses the instructions in the TypoScript template as we want it to use them. When you created some pages and some subpages, you will later be able to check if TYPO3 creates the desired output.
After you have configured the menu in the TypoScript template, the structure of these pages should be visible in the menu. If you put some content on some of these pages in TYPO3, you will also be able to see this content once you have configured the corresponding part of the TypoScript template. We now show you detailed, how to create that page structure.
We are using the Introduction Package for the screenshots, if you are using the blank package, it is the same. Just ignore the already present 'Home' and 'TypoScript-Templates'-Trees of the introduction package. In the TYPO3 backend make sure you are in the page module by opening the section 'Web' in the left part of the Backend and by clicking the 'Page' module in this section. Create a first page, which hierarchically is located directly below the TYPO3 logo at the top. We call this page 'root' page.
Rightclick on the logo of 'New TYPO3 site', then leftclick New. Place the page at the bottom of the present pages/folders. Change the page type to 'Standard' and confirm that change. Give the page the Page Title 'Root'. In the tab 'Behaviour' in the palette 'Miscellaneous' mark the checkbox 'Use as root page'. Click 'Save and close document'.
Now you see the new page with a globe icon in the page tree: Create some subpages, which hierarchically are located inside that root page: Rightclick on the root page and from the context menu select 'Page Actions New'. Place the new page hierarchically inside of the Root page. Give it the Page Title 'Home'.
In the tab 'Access' make it visible by unchecking the option 'Visibility Page Disable'. Click 'Save and Close document'.
The same way create some other subpages inside the root page. Place them on the same level as the page 'Home', but below it. In the page tree, click on the small triangle in front of the page 'Root': Then you can see the complete page structure.
Here is what the result might look like: Edit the root page /. Picture shows editing the page 'imprint', should be replaced./ Change its Type to 'Shortcut' and confirm that change. Click the small folder icon to select the target. In the upcoming window, you can select the target. Choose the first page of the subpages.
In our case this is the page, which we called 'Home'. Navigate there by clicking the small triangles in front of the page names. Then click on the page 'Home'. Back in the editing form from which you came, click 'Save and close document'.
/. A picture showing the editing form with shortcut target BEFORE saving might be fine./ Task // That's how it's done.
This is a step by step instruction like a cooking recipe. It must be a logical thread from start to end divided steps. It gives additional information (but not to much!) and warns for difficult situation (e.g. After several steps a result may be well. The task end must be identifiable by a result.
In this tutorial we use the most common approach for building a website with TYPO3: We take one HTML file, which we call our HTML template. It will be used as a basis for the website. TYPO3 will use this file as a basis, but certain parts of this file will be replaced with the content, which you have in your TYPO3 installation. To tell TYPO3, which parts it should replace, we will modify the HTML template now.
Inside the HTML template we will add so called markers and subparts. /. This paragraph is denglish.
This may lead to confusions./ In a later chapter we will configure TYPO3 to replace these markers and subparts with the content, which has been inserted in TYPO3. Working with the HTML template Short information about markers and subparts This section will tell you what markers and subparts are, how they look like and what they are used for. A marker is a word in your HTML template, which is wrapped by '###' on both sides. The marker 'TITLE' would for example look like this. ###METANAV### This is HTML code. It will be replaced by TYPO3, when we configure the subpart 'METANAV'.
###METANAV### Opposite to single markers (like '###TITLE###' from above) you may insert the subpart-markers inside HTML-comment-tags. That way they do not show up, when you open your template file in the browser.
Inside the comment tag, you can also add other notes. In this tutorial we add the information, if it is the beginning or the end of the subpart like done in the next example.
Put hint into a coloured table to improve visibility./ Open the HTML template Note: You can open and edit HTML files with any text editor. However, you will make your life much easier, if you use an editor, which supports syntax highlighting. With syntax highlighting you will see directly where a certain tag begins, where it ends, where there are attributes and so on.
A very good editor with syntax highlighting is Notepad, but there also are many others. Choose the one you like!. In one of the last chapters you have copied the template files to the folder fileadmin/template/. Our HTML template is the file fileadmin/template/index.html. You will notice that this is just a normal HTML document.
You can open it with your webbrowser and you will see the design. Open the HTML template with your text editor. Add markers/subparts We will now modify the HTML template by adding markers and subparts. Later we will configure TYPO3 to replace each of them with the content we want (see the next chapter).
Add the subpart 'DOCUMENT' Add a subpart called 'DOCUMENT' inside the body tag. The first marker of this subpart should be directly behind the opening body tag and the second one directly in front of the closing body tag so that everything in the body tag is inside that subpart.
TYPO3 will later create its own HTML structure for us and we will configure TYPO3 to only put the HTML code inside that structure, which is inside this subpart (and not also the head tag or the html tags or so). That is the reason, why we need it here.
A screenshot follows after we added the markers and subparts of column 3. Column 3: Add the markers 'DATE', 'BREADCRUMB' and 'TITLE' and the subpart 'CONTENTMIDDLE'. Column 3, the div with the id 'col3' is the column, which will be displayed in the middle. In our layout it is the main content area. Inside the div with the id 'breadcrumb' replace the date with a marker called 'DATE' and the rootline with a marker called 'BREADCRUMB'. Next there is the page title.
Replace the content of the h1 tag with the marker 'TITLE'. In the div below there will be the content of that column. Wrap the content of that div into the subpart 'CONTENTMIDDLE'.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Middle Column - Element 2 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Replace this screenshot with one, where you can see the newly created page-structure. If you are using the blankpackage, this screenshot is confusing 12:19, 12 February 2012 (CET) You cannot see the Template module? The Template module is only accessible for administrators in TYPO3.
Login with an administrator account and you will be able to see and use it. In the page tree activate the 'Root' page, which you have created before you worked in the HTML template file. You will see this screen: As you can see, there currently is no TypoScript record on our root page.
So we have to create one, so that TYPO3 knows, how it should dispay our root page - and also all its subpages - in our website. Note that the template record is inherited to all subpages. That means that the configuration, which we insert in the template record of our root page, will automatically be used for all subpages as well. To create a new template record click on 'Create template for a new site'. After you have done so, you will come to the same screen, but there will additionally be the information, that there now is a template record on the page 'Root' (with the id, which this page has in your system. In my case it is 75, but the ID does not matter now.).
Click the link 'Click here to go.' Now you see the 'Info/Modify' screen. From here you can edit the whole template record or choose one single field of the record, which you want to view or change.
First there is one important step, which we need to do: There is a so called 'static template', which comes with TYPO3. This static template already contains some TypoScript code. If we include this static template in our template record, it will help us, as we do not have to write each line of the code we need ourselves.
Instead we can use a short one-liner to copy parts from this static template. (This is done when we insert the actual content for the markers CONTENTRIGHT and CONTENTMIDDLE). Click the button 'Edit whole template record'. Click the tab 'Includes' and in the palette 'Include static (from extensions)' click the item 'CSS Styled Content (cssstyledcontent)' as marked in the screenshot. Then it will be added to the list on the left.
When that is done click the icon 'Save and close document' at the top. You do not see the entry 'CSS Styled Content (cssstyledcontent)' in the right list? Then you most probably have not installed the TYPO3 system extension 'cssstyledcontent'. Go to the Extension Manager, open the tab 'Available extensions', watch out for the extension key 'cssstyledcontent' and install the extension.
Now include the static template as explained above. You now are back in the Info/Modify screen. Here you can see some sections of the TypoScript template. The most important sections in a TypoScript template are the ones called 'Constants' and 'Setup'. In the section 'Constants' you can - you guess it - define constants. These constants can then be used in the setup field of the template. Doing so is a bit more advanced and we will not do that in this tutorial.
The field labeled 'Setup' is the one, in which we will enter all the TypoScript configuration. As you can see in the screenshot above, it already contains six lines of code. Click the small pencil next to the word 'Setup'. Now you can have a look at the content of the setup field. This is what you will see: You don't see the code in different colors, but just as black text? Then you most probably have not installed the TYPO3 system extension 't3editor'. You can install this extension by going to the Extension Manager, having a look at the tab 'Available extensions' and by clicking the small icon in front of the row where it says 't3editor'.
Afterwards you should be able to see the code colored as in the screenshot above. If you still do not see the code colored, make sure that you have not checked the checkbox 'Deactivate t3editor', which you see at the bottom of the above screenshot. # Default PAGE object: page = PAGE page. 10 = TEXT page. 10.value = HELLO WORLD! Did you read the Tutorial TypoScript in 45 Minutes? If you did, you should already know, what these lines are doing.
To remind you, here is a short explanation. We will also use this explanation to repeat (or to learn) how to use TSref!
You do not have a copy of TSref currently? TSref, the TypoScript reference, is available from TYPO3 TER, which is here: Search for the keyword 'doccoretsref'. This is the 'extension key', under which the documentation is published. The extension doccoretsref contains a PDF file, which you can download from TER.
Use it to conveniently look things up. Lines starting with '#' are comments. You can use them to comment your code. They are not parsed, when TYPO3 reads the template to render the website. In the next line the object 'page' is defined and set to the value 'PAGE'.
This value refers to a 'page object'. Have a look at the section 'Setup' in TSref (remember that we are editing the 'Setup' field). In the table with the headline 'Top-level objects' you will find information about the objects, which can be set on the first level of TypoScript templates.
Download Glas by Jacques Derrida PDF. May 22, 2017 admin Comments Off on Download Glas by Jacques Derrida PDF. Writer, narrative, and discursive demonstration. Derrida pdf. Derrida_Jacques_Glas_1986.pdf (file size: 17.27 MB, MIME type: application/pdf).
One of them is called 'PAGE'. The definition of this PAGE object tells TYPO3 that it should start the output of a new page. As you see in TSref, the data type of this object is '-PAGE'.
This tells you that you should look into the table with the headline 'PAGE', to see the configuration options for the PAGE object. This table follows some pages later in TSref. When you look into the table with the options for the 'PAGE' object in TSref, you will see that there are several properties, which you can set inside a PAGE object, e.g. 'typeNum', 'wrap', 'stdWrap', numbers (like '1', '2', '3') and so on. The next line in the code above defines the object 'page.10', which is one of those 'number objects'. It could also be called for example 'page.5' or 'page.20'.
TSref does not say much about the meaning of these numbers except the data type, which is 'cObject'. Have a look at the section 'Data types' at the beginning of TSref. In the subsection 'Data types: Object types' you will find the description of the data type 'cObject'. It means that you can set the value to any 'content object'. Note that a 'cObject' or 'content object' is not a 'content element'. A 'content element' is an element, which is displayed on a single page in the website.
Content elements can be edited in the Page module. To get an overview of the available content objects have a look at the table of contents in TSref.
There is a section called 'Content Objects' which lists all available content objects. There you see that e.g. TEXT, IMAGE, USER, COA. Are possible values. Depending on what you want to display, you can pick the one you like. You then find the options for the one you have chosen in the according section in TSref. Now you know that in line 3 of the listing above, a content object of the type TEXT is defined and why that is possible.
Finally there is a subproperty under 'page.10'. Since 'page.10' is a TEXT content object, we have a look at the properties of this content object in TSref. There we see that the cObject TEXT has the subproperty 'value' (and some other subproperties, which can be found in the section 'stdWrap', but are not important here). In our listing the subproperty 'value' is set and as TSref tells us, it basically contains text. Here it is set to 'HELLO WORLD!' What you should have learnt from this chapter is, how properties can be set in TypoScript. Now you should understand, how you can use TSref to look up the available properties for each object and how to use them to create your own TypoScript.
By the way: Did you know, that these four lines already create an output? It is not much, but more than nothing. Click on the 'View webpage' icon at the top of the screen. What you see is this: Load the HTML template in the TypoScript template As you could see from the output of the few lines of TypoScript, which we have above, they only produce the words 'HELLO WORLD!' But that is not, what we want to have.
We don't only want to output some words, but we want to output. first of all our complete template file. and inside we want to replace our markers and subparts. So where a TEXT object was defined above, we need to define an object, which outputs a template file.
Typo 3 Template Verein
This can be done using the cObject 'TEMPLATE'. Look it up in TSref!
So instead of the code above we write. # Default PAGE object: page = PAGE # Define the template page.
10 = TEMPLATE By the way: When you are working with t3editor to edit the Setup field of your TypoScript template, you can press Ctrl+S to save what currently is in the Setup field. This can make your work noticeably faster. As TSref tells us, the TEMPLATE cObject has the property 'template', in which we can define a cObject, which must be loaded with the template code.
Typo 3 Template Setup
This is exactly what we want to do! Since our template is a file, an HTML file, we choose the cObject FILE and add. # Our template is a file page.
10.template = FILE Did you look up the content object FILE in TSref? If not, do so now! You will see that for this cObject there is the property 'file'. The cObject FILE returns the content of the file, which is set in this property.
But how exactly do you have to link your file now? This is also answered in TSref. The data type of the property 'file' is 'resource'. You find it in the 'Data types reference'. There you also find the information that you can link to a file in your TYPO3 installation using a relative path. See the example in TSref.
So we add to our template. # Our template file is fileadmin/Template/index.html page. 10.template.file = fileadmin/Template/index.html This loads our template file. If you now view your website (the frontend), you will notice that our template file is used, but that in fact the CSS styles are still missing. So obviously we still have to add a reference to our CSS file to our PAGE object somehow. The section on the 'PAGE object' in TSref tells us how we can add tags to the head tag of the HTML output. There are the properties 'stylesheet' and 'shortcutIcon', which we want to use to include our stylesheet and our icon.
# Insert shortcut icon in the head of the website page.shortcutIcon = fileadmin/Template/favicon.ico # Insert stylesheet in the head of the website page.stylesheet = fileadmin/Template/style.css Now our Frontend output already has the styles included. However, if you view the sourcecode of the output, you will notice that TYPO3 created an own HTML structure and inside the body tags of this structure, there is our complete template, with its own html, head and body tags and all the content. This is syntactically wrong HTML or in other words: It is no valid HTML page currently. We will fix this in the next step.
Work with the subpart DOCUMENT Currently TYPO3 puts our whole HTML template file between body tags. To get a valid HTML page, we should only put that part of our template inside these body tags, which really belongs between body tags. Again having a look at the TEMPLATE cObject in TSref there is the property 'workOnSubpart' which does exactly this. In this property you can name a subpart, which you want the TEMPLATE cObject to return. That way this subpart gets extracted from our HTML template file and is the only thing returned. Do you remember how we wrapped the whole content of the body tags of our HTML template in the subpart DOCUMENT?
This was the reason to do that; here we use it. So we add to our template.
# Work with the subpart 'DOCUMENT' page. 10.workOnSubpart = DOCUMENT The resulting HTML output is a syntactically correct HTML page now.
While the 'outer part' of the output (like the html tag itself, the head tag and its content and the body tag itself) is created by TYPO3, the contents of the body tag are taken from our HTML template. Configure markers/subparts The names of the markers and subparts are now used in the TypoScript template to insert dynamic content into the HTML template at those places, where the markers respectively subparts are. Having a look at the section on the cObject TEMPLATE you will notice that there are two properties, which hold the configuration for subparts and markers: Inside the property 'subparts' we can define the rendering instructions for our subparts and inside the property 'marks' we can define the rendering instructions for the markers. Let us add them to the setup of our TEMPLATE object.
Download and install Templavoila To use Templavoila, you'll need 2 extensions. Go to the and download the following extensions:. (staticinfotables) version 6.x or higher for TYPO3 6.x, version 2.x for TYPO3 4.x.
(templavoila) version 1.8.0 or higher for TYPO3 6.0 and 6.1, version 1.7.0 for TYPO3 4.x. For TYPO3 6.2 there's an unofficial version 1.9 available. Import the extensions In TYPO3, go to the extension manager (Admin Tools - Extension Manager). When using 6.0 or 6.1, choose 'Manage Extensions' to import the extensions manually, or choose 'Get Extensions' to import a list from the Extension Repository and import the extensions from there. If you use TYPO3 6.2, you'll have to copy the downloaded files (and their folder) manually to the extensions folder, which is /htmlroot/typo3conf/ext/. If you use TYPO3 4.5 or 4.6, choose 'Extension manager' from the pull down menu on top of the editing window and click on the 'Local extension list' tab.
Next, click on the 'upload extension file directly (.t3x)' icon. You can find this icon above the pull down menu on top of the screen (which says 'Extension Manager'). First upload Static info tables and then Templavoila. Install the extensions As of TYPO3 6.x, installation and updating of the database will happen automatically when an extension is uploaded. In TYPO3 4.x you need to install the extension manually. You can install or uninstall an extension manually by clicking the 'install extension' icon (little piece of lego with a plus sign). As might be noticed, some extensions need to make updates to the database. Click on the 'Make updates' button.
After that, the extension configuration needs to be saved by clicking the 'Update' button. Scroll down the popup window if you don't see this button. Before you start Remember that the Storage folder must be set as 'General storage folder', in the. Otherwise Templavoila doesn't know where to save it's data.
Nice to know It is also possible to include an overview of the extension repository into your TYPO3 installation. You have instant access to all available extensions, download, install and update them with a few clicks. As of TYPO3 6.x, this will happen automatically when you select 'Get extensions'. However, the 'cacheextensions' table of your database will be filled with an addtional 12 to 30 MB of data.
Themet3kit Theme extension, which allows you to style the t3kit theme in backend without coding Contributing Everyone can add feedback, bug reports and fixes. Here is several rules for contribute this repository. Please keep this in mind for better cooperation. Issues If you have a question(feature) not covered in the documentation or want to report a bug, the best way to ensure it gets addressed is to file it in the appropriate issues tracker. Please check that you've completed the following steps:. Make sure you're on the right version of themet3kit. Make sure that you're cloned all deppendencies init.sh.
Used the search feature to ensure that the bug hasn't been reported before. Included as much information about the bug as possible, including any output you've received, what OS and version you're on, etc. Try to reduce your code to the bare minimum required to reproduce the issue. This makes it much easier (and much faster) to isolate and fix the issue.
Pull Requests. Please check to make sure that there aren't existing pull requests attempting to address the issue mentioned. We also recommend checking for issues related to the issue on the tracker, as a team member may be working on the issue in a branch or fork. Non-trivial changes should be discussed in an issue first. Develop in a topic branch, not master.
Follow. Follow. Write a convincing description of your PR and why we should land it Style Guide This project uses special style guides.
Those rules you can find on appropriate file:.editorconfig. Git commit conventions and output formatting Please use semantic labels for your messages, but if commit message is not very important, you can skip labels. All commits with labels will be added in changelog, that's why it is important to use predefined labels on your commits. Git labels:. FEATURE A new feature. FIX A bug fix.
REFACTOR A code change that neither fixes a bug or adds a feature. PERF A code change that improves performance. CHORE Changes to the build process (grunt) or auxiliary tools and libraries such as documentation generation and linters (jshint, jscs, etc.). DOC Documentation only changes.
Typo3 Template
STYLE Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc). TEST Adding missing tests. UPDATE Updating git submodules, npm/bower dependencies Please ensure any pull requests of fixes follow this closely. If you notice existing code which doesn't follow these practices, feel free to shout and we will address this.
Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |