TYPO3Buddy
TYPO3Buddy is on FacebookTYPO3Buddy is on Twitter
menu

TYPO3 Fluid: HTML Base 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/". For Fluid templating, this template serves only one purpose and that's to check whether the corresponding style sheet works. Fluid does not use this template. You will however copy parts from this template and add some Fluid code to them. These parts are either a content template, a layout or a partial. More about that on the next page.

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>&gt;</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>&copy; 2011 TYPO3Buddy</li>
       <li>&#124;</li>
       <li><a href="/">Home</a></li>
       <li>&#124;</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>

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 (1, 2 and 3), 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.

Next step: Fluid templates, layouts and partials ->

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!