[TYPO3-english] Trouble with Templating tutorial : Basics

José Fournier jaaf.forums at zoraldia.com
Sat Jan 25 17:13:15 CET 2014


Hi,

I am a beginner and I just installed an introductionpackage-6.1.7
I would like to follow the Templating tutorial: Basics <http://docs.typo3.org/typo3cms/TemplatingTutorial/>.
There is an extension that comes with the tutorial to provide the necessary files.
Unfortunately, this extension is not compatible with version newer than 6.0.99.
I tried to install an older version but I could not manage to do it despite applying two patches.
Whatever it is, I came back to 6.1.7 and  tried to follow the tutorial. I managed to create the page tree and I created the html template from the text inside the tutorial.
I could see the page. After that I wanted to see the effect of the style.css file. In this case no information was provided in the text of the tutorial (and I know no mean of getting the style.css file of the extension). I created a very simple css file but it seems that it has no effect on the page I can see (the page is not styled).
Here is the setup of the Root page of the tree.

# Default PAGE object:
page = PAGE
page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/_temp_/index.html
# Insert shortcut icon in the head of the website
#page.shortcutIcon = fileadmin/_temp_/favicon.ico
# Insert stylesheet in the head of the website
page.stylesheet = fileadmin/_temp_/style.css

Here is the source of the output seen into the browser

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<!-- 
	This website is powered by TYPO3 - inspiring people to share!
	TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
	TYPO3 is copyright 1998-2013 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
	Information and contribution at http://typo3.org/
-->



<title>Home</title>
<meta name="generator" content="TYPO3 6.1 CMS">

<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_bcd352657f.css?1390659395" media="all">
<link rel="stylesheet" type="text/css" href="fileadmin/_temp_/style.css?1390663766" media="all">







</head>
<body>
<!DOCTYPE html>

<html>
    <head>
        <title>Here goes the title</title>
        <meta charset="utf-8" />
        <meta name="description" content="Here goes a description" />
        <meta name="keywords" content="Some keywords regarding the content" />
        <meta name="audience" content="All" />
        <meta name="author" content="Sabine Hueber" />
        <meta name="publisher" content="..." />
        <meta name="Robots" content="index,follow" />
        <meta name="Language" content="English" />
        <meta name="revisit-after" content="1 Day" />
        <meta name="Content-Language" content="en" />

        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
        <!-- ###DOCUMENT### Start -->
        <div id="page_margins">
            <div id="page" class="hold_floats">

                <div id="header">

                    <div id="metanav">
                        <!-- ###METANAV### Start -->
                        <ul>
                            <li><a>Contact</a></li>
                            <li><a>Imprint</a></li>
                        </ul>
                        <!-- ###METANAV### End -->
                    </div>

                    <div id="headertitle">###HEADERTITLE###</div>
                </div>


                <div id="nav">
                    <!-- ###TOPNAV### Start -->
                    <div id="nav_main">
                        <ul>
                            <li><a>Menu Item 1</a></li>
                            <li><a>Menu Item 2</a></li>
                            <li id="current"><a>Menu Item 3</a></li>
                            <li><a>Menu Item 4</a></li>
                        </ul>
                    </div>
                    <!-- ###TOPNAV### End -->
                </div>


                <!-- 3 Column Content -->


                <!-- #col1: Left Column of the Content Area -->
                <div id="col1">
                    <div id="col1_content" class="clearfix">
                        <!-- ###SUBNAV### Start -->
                        <ul id="submenu">
                            <li><a>Submenu Item 1</a></li>
                            <li id="active"><a>Submenu Item 2</a></li>
                            <li><a>Submenu Item 3</a>
                                <ul>
                                    <li><a>Subitem 1</a></li>
                                    <li><a>Subitem 2</a></li>
                                </ul>
                            </li>
                            <li><a>Submenu Item 4</a></li>
                        </ul>
                        <!-- ###SUBNAV### End -->
                    </div>
                </div>
                <!-- #col1: Left Column End -->

                <!-- #col2: Right Column of the Content Area -->
                <div id="col2">
                    <div id="col2_content" class="clearfix">
                        <div>
                            <!-- ###CONTENTRIGHT### Start -->
                            <h2>Right Column - Only Element</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                                sed diam nonumy eirmod tempor invidunt ut labore et
                                dolore magna aliquyam erat, sed diam voluptua. At vero
                                eos et accusam et justo duo dolores et ea rebum. Stet
                                clita kasd gubergren, no sea takimata sanctus est Lorem
                                ipsum dolor sit amet.</p>
                            <!-- ###CONTENTRIGHT### End -->
                        </div>
                    </div>
                </div>
                <!-- #col2: Right Column End -->

                <!-- #col3:  Middle Column of the Content Area -->
                <div id="col3">
                    <div id="col3_content" class="clearfix">
                        <div id="breadcrumb">###DATE### ::: ###BREADCRUMB###</div>
                        <h1>###TITLE</h1>
                        <div>
                            <!-- ###CONTENTMIDDLE### Start -->
                            <h2>Middle Column - Element 1</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                                sed diam nonumy eirmod tempor invidunt ut labore et
                                dolore magna aliquyam erat, sed diam voluptua. At vero
                                eos et accusam et justo duo dolores et ea rebum. Stet
                                clita kasd gubergren, no sea takimata sanctus est Lorem
                                ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
                                sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                                labore et dolore magna aliquyam erat, sed diam voluptua. At
                                vero eos et accusam et justo duo dolores et ea rebum. Stet
                                clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
                                dolor sit amet.</p>
                            <h2>Middle Column - Element 2</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                                sed diam nonumy eirmod tempor invidunt ut labore et
                                dolore magna aliquyam erat, sed diam voluptua. At vero
                                eos et accusam et justo duo dolores et ea rebum. Stet
                                clita kasd gubergren, no sea takimata sanctus est Lorem
                                ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
                                sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                                labore et dolore magna aliquyam erat, sed diam voluptua. At
                                vero eos et accusam et justo duo dolores et ea rebum. Stet
                                clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
                                dolor sit amet.</p>
                            <!-- ###CONTENTMIDDLE### End -->
                        </div>
                    </div>
                </div>
                <!-- #col3: Middle Column End -->

                <!-- IE Column Clearing -->
                <div id="ie_clearing"> </div>
                <!-- IE Column Clearing End -->


                <!-- 3 Column Content End -->


                <!-- Footer Start -->
                <div id="footer">
                    Design: <a>Sabine Hueber, designeon</a>
                </div>
                <!-- Footer End -->

            </div>
        </div>
        <!-- ###DOCUMENT### End -->
    </body>
</html>




</body>
</html>

How to explain that the style.css sheet has no effect while the tuto says it should ?


More information about the TYPO3-english mailing list