TYPO3 Templates

By Jeremy Greenawalt
  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Getting Started

About this book

The template systems in TYPO3 make it one of the most powerful content management systems available today, but they seem too complex for many users. Site developers who are able to learn how to use them efficiently can build more extensible sites quicker and more customized for their users.

This book is a step-by-step guide for building and customizing templates in TYPO3 using the best solutions
available. It takes the readers through one complete example to create a fully functional demonstration site using TypoScript, TemplaVoila, and other core TYPO3 technologies.

This book starts with the basics of creating an example TYPO3 site before showing you how to add your own stylesheets and enhanced JavaScript to the template. You learn about the different types of menus and navigation, and you can try out each one with practical examples in the book. The book shows how to create multiple templates for sections or individual pages in TYPO3 and how you can make a new template completely from scratch for a newsletter. Just as importantly, you learn how to update the editing experience and impress your clients with a custom back-end. Finally, you will learn how to specialize for browsers and internationalize your TYPO3 site with simple template updates.

Publication date:
November 2010
Publisher
Packt
Pages
328
ISBN
9781847198402

 

Chapter 1. Getting Started

I was introduced to TYPO3 in 2006, when I started working at a ministry that was using static pages exported out of Dreamweaver. As a lazy programmer who strives for automation, I knew we needed a real content management system. We needed a full solution that was in Open Source, could grow with us, and allowed quick and easy template modifications as our goals and design ideas changed. We looked at a lot of options, but finally settled on TYPO3 after talking to some other developers I respected. They convinced me it was worth the initial effort of learning a whole new CMS (Content Management System) to have the customizability and extensibility that only TYPO3 could offer. I'm happy to say that we rebuilt that site in TYPO3 without ever looking back, but I'm a little embarrassed to admit that it took us years to learn all the possible customizations and extensions that we could use to change how templates work for our frontend users and backend editors.

My goal in this book is to show just how easy it is to build powerful, extensible websites and get you started on that next major website that you're just waiting to build. We're going to step through creating templates, building menus, updating the backend, making mobile sites, going international, and more.

Because TYPO3 has become so powerful and modular, there are often more than a few templating methods that can yield the same results. There are alternative (and possibly better) methods to many of the templating examples in this book, but I have tried to choose the easiest or most powerful techniques in each case to get a site up and running as quickly as possible. If you want to dive deeper into any particular topic after finishing this book though, I recommend continuing to learn through the online documentation at http://typo3.org/documentation/ and the other TYPO3 books from Packt Publishing http://www.packtpub.com/books?keys=typo3&x=0&y=0.

This first chapter is going to walk you through setting up a test site to experiment and play with for the rest of the book. Even if you have a site currently running on TYPO3, I recommend setting up a fresh test site as described. With a test site, we can all start with a blank template to build on, and I really don't want anyone breaking a live site when we test different menu systems or internationalization later on.

In this chapter you will:

  • Learn a little about the history of creating templates in TYPO3

  • Install a powerful TYPO3 extension for templating called TemplaVoila!

  • Create a working TYPO3 template from ten lines of HTML

  • Set up a working page tree with example content and functioning menus

 

Basic requirements


In order to follow the tutorials in the book, there are a few requirements:

  • Basic HTML/CSS knowledge: None of the examples use very complex HTML or CSS, but a basic understanding is necessary to build proper TYPO3 templates.

  • Text editor: You won't require any special development software for this book, but a good text editor is handy for creating HTML templates and writing code. I use TextMate on a Mac, but e-TextEditor (Windows), Notepad++ (Windows), BBedit (Mac), or jEdit (Java) all have extensions for HTML, CSS, JavaScript, and TYPO3's own configuration language, TypoScript.

  • Test server: We need a place to run our examples during the tutorial. If you already have a hosted server that supports MySQL and PHP 5.2 (with ImageMagick or GraphicsMagick and GDLib/FreeType), you can use that. This may sound like a lot, but most hosting providers offer this by default. Otherwise, you can run TYPO3 on your own computer using either XAMPP (Windows, Linux, or Mac) or MAMP (Mac only). Both of these packages allow you to run a full test server locally on your machine, and they already include a web server (Apache), MySQL, and PHP 5.2 (with the necessary graphics libraries).

  • TYPO3 4.4 or higher with the dummy package installed: All of the examples in the tutorial have been tested on 4.4.2, but they should work equally well on future versions of TYPO3. You can download the newest version of the TYPO3 source with a dummy package at http://www.typo3.org/download/. If you have not installed TYPO3 before, detailed instructions are available in the TYPO3 documentation library (http://typo3.org/documentation/document-library/extension-manuals/doc_inst_upgr/current/).

 

How templates were created


Originally, many TYPO3 templates were built using just TYPO3's own configuration language, TypoScript. TypoScript is not a traditional programming language; it is actually a declarative language to configure templates and extensions in TYPO3. For example, the following TypoScript code will output HELLO WORLD! through a TYPO3 page. I've added TypoScript comments marked with ## to explain what is happening:

## Create a default page object
page = PAGE
page.typeNum = 0
## Create a text object inside the page
page.10 = TEXT
## Assign some text to the text object
page.10.value = HELLO WORLD!

You could add HTML to change the layout of the page, but it wasn't very intuitive. The biggest problem, though, was there was no easy way to integrate a whole HTML template. Designers created HTML files, and then a developer had to translate it all into TypoScript for the final templates.

Next, we started integrating external HTML files directly into the template process. Of course, the first step in creating templates was to build an HTML file to define the basic structure of our pages, and a designer could do this. For example, if we designed a basic template to show a headline and some content, we start with an HTML file like this:

<!DOCTYPE HTML>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>
Header
</h1>
<div>
Content of our new page.
</div>
</body>
</html>

Next, we needed to add markers into the HTML to define sections of dynamic content in our HTML. The markers were created as HTML comments within the static HTML document, and we wrapped the sections we wanted to replace with these identifying markers. The designers or the TYPO3 developers do this step. In the following example , we identified the document body, main heading, and a content area:

<!DOCTYPE HTML>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- ###DOCUMENT_BODY### -->
<h1>
<!-- ###HEADING### -->
Header
<!-- ###HEADING### -->
</h1>
<div>
<!-- ###CONTENT### -->
Content of our new page.
<!-- ###CONTENT### -->
</div>
<!-- ###DOCUMENT_BODY### -->
</body>
</html>

Now that the HTML file is ready, we saved it on the fileadmin/ folder. For this example, we saved the HTML file in a subdirectory, templates/, as basic_template.html. That means the path to our file would be fileadmin/templates/basic_template.html.

The next step was creating a template in TypoScript to map content into our HTML template. We will look more at TypoScript templates when we start building our own example template later in this chapter, so we aren't going to step through the whole process right now. As an example, though, the following TypoScript code would be used to call the HTML file. You can find the sections that we wrapped with markers, and replace the static HTML content.

First, we created a template object and assigned our HTML file to it:

temp.mainTemplate = TEMPLATE
temp.mainTemplate {
template = FILE
template.file = fileadmin/templates/basic_template.html
}

Next, we created a page object and assigned the main template to it:

page = PAGE
page.typeNum = 0
page.10 < temp.mainTemplate

After we associated our page with our template, we start working on the HTML between the DOCUMENT_BODY markers in our HTML file:

page.10.workOnSubpart = DOCUMENT_BODY

Now that we were working inside the DOCUMENT_BODY markers, we created text objects to go between the HEADING and CONTENT markers and assign values to them:

page.10.marks.HEADING = TEXT
page.10.marks.HEADING.value = This is a heading
page.10.marks.CONTENT = TEXT
page.10.marks.CONTENT.value = This is our content

Of course, this isn't actually very dynamic as the content is being coded into the TypoScript template. The next step in the process was to map dynamic content elements in TYPO3 to the HTML through the TypoScript template. This process was more complicated and cannot be covered here, but you can learn more about it in the online tutorial, Modern Template Building (http://typo3.org/documentation/document-library/tutorials/doc_tut_templselect/current/).

 

Introducing TemplaVoila!


As you can see, this made very large HTML templates that had to be manually edited for TYPO3. The markers were one more step for designers to learn if they were moving into TYPO3 development. The TypoScript process also added more training and complexity for new developers who were trying to pick up TYPO3. Luckily for us, Kasper Skårhøj and Robert Lemke went on to create a new template extension called TemplaVoila!. This added more flexible page elements to replace the earlier "columns" that defined sections in TYPO3 pages. It also introduced a more intuitive backend editing experience and, more importantly, Flexible Content Elements. Flexible Content Elements allow us to reuse custom blocks of HTML, and are a key technology in building websites with TYPO3.

In TemplaVoila, the designers or developers create basic HTML templates without any extra comments or markers. TemplaVoila maps the dynamic content fields, or Content Elements, we want use in our pages to elements in our HTML template using a TemplaVoila Template Object. The first time we set up a site with TemplaVoila, we can run the TemplaVoila Wizard to help us automatically create the new content fields and map them to our HTML template.

Although not required to build all templates in TYPO3, TemplaVoila is highly recommended for its flexibility and more advanced templating techniques such as Flexible Content Elements, backend layout customization, and custom template fields. For that reason, we will be using TemplaVoila for the tutorial examples throughout this book.

 

Installing TemplaVoila


TemplaVoila is a TYPO3 extension, so we can install it through the Extension Manager in the TYPO3 backend.

If you just installed TYPO3 with the dummy package and finished the setup wizard, you can get to the backend of TYPO3 at http://<your domain>/typo3/ (where <your domain> represents your own testing domain). If you are using a server running on your machine with XAMPP or MAMP, then you can probably get to your site at http://localhost/typo3/.

After we've logged in, we can follow these steps to install TemplaVoila:

  1. We are going to use the Extension Manager, so go ahead and click on Ext Manager in the left frame (marked in the following screenshot with a red 1).

  2. Select Import Extensions from the drop-down at the top of the main Extension Manager frame. After the frame refreshes, we will be able to search for new extensions in the TYPO3 Extension Repository (TER). The TER is a repository for all of the public extensions or plugins that developers have created for TYPO3.

  3. Before we can search for the TemplaVoila plugin, we need to download the most current list of available extensions from the TER. Click on the Retrieve/Update button to start downloading the list. Depending on your Internet connection, it may take a few minutes to download the updates. When it is done downloading, the frame will automatically refresh.

  4. Now that we have an updated list, we can search for the TemplaVoila extension. Type templavoila into the search box and click on the Look up button.

  5. By searching for the word "templavoila" in the TER, we have found all of the extensions related to TemplaVoila as well as the official TemplaVoila extension. Scroll down until you find the official TemplaVoila extension (circled in the following screenshot) and click on the Import button to the left of the name.

  6. Once we click on the Import button, the extension is downloaded and imported into our list of available extensions. To install it, click on the Install extension button at the bottom of the frame.

  7. The Extension Manager will show you a list of the database changes that it needs to make to install TemplaVoila. Click on the Make updates button on the bottom of the page.

  8. TemplaVoila is now installed. The final page will show us a list of features that we can enable, but none of them are necessary for our example site. Now that TemplaVoila is installed, we can see an updated Page icon and a new TemplaVoila button in the left frame as shown in the following screenshot:

 

Creating a basic HTML template


Now that we have TemplaVoila installed, we are almost ready to go through the wizard and create our first TYPO3 pages. First, we need to create a basic HTML template. In other content management systems, you don't often start by creating a template from scratch; normally you would just find an existing one that you liked enough, and then you would edit the CSS and HTML to make it match your vision. TYPO3 allows us much more flexibility and freedom by making it easy to create our own templates from scratch or use the HTML/CSS files from our designers.

Now we're going to create a basic HTML template to get started. As we'll be doing all of our design work in CSS and TYPO3, we just need a "barebones" template that gives us areas to map our content and menus. Normally, we would get the HTML and CSS files at the same time from our web designers, but we are going to wait until the next chapter to integrate the CSS design. Here is the code for our HTML template:

<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<ul id="menu-area">
<li class="menu-item"><a href="">Menu Item #1</a></li>
</ul>
<ul id="submenu-area">
<li class="submenu-item"><a href="">Submenu Item #1</a></li>
</ul>
<div id="content">This is our content</div>
</body>
</html>

We've already said that TemplaVoila doesn't need any extra markup or comments, but we do have some requirements. As TemplaVoila is mapping TYPO3 content to our HTML elements, all of the HTML code must be completely valid with beginning and end tags. In addition, there are certain kinds of tags that we need:

The root tag

All TemplaVoila template objects must have a "root" tag as an overall container for mapping. This can be any kind of enclosing tag; if we only wanted to use one section of a larger template, for example, we could use a div section. For this example, though, we are using the entire body of the HTML template, so we need body tags.

The menu area

We also need a container for the menu and the submenu sections, so we have added list tags for both menus with unique ID attributes or menu-area and submenu-area. These will serve as the containers for our dynamic menus, which will be filled in later through TypoScript.

The content section

Finally, we have our content section that will be used to display the actual TYPO3 page content that we care about. For more complex templates, we would probably have more than one content section, but one container is a good place to start, and is all we need for the wizard.

Now that we have created our basic HTML template, we need to save it where TemplaVoila will find it. In order for TemplaVoila to find our template without problems, we must create a directory named templates under the fileadmin/ directory of your new TYPO3 installation. Once you have created the directory, save a copy of our new HTML template in it as template.html. The name is not required to be template.html, but throughout this tutorial it will be referred to as such.

 

Creating your first template with the TemplaVoila Wizard


Now that TYPO3 is setup, TemplaVoila is installed, and we have an HTML template to start with, we can run the magical TemplaVoila Wizard to create a whole site in just a couple of mouse clicks. I know this section has a lot of pages for a couple of mouse-clicks, but it's important to understand what we're clicking on this for the first time.

If you log in to the backend of TYPO3 right now, you will see we have a website with absolutely no pages. When we go through the wizard, it will perform three tasks:

  • Map dynamic content areas to our HTML template

  • Generate some basic TypoScript for our menus

  • Create sample content to test our new template

We are ready to start, so go ahead and choose the TemplaVoila module in the left frame to enter the New site wizard as shown in the following screenshot:

Selecting the HTML template

The first thing we need to do is select our HTML template. As we only have one HTML file in the fileadmin/templates/ directory, the only choice will be our new file, template.html. Click on [Choose as Template].

Configuring the new site

Once we click on Start wizard now! we are looking at a screen where we can set basic information for our website. The name of our website is required to establish a unique name for our website, but the URL of the website is not required. Running the wizard will create a new editor in the backend, so the username field is required. In the example below, I have named this user editor. The values that we fill in here are used to start adding content to the database, set our URL in TypoScript, and create a new user, but all of these settings can be easily changed later if necessary. Once you've filled in required information, click on Create new site.

Mapping the template

The screenshot that we just saw is just an introduction screen for the wizard with an animation to explain the mapping process. Click on the Start the mapping process button near the bottom of the page.

Now that we are starting the mapping process, we are presented with the default TemplaVoila editing pages. Make sure you are on the Mapping tab.

This page is the heart of TemplaVoila mapping. You'll notice that this page has five columns, and understanding them now will introduce you to some of the TemplaVoila concepts, and will save you from frustration later on.

Data elements

Each template field is referred to as a Data Element in the mapping section of TemplaVoila. Basically, every template section that will be replaced with TYPO3 data (menus, content elements, and so on) is considered a data element in our template. Each template in TemplaVoila uses a special Data Structure object to define all of the data elements such as Main Content Area or Main menu that will be available for mapping. When we are creating TemplaVoila templates from scratch, we must define data elements by creating a data structure. We are going to be editing data structures to add our own data elements in Chapter 3. This first time, though, we are going to use the data structure from the wizard because it already includes all the data elements we need.

Mapping instructions

The next column, Mapping Instructions, is a simple text area for notes in the data structure. The mapping instructions are not binding, but they are used as plain instructions from the creators of the data structure (the TemplaVoila creators, in this case) to the template object mappers (that is you and me, the users of the wizard). We can see, for example, that the default Data Structure includes instructions to map the Main menu element to …the HTML container element where you want the automatically made menu items to be placed.

HTML-path

Once we have mapped an element, the mapped tag will show up in the HTML-path column along with the mode, as we saw with the root data element discussed earlier. The "mode" of a data element refers to inner and outer mapping. If a data element is mapped with INNER selected, then the HTML tag from the template will remain untouched, and the TYPO3 content will go inside it. In OUTER mode, the tag will be replaced by the TYPO3 content. We don't need to worry about changing the mode yet, but it can be handy in special circumstances when we want TYPO3 to add in its own tag and class information.

Action

The action column simply holds the buttons for mapping, re-mapping, and changing the mode of a data element.

Mapping rules

The rules, as the name implies, are the technical restrictions or allowances that the data template creators have written into the structure. In this first template, the rules will only allow the root data element to be mapped to a body tag, but they allow any of the other data elements to be mapped to almost any container tag. The main content area can even be mapped to paragraph and header tags, if we so desire. As an example, TemplaVoila will not allow us to choose a span tag in the mapping windows for the main content area, because it is not allowed in the set of rules. As developers, we will normally allow mapping to most HTML containers like the example discussed earlier, but it can be helpful to be more restrictive to avoid unintended mappings.

Starting to map

Now that we understand what's possible on the mapping page, we can start mapping the elements. We're going to map the main content area first, so go ahead and click on the Map button in the main content area row. This will take us to the mapping screen, and we can choose an editing mode from the Mapping Window drop-down. Mode: Exploded Visual will show the rendered view of the template with clickable areas for mapping, or we can choose Mode: HTML Source to navigate through the HTML source code. For our purposes, we can map in the exploded visual mode. To map the correct content tag, we'll just click on the div button with the content ID (circled in the following screenshot). If we hover over the div button, we can see the class, ID, and full path so we can identify it better:

After we have chosen the mapping target, the next page prompts us to specify whether we are using INNER or OUTER mapping before we set the changes in the database. We will choose the default INNER mapping from drop-down in the action column because we do not want the div to be replaced with TYPO3 content; we want our TYPO3 content to go inside of the div tag. If we chose OUTER mapping, then the generated TYPO3 content would replace the div tags instead of just the content inside the tags. Now we can click on Set to save our mapping to the database, and the wizard will take us back to the main mapping section.

We've now successfully mapped our first element! I'll give you a minute to celebrate, because you deserve it. You now officially have all the skills you need to complete the rest of this section, and I'll just be here with a little bit of guidance.

Mapping the rest of our elements

Our next step is mapping the main menu, and it will work exactly as you'd expect. Go ahead and click on the Map button in the Main Menu row of the mapping page. We are going to choose the tag with the ID menu-area for the main menu, and choose the inner mapping mode. Remember to click on Set at the end to save your changes. For the sub menu, go ahead and repeat the same steps with the submenu element and the list tag with the ID submenu-area.

You'll notice that we have five buttons on the bottom of our mapping page that we can use while we are mapping our template:

  • Clear all will clear all of the mappings in the current template. This is helpful if we just need to start over.

  • Preview will show us a preview of our template as it is currently mapped with unique example content to show the data elements.

  • Save will save our current mapping.

  • Save and Return will save our current mapping and return us to the list of templates. If we are running the TemplaVoila Wizard, it will take us to the next step in the wizard process.

  • Revert will revert all of our changes since the last save.

Now that we have mapped our basic elements, go ahead and click on the Save and Return button at the bottom of the page.

Header parts

Once you click on Save and Return, we are taken to the next step in the wizard where we are told about mapping the HTML header parts for our template. TemplaVoila allows us to select portions of our HTML template header area to be included in the final TYPO3 output. This is helpful if we want to map CSS or JavaScript directly in the HTML. Any part of the header that we do not choose during this process will be ignored by TYPO3 when it renders our page. Right now, we don't have any special information in our header, so we are going to uncheck all of the boxes and click on Set. Once we've clicked on Set, TYPO3 will remember our choice, and we can click on Save and Return without losing information. If we do not click on Set, then TYPO3 will not remember what we checked and unchecked, so it will revert to the default, or what was last set.

Creating the main menu

After we save, the wizard is ready to start creating our menus. TemplaVoila analyzes the HTML template we have mapped to give us good default TypoScript code for our main menu. Just to make sure it is correct, it will show us what it plans to create on the next screen, as shown in the following code snippet. If the wizard has evaluated our template correctly, the default TypoScript should look like this:

lib.mainMenu = HMENU
lib.mainMenu.entryLevel = 0
lib.mainMenu.wrap = <ul id="menu-area">|</ul>
lib.mainMenu.1 = TMENU
lib.mainMenu.1.NO {
allWrap = <li class="menu-item">|</li>
}

If you have worked with TypoScript before, this code will probably be familiar to you as the basic code for all menus when you are first learning. If you don't understand the menu code yet, don't worry. We will learn how to create menus with TypoScript in Chapter 4:

lib.mainMenu = HMENU
lib.mainMenu.entryLevel = 0
lib.mainMenu.wrap = <ul id="menu-area">|</ul>
lib.mainMenu.1 = TMENU
lib.mainMenu.1.NO {
allWrap = <li class="menu-item">|</li>
}

Go ahead and click on the Write main menu TypoScript code button.

Creating the submenu

Next will be to create the submenus for our site. The TypoScript will be almost exactly the same, except we will be using an object called subMenu and we are going to set the entry level to 1. Here is what the default code should look like:

lib.subMenu = HMENU
lib.subMenu.entryLevel = 1
lib.subMenu.wrap = <ul id="submenu-area">|</ul>
lib.subMenu.1 = TMENU
lib.subMenu.1.NO {
allWrap = <li class="submenu-item">|</li>
}

Click on the Write sub menu TypoScript code button at the bottom of the page. Once you have chosen to write the code, the next page will only have one final button to click that says Finish Wizard!

Testing the finished template

After we click that button, it will save all of our changes and load the new TYPO3 site that was created when we started the TempaVoila Wizard. We're done, and we should all be looking at a page that at least somewhat resembles the example shown in the following screenshot:

 

The page tree


The TemplaVoila Wizard helped us create our first template, but it also generated a TYPO3 page tree full of content. All of the websites and pages in a TYPO3 installation are organized into a single page tree that we can navigate in the middle frame of the backend. Each website has a single root page where the main template is created; the root page of our new site is called Awesome Site. The rest of the pages in our website are organized beneath the root page. All of the subpages directly beneath our root page (Products, Content Elements, Visions, and so on) are at level 0 of our page tree, and they will show up in the main menu. As we go deeper in the page tree, the level number increases. The pages under Content Elements (Headers, Text, and so on) are on level 1, and they will show up in our submenu when we are on Content Elements or any of its subpages. Any subpages to those pages on level 1 are on level 2, and it can keep branching off as much as we want. This is our page tree:

 

If something didn't work right


Of course, I ran through this example multiple times before writing this, and oddly kept running into a broken page at the end of the wizard. If this happens to you too, don't worry. We are about to fix any problems that the wizard caused right now.

If the wizard did not assign our new template to the main page correctly, you may be confronted with this:

If this happens, it's still an easy problem to fix. This output on the frontend means that the wizard didn't assign our template to the main page. So, in the backend, select Web | Page in the far-left menu bar and then, in the page-tree, right-click on our main page and choose Edit from the pop-up menu, as shown in the following screenshot:

In the edit form just open up the last tab at the top that is labeled Extended. The top section is labeled Use Template Design: and we are going to choose Main Template, which is the template we just mapped, from the drop-down list. Once you choose the template, click on the disk icon to save your update.

 

Adding content to our front page


Now that we have our template, we can add some content to our front page. If the wizard already added example content, then you can skip the rest of this section.

As editors, we will use the TemplaVoila Page view to add elements that are mapped in the current template. TypoScript was used to create the main menu and sub menus, so they are not visible in the Page view. The only mapped data element that we can currently add content to in our template is the Main Content Area, but we will add more content areas in later chapters that will show up in the Page view.

  1. To add a content element, select Web | Page button in the far-left menu bar and then select (that is click on the page title of) the main page for our site in the page tree. You will see an edit form similar to the following screenshot.

  2. Click on the Create new element button in the Main Content Area.

  3. Next, select Regular text element as the type of content that we want to create. If you would like to include an image, select Text with image.

  4. Use the edit form to add a header and some content to your new content element and save your changes.

After you've saved your new content element, you can see it in the TemplaVoila Page view and the frontend of your TYPO3 site:

 

Summary


Congratulations, you have a site! Okay, I know it's ugly right now, but we'll make it pretty soon enough. Right now, you just need to appreciate how far along you are. After learning about the history of TYPO3 templates, we have already created our first template in TemplaVoila and started adding content to our pages.

Our site has nothing to show our clients or bosses yet, but we can finally move on to the reason you bought this book: modifying templates. So, go ahead and get some coffee and congratulate yourself a little more, but hurry back. In the next chapter, we're going to start using CSS to update the look of our templates. We'll look at how we can dynamically call our stylesheets using TypoScript. Then, we can look at ways we can use our template and TYPO3's built-in markup to style our menus and specific sections of content.

About the Author

  • Jeremy Greenawalt

    Jeremy Greenawalt is a full-time developer and part-time writer with close to ten years professional experience in website and application creation. His first love was writing, but programming quickly followed.He is a co-founder of Vintage 56 where he helps develop websites, online shopping carts, web apps, iPhone/iOS apps, and anything else his friends can think up. Jeremy is also the web director of a large ministry, Generals International. Jeremy lives near Dallas, Texas with his wife, Rebekah, and their ever-youthful puppy, Aingeal. He loves spending time at home reading, playing around on the piano, or just relaxing on the couch with his family. You can read more from Jeremy at pocketrevolutionary.com, and you can follow him on Twitter at @jgreenawalt.

    Browse publications by this author
Book Title
Unlock this full book FREE 10 day trial
Start Free Trial