Book Image

TYPO3 Templates

By : Jeremy Greenawalt
Book Image

TYPO3 Templates

By: Jeremy Greenawalt

Overview of this book

<p>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.</p> <p>This book is a step-by-step guide for building and customizing templates in TYPO3 using the best solutions<br />available. It takes the readers through one complete example to create a fully functional demonstration site using TypoScript, TemplaVoila, and other core TYPO3 technologies.</p> <p>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.</p>
Table of Contents (18 chapters)
TYPO3 Templates
Credits
About the Author
Acknowledgment
About the Reviewers
Preface
Index

Creating a custom skin


The TemplaVoila Framework has two types of skins: standard skins that are packaged with the extension and stored in the database and custom skins in a directory that we can define. By default, custom skins are stored in fileadmin/templates/skins/, but this can be changed in the Extension Manager. To create a new skin, we can start by copying a standard skin, so we don't have to manually create all of the files and directories we will need:

  1. Click on the Template view on the left sidebar and choose the main template in the root page of our site.

  2. Just like when we chose a skin to use, choose Info/Modify from the drop-down at the top of the editing pane and click on the link labeled Edit the whole template record.

  3. Go to the Skin Selector tab where we chose a skin before.

  4. Under the skin that we want to copy click on the Copy Skin button. For now, let's copy the Busy Noggin White Wireframe skin.

  5. As soon as we choose to copy the skin, the page will refresh and we can see that...