Templavoila: The HTML Template, CSS and JS files
HTML template
For this website, we've created an HTML template called "main_template.html" and put it in the folder "/fileadmin/templates/". If you're rebuilding this site, copy the template to the same folder on your server. If you've finished building your website, we would really appreciate it if you link back to the TYPO3Buddy website.
The HTML template looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TYPO3Buddy</title>
<link rel="stylesheet" type="text/css" href="css/main.css" media="all" />
</head>
<body>
<div id="container">
<div id="container_header_bg">
<div id="container_header_top">
<div id="header_top">
<div id="header_top_left">
<a href="/"><img src="images/logo.png" /></a>
</div><!-- header_top_left -->
<div id="header_top_right">
<p>Header top right</p>
</div><!-- header_top_right -->
<div class="clearer"></div>
</div>
</div><!-- container_header_top -->
<div id="header_mobile">
<img src="/fileadmin/templates/images/mobile-menu_white.png" id="mobile_menu" alt="menu" title="menu" />
</div>
<div id="container_header_menu">
<div id="header_menu">
<div class="menu_header menu_ul">
<ul>
<li>
<div class="menu_header_no"><a href="/">Home</a></div>
</li>
<li>
<div class="menu_header_actifsub"><a href="/">New page</a></div>
<ul class="menu_sub">
<li><div class="menu_sub_no"><a href="/" target="_top">Sub 1</a></div></li>
<li><div class="menu_sub_no"><a href="/" target="_top">Sub 2</a></div></li>
</ul>
</li>
<li>
<div class="menu_header_ifsub"><a href="/">Other page</a></div>
<ul class="menu_sub">
<li><div class="menu_sub_no"><a href="/" target="_top">Sub 1</a></div></li>
<li><div class="menu_sub_no"><a href="/" target="_top">Sub 2</a></div></li>
<li><div class="menu_sub_act"><a href="/" target="_top">Sub 3</a></div></li>
</ul>
</li>
</ul>
</div>
</div><!-- header_menu -->
</div><!-- container_header_menu -->
</div><!-- container_header_bg -->
<div id="container_header_image">
<div id="header_image">
<!-- header image -->
</div><!-- header_image -->
</div><!-- container_header_image -->
<div id="container_breadcrumb">
<div id="breadcrumb">
<div class="menu_breadcrumb menu_ul">
<ul>
<li><a href="/">TYPO3Buddy</a></li>
<li>></li>
<li><a href="/">Setup the basics</a></li>
</ul>
</div>
</div><!-- breadcrumb -->
</div><!-- container_breadcrumb -->
<div id="container_content">
<div id="content">
<div id="content_menu">
<div class="menu_left menu_ul">
<div class="menu_1">
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<div class="menu_act"><a href="/">Other page</a></div>
<div class="menu_2">
<ul>
<li>
<a href="/">Sub page 1</a>
</li>
<li>
<a href="/">Sub page 2</a>
</li>
<li>
<a href="/">Add content to the home page</a>
</li>
</ul>
</div>
</li>
<li>
<a href="/">Another page</a>
</li>
</ul>
</div>
</div>
</div>
<div id="content_main">
<h1>Main content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<!-- flexible content block start -->
<div class="content_2column_container">
<div class="content_column_left">
text left
</div>
<div class="content_column_right">
text right
</div>
<div class="clearer"></div>
</div> <!-- content_2column_container -->
<!-- flexible content block end -->
</div>
<div class="clearer"></div>
</div>
</div><!-- container_content -->
<div id="container_footer">
<div id="footer">
<div id="footer_left">
<div class="menu_footer menu_ul">
<ul>
<li>© 2011 TYPO3Buddy</li>
<li>|</li>
<li><a href="/">Home</a></li>
<li>|</li>
<li><a href="/">Disclaimer</a></li>
</ul>
</div>
</div><!-- footer_left -->
<div id="footer_right">
<p>Footer right</p>
</div><!-- footer_right -->
<div class="clearer"></div>
</div>
</div><!-- container_footer -->
</div><!-- container -->
<div id="typo3buddy">
Constructed with <a href="http://typo3buddy.com">TYPO3Buddy.com</a>
</div>
</body>
</html>
We have left out most of the menu parts, as they will be included dynamically by TYPO3 later. Of course, all the comments and "lorem ipsum" texts within the div tags will be replaced with content by TYPO3 too.
CSS
Essential part of the HTML template is the CSS file, which is stored in the folder "/fileadmin/templates/css/". That's where all the styling will be handled, including the mobile menu. If you want to use it; copy it and store it in the same folder on your server.
Javascript
TYPO3Buddy uses javascript for the mobile and desktop menu. Make sure you copy the javascript file and store it in the folder "/fileadmin/templates/script/". This file also depends on jQuery, so include the jQuery source too (we'll do this in the main typoscript template in the typoscript part of the tutorial).
Images
Essential part of the CSS file are the logo and header images, as well as the menu image for mobile devices. These will be stored in the folder "/fileadmin/templates/images/". If you want to use those, download them and copy them to that location.
About the mobile menu and responsive design
Keep in mind that the responsiveness of TYPO3Buddy won't be covered extensively in the tutorial. Be sure that you include all necessary files. Also, the left menu needs to exist: this is the main menu in the mobile version. If your website doesn't use it, hide it with css. Examine the source code to find out how it works, otherwise remove the css below the "responsive design" comment in the main.css file.
The TYPO3Buddy website is a tutorial to rebuild the TYPO3Buddy website from scratch. You can choose from a TYPO3 Fluid tutorial and a TYPO3 Templavoila tutorial. You'll build TYPO3 websites like you've done so for years!Kind reminder! This tutorial has been tested with and updated for TYPO3 v10. Please keep in mind that the tutorial has once been set up for TYPO3 v6. It follows some deprecated conventions. If so, this will be mentioned in the tutorial.