DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

EXT: Readable name of your extension

Created:2010-02-18T17:33:18
Changed by:Mark Buch
Changed:2010-09-30T22:11:40
Classification:extensionkey
Description:The keywords help with categorizing and tagging of the manuals. You can combine two or more keywords and add additional keywords yourself. Please use at least one keyword from both lists. If your manual is NOT in english, see next tab "language" ---- forEditors (use this for editors / german "Redakteure") forAdmins (use this for Administrators) forDevelopers (use this for Developers) forBeginners (manuals covering TYPO3 basics) forIntermediates (manuals going into more depth) forAdvanced (covering the most advanced TYPO3 topics) see more: http://wiki.typo3.org/doc_template#tags ----
Keywords:keywords comma-separated
Author:Author Name
Email:your@email.com
Info 4:
Language:en

img-1 img-2 960gs_include -mb_960gs_include

960gs_include

Extension Key: mb_960gs_include

Language: en

Keywords: frontend plugin, 960gs, gridsystem, css

Ext. copyright 2000-2010, Mark Buch, <info@devgeek.de>

This document is published under the Open Content License

available from http://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3

- a GNU/GPL CMS/Framework available from www.typo3.org

Table of Contents

EXT: Readable name of your extension 1

`Introduction 3 <#1.1.Introduction|outline>`_

What does it do? 3

Screenshots 3

`Users manual 4 <#1.2.Users%20manual|outline>`_

FAQ 4

`Administration 5 <#1.3.Administration|outline>`_

FAQ 5

`Configuration 6 <#1.4.Configuration|outline>`_

FAQ 6

Reference 6

`Tutorial 7 <#1.5.Tutorial|outline>`_

`Known problems 8 <#1.6.Known%20problems|outline>`_

`To-Do list 9 <#1.7.To-Do%20list|outline>`_

`ChangeLog 10 <#1.8.ChangeLog|outline>`_

Important guidelines 11

`Issues with Open Office documentation for TYPO3 12 <#2.1.Issues%20w ith%20Open%20Office%20documentation%20for%20TYPO3|outline>`_

Inserting images 12

Paragraph styles 12

Linking 13

Meta data and updates 13

HowTo: Update a manual to the new layout 13

HowTo: (alternative) Import the styles from another document 14

`HowTo: Fix the Table Of Contents when it is empty 14 <#2.1.8.HowTo:%2 0Fix%20the%20Table%20Of%20Contents%20when%20it%20is%20empty%20|outline >`_

HowTo: Fix the Table Of Contents when a chapter is missing 14

Help by documentation.openoffice.org 14

Introduction

What does it do?

The 960gs_include extension simply includes the 960 grid system ( http://960.gs from Nathan Smith). The documentation gives you a overview how to handle a simple site setup with typo3 using the 960 grid system.

Users manual

  • Download and install the extension
  • Include the extension in your root level site, which contains your pag structure
  • img-3 Load the static typoscript template as shown
  • The folder tree of the 960 gridsystem ist completely unzipped in the ressources folder
  • You can clean up the ressources folder if you dont want to use all features like photoshop grid templates, demo code, …

img-4

Configuration

  • The important part is to know that the gridsystems css is loaded via includeCSS {}
  • The 960gs needs 3 css files to include: reset.css, 960.css and text.css
  • If you want to add your own classes to style your site you need to include the css code as file4 (see below)!!! Your code will be added as the last css file – so your custom style will not be overwritten

((generated))

For a better understanding here you'll see the whole extension code:
page.includeCSS {
  file1 = typo3conf/ext/mb_960gs_include/ressources/code/css/reset.css
  #file1.title = xxx
  file2 = typo3conf/ext/mb_960gs_include/ressources/code/css/text.css
  #file2.title = yyy
  file3 = typo3conf/ext/mb_960gs_include/ressources/code/css/960.css
  #file3.title = zzz
}
Example

Here is a basic page setup. Stylesheet and templatefile are included as ressources (style*.css, template*.html):

page = PAGE
page {
  typeNum = 0
  config {
    #cache ein/aus
    no_cache = 0
    doctype = xhtml_trans
    #doctypeSwitch = false
    xmlprologue = none
    locale_all = de_DE
    language = de
    htmlTag_langKey = de
    prefixLocalAnchors = all
    disablePrefixComment = false
    xhtml_cleaning = all
    message_page_is_being_generated = Seite wird erstellt!
    headerComment (Realisierung dieses Internetprojektes durch, Mark Buch ...)
}

bodyTag = <body>
includeCSS {
  file4 = style*.css
}
10 = TEMPLATE
10 {
  template = FILE
  template.file = template*.html
  workOnSubpart = MYBODY
  marks {
    NAVIGATION < temp.menu
    BREADCRUMB < temp.breadcrumb
    CONTENT < styles.content.get
  }
}

For production/live setup commend the extensions ipsum and metags extended.The following code snippets are very basic verions of style*.css and template*.html ressource files:

Example: style*.css
body {
  background-color: #EEE;
}

.wrapperbg {
  background-color: #FFF;
}

.header {
  border-top: 10px solid #FFF;
  background-color: #CCC;
}

.content {
  background-color: #CCC;
}

.border {
  background-color: #CCC;
}

.footer {
  background-color: #CCC;
  border-bottom: 10px solid #FFF;
}
Example: template*.html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<!--###MYBODY###-->
<div class="container_12 wrapperbg">
        <div class="grid_12 header">
                <p>
                        HEADER: 940px
                </p>
        </div>
        <!-- end .grid_12 -->
        <div class="clear"></div>

        <div class="grid_9 content">
                ###CONTENT###
        </div>
        <div class="grid_3 border">

                <p>
                        CONTENT: 220
                </p>
        </div>
        <!-- end .grid_3 -->
        <div class="clear"></div>

        <div class="grid_12 footer">
                <p>
                        FOOTER: 940
                </p>
        </div>
        <!-- end .grid_12 -->
        <div class="clear"></div>
</div>
<!--###MYBODY###-->
</body>
</html>

TIP: use a sticky footer with 960 gs
After all Styles were included you can load an additional styleshhet file which contain the following css code:

* {
        margin: 0;
}
html, body {
        height: 100%;
}
.wrapper {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -40px;
}
.footer, .push {
        height: 40px;
}

Extend the html structure as shown here:

<div class="container_12 wrapper">
        <div class="grid_12">
                HEADER
        </div>
        <!-- end .grid_12 -->
        <div class="clear"></div>

        <div class="grid_8">
                CONTENT
        </div>
        <!-- end .grid_8 -->
        <div class="grid_4">
                RAND LINKS
        </div>
        <!-- end .grid_4 -->
        <div class="clear"></div>

    <div class="push">&nbsp;</div>
</div>

<div class="container_12 footer">
        <div class="grid_12">
                HIER DER FOOTER TEXT
        </div>
        <!-- end .grid_12 -->
        <div class="clear"></div>
</div>

Known problems

- no problems occurred

Todo

- flag to enable compression- change typoscript into php code- update template demo with more functions menu, etc.

img-2 9