.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt .. role:: underline ===================== Typo3 Template Basics ===================== :Author: Kasper Skårhøj :Created: 2003-11-24T12:06:00 :Changed by: .. . :Changed: 2003-11-26T10:00:18 :Info 1: :Info 2: :Info 3: :Info 4: .. _EXT-Gabarits-Typo3-Les-Bases: EXT: Gabarits Typo3 – Les Bases =============================== Extension Key: **template\_basics\_doc** Copyright 2000-2003, Marlies Cohen, <:underline:``mc@mcuniverse.com `_` > Traduction: Francis Larrey 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.com .. _Table-des-matires: Table des matières ------------------ **Gabarits Typo3 – Les Bases 1** **Gabarits Typo3 - Les Bases 2** **Le Gabarit HTML 2** Exemple de Gabarit HTML 3 **Le Gabarit Typo3 6** Gabarit Typo3 : Constants 6 Gabarit Typo3 : Setup 7 Gabarit Typo3 : Static 8 **Feuille de Styles 9** Exemple de Feuille de Styles 9 .. _Gabarits-Typo3-Les-Bases: Gabarits Typo3 - Les Bases -------------------------- Après beaucoup d’essais et d’erreurs, j’ai créé ce document pour m’aider à voir clairement comment s’articulent le Gabarit HTML, le Gabarit Typo3 et ma Feuille de Styles. Chaque section de mon site ayant une combinaison de couleurs différente, il m’a semblé pratique d’avoir une base de travail que je puisse adapter facilement. Je me suis aperçue, à la lecture du groupe de news Typo3, que beaucoup d’autres utilisateurs avaient du mal à comprendre le fonctionnement des Gabarits. C’est pourquoi je publie ce document. Une page Typo3 se compose de 3 éléments : Elément 1 : Le Gabarit HTMLElément 2 : Le Gabarit Typo3Elément 3 : La Feuille de Styless CSS Pour voir comment les Gabarits travaillent ensemble, vous pouvez consulter ma version en ligne de ce tutoriel : http://www.mcuniverse.com/index.php/T3\_Template\_Basics/847/0/ .. _Le-Gabarit-HTML: Le Gabarit HTML --------------- C’est dans le Gabarit HTML que vous définissez le design de votre page. Il contient des parties statiques, qui restent donc les mêmes dans tout le site –ou dans une section-, et des parties dynamiques, qui changent à chaque page J’utilise généralement des tableaux pour créer l’ossature de mon site. Mon tableau a une largeur de 750px, 2 colonnes et plusieurs lignes. La première colonne a une largeur de 175px, la seconde, qui reçoit le texte principal, 575px. - Dans la ligne du haut, je mets mon image principale. Sur cette page, c’est mon image de Tuteur en Informatique. Elle est la même sur toutes les pages de cette section du site (statique). - Dans la ligne suivante, je place la Navigation Haute, centrée dans un tableau sans bordure, composé d’une seule cellule. J’insère une balise Typo3 ###TOPNAV### pour qu’elle soit générée automatiquement (dynamique). La troisième ligne est scindée en deux colonnes: - La colonne de gauche contient ma Navigation Gauche, repérée par une balise Typo3 ###LEFTNAV### pour une génération automatique (dynamique). - La colonne de droite, qui reçoit le contenu principal est repérée par une balise ###CONTENT###. Cette partie est générée quand j’ajoute du contenu à ma page (dynamique). - Dans la quatrième ligne, je mets tous les liens que je n’ai pas pu placer ailleurs et qui sont les mêmes à chaque page (statique). - Dans la cinquième ligne, je mets la date de mise à jour. Comme je n’ai pas réussi à la générer automatiquement, j’utilise une «bordure de contenu» pour l’insérer manuellement et place donc la balise Typo3 ###CONTENT\_BORDER### - La sixième ligne est identique sur toutes les pages (statique). Les informations sont placées dans une cellule et formatées par une classe CSS. - La dernière ligne est une réplique de ma Navigation Haute, mais ne porte pas le même nom, pour que je puisse leur appliquer des styles différents –couleur de fond, par exemple-. J’insère donc une balise ###BOTTOMNAV###, pour que cette partie soit générée automatiquement (dynamique). .. ### BEGIN~OF~TABLE ### .. _Image-Principale: Image Principale ^^^^^^^^^^^^^^^^ .. container:: table-row a Image Principale fileadmin/pics/\* **Partie Statique** .. _Navigation-Haute-tableau-dune-seule-cellule-550px-de-largeur: Navigation Haute – tableau d’une seule cellule, 550px de largeur. **Partie Dynamaique** .. _Navigation-Gauche: Navigation Gauche ^^^^^^^^^^^^^^^^^ .. container:: table-row a Navigation Gauche
**Partie Dynamique** b Contenu principal **Partie Dynamaique** .. _Rechercher-Envoyer-un-ami-Imprimer-Haut-de-page: Rechercher \| Envoyer à un ami \| Imprimer \| Haut de page ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. container:: table-row a Rechercher \| Envoyer à un ami \| Imprimer \| Haut de page Ligne Feedback **Partie Statique** .. _BORD-CONTENU-DIV-class-lastupdate: !-- ###BORD\_CONTENU### -->
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. container:: table-row a !-- ###BORD\_CONTENU### -->
Page mise à jour le : **Partie Dynamaique** .. _Site-and-graphics-created-and-maintained-by-Marlies-Cohen: Site and graphics created and maintained by Marlies Cohen © ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. container:: table-row a Site and graphics created and maintained by Marlies Cohen © 1997-2003\* mcu(at)mcuniverse.com \*

**Partie Statique** .. _Navigation-Basse-tableau-dune-seule-cellule-550px-de: Navigation Basse – tableau d’une seule cellule, 550px de ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. container:: table-row a Navigation Basse – tableau d’une seule cellule, 550px de largeur. **Partie Dynamaique** .. ###### END~OF~TABLE ###### **Notes** Dans Typo3 Template Setup, insérez : \- Un lien vers cette page.- Un lien vers l’image de fond.- Un lien vers la Feuille de Styles Dans le Gabarit HTML, assurez-vous que le lien vers la Feuille de Styles soit valide. .. _Exemple-de-Gabarit-HTML: Exemple de Gabarit HTML ^^^^^^^^^^^^^^^^^^^^^^^ :: Tutor Template ::
Navigation One Navigation two
Navigation One
Navigation two

- Title -

this is the where new content goes


Newsletter Contact SiteMap Search Tip a Friend Print To Top
lastupdate
Site and graphics created and maintained by Marlies Cohen © 1997-2003 All Rights Reserved * mcu(at)mcuniverse.com *
Navigation One Navigation two
.. _Le-Gabarit-Typo3: Le Gabarit Typo3 ---------------- Le Gabarit Typo3 dit à Typo3 comment il doit interagir avec le Gabarit HTML et la Feuille de Styless CSS pour afficher la page. Le Template Typo3 est divisé en trois grandes sections: Constants, Setup et Static. Vous pouvez voir ci-dessous le contenu de ces 3 sections. .. _Gabarit-Typo3-Constants: Gabarit Typo3- Constants ^^^^^^^^^^^^^^^^^^^^^^^^ :: content { wrap.header1 =

|

wrap.header2 =

|

wrap.header3 =

|

wrap.header4 =

|

wrap.bodytext =

|

case.header1 = | case.header2 = | headerSpace = 0 space = 0 } styles.content.textStyle { face = size = color = } cSet { pageColor = #FFFFFF tableCellColor = #FFFFFF color = black color1 = #003366 color2 = #003366 fontFace = Verdana fontFace.text = Verdana } # Largeur maxi des images, pixels. styles.content.imgtext.maxW = 600 # Cibles, laisser vide pour les sites sans frames. PAGE_TARGET = content.pageFrameObj = # Style à utiliser pour l’impression. Vérifier la validité du lien vers la Feuille de Styles. plugin.alt.print.file.stylesheet = fileadmin/css/print_style.css plugin.alt.print.file.template = fileadmin/media/scripts/printversion_content.tmpl # Activation du lien vers le haut de page. content.linkToTop =
# Activation de RTE (Rich Text Editor = Editeur HTML, NdT). content.RTE_compliant = 1 # Activation Enoyer à un ami. plugin.tipafriend.color1 = plugin.tipafriend.color2 = plugin.tipafriend.color3 = plugin.tipafriend.wrap1 = | plugin.tipafriend.wrap2 = | # Activation de l’indexage de recherche page.config.index_enable = 1 .. _Gabarit-Typo3-Setup: Gabarit Typo3- Setup ^^^^^^^^^^^^^^^^^^^^ :: # Définition d’une 'page' comme objet PAGE par défaut (type=0) lib.stdheader.10.stdWrap.wrap = tt_content.stdWrap.dataWrap = page = PAGE page.typeNum = 0 page.stylesheet = fileadmin/mcucss/mcu_wn_htm_style.css page.bodyTag = page.1 = TEMPLATE page.1.marks.PAGE_UID = TEXT page.1.marks.PAGE_UID.field = uid page.1 { template = FILE template.file = fileadmin/mcu_nw_htm_template.htm workOnSubpart = DOCUMENT_BODY subparts.CONTENT_LEFT < styles.content.getLeft subparts.CONTENT_RIGHT < styles.content.getRight subparts.CONTENT_BORDER < styles.content.getBorder subparts.CONTENT < styles.content.get # Navigation Haute subparts.TOPNAV = HMENU subparts.TOPNAV.special = directory subparts.TOPNAV.special.value = 224 subparts.TOPNAV.1 = TMENU subparts.TOPNAV.1 { NO.allWrap = |*|  | | |*| ACT = 1 ACT.allWrap = |*|  | | |*| } # Navigation Basse subparts.BOTTOMNAV = HMENU subparts.BOTTOMNAV.special = directory subparts.BOTTOMNAV.special.value = 224 subparts.BOTTOMNAV.1 = TMENU subparts.BOTTOMNAV.1 { NO.allWrap = |*|  | | |*| ACT = 1 ACT.allWrap = |*|  | | |*| } # Navigation Gauche subparts.LEFTNAV = HMENU subparts.LEFTNAV.special = directory subparts.LEFTNAV.special.value = 440 subparts.LEFTNAV.1 = TMENU subparts.LEFTNAV.1 { NO.allWrap =
|
ACT = 1 ACT.allWrap =
|
} subparts.LEFTNAV.1.2 = TMENU subparts.LEFTNAV.1.2 { NO.allWrap =
|
ACT = 1 ACT.allWrap =
|
} } # Activation du panneau d’administration pour l’objet PAGE ‘page’: page.config.admPanel=1 # Anti-spam pour l’e-mail config { spamProtectEmailAddresses = 2 spamProtectEmailAddresses_atSubst = (at) } # PATH_INFO: config.simulateStaticDocuments = PATH_INFO config.simulateStaticDocuments_addTitle = 30 #config.absRefPrefix = http://www.mcuniverse.com/ # N’oubliez pas d’ajouter la Feuille de Styles CSet pour que les marges de paragraphes fonctionnent. .. _Gabarit-Typo3-Static: Gabarit Typo3 - Static ^^^^^^^^^^^^^^^^^^^^^^ Voila à quoi ressemble la partie basse de mon Gabarit Typo3 : |img-1| .. _Feuille-de-Styles: Feuille de Styles ----------------- La Feuille de Styles est la troisième partie de ce tutoriel. Son utilisation simplifie tellement la gestion du design du site!Dans l’exemple ci-dessous, j’utilise encore un code couleur pour distinguer les différentes parties du Gabarit HTML et du Gabarit Typo3. **Note :** Ma Feuille de Styles contient toutes les classes qui sont utilisées par Typo3. Cela facilite les corrections quand on ajoute une extension et que le texte n’est pas affiché comme dans le reste du site: il n’y a alors qu’à regarder dans le code source quelle est la classe utilisée, et faire les ajustements nécessaires. .. _Exemple-de-Feuille-de-Styles: Exemple de Feuille de Styles ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ :: /* MCU Stylesheet - left 175 - right column 575 */ BODY { scrollbar-face-color:#003366; /* bleu foncé */ scrollbar-highlight-color:#FFFFFF; /* blanc */ scrollbar-3dlight-color:#C0C0C0; /* gris clair */ scrollbar-darkshadow-color:#000000; /* noir */ scrollbar-shadow-color:#808080; /* gris moyen */ scrollbar-arrow-color:#FFFFFF; /* blanc */ scrollbar-track-color:#E0E0E0; /* bleu-gris clair */ background-image: url(../pics/mcu/mcu_bg_blue.gif); margin: 0.25em 0.5em; } /* Polices Générales */ BODY, P,OL,UL,DIV { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: black; font-style: normal; line-height: 150%; margin: 0.25em 0.5em; } /* Titres */ H1,H2,H3,H4,H5 { font-family: Trebuchet MS, Verdana, sans-serif; color: #003366; /* bleu foncé */ font-variant: small-caps; font-stretch: wider; margin_bottom: 0.5em; border-bottom: thin dashed #003366; /* bleu foncé */ } /* Titre gras de la même taille que le texte */ .title { font-family: Verdana, sans-serif; color: #00000; /* noir */ font-weight: bold; font-variant: small-caps; font-stretch: wider; font-size: 11px; padding: 0.2em } /* Bordure bleue pour les tableaux */ .border { border: 1px solid #COC8D4; /* bleu-gris clair */ } /* Footer */ .footer { font-size: 10px; color: #003366; /* bleu foncé */ line-height: 150%; text-align: center; } /* Dernière mise à jour */ .lastupdate { font-size: 10px; color: #003366; /* bleu foncé */ line-height: 150%; text-align: center; } /* Citation */ .quote { color: #9B193D; /* Bordeaux foncé */ font-weight: 550; } /* Liens dans le texte */ a:link { font-weight: bold; color: #000000; /* noir */ text-decoration: none; } a:visited { font-weight: bold; color: #000000; /* noir */ text-decoration: none; } a:hover { font-weight: bold; color: Red; text-decoration: underline; } /* Navigation haute */ .topnav { background: #C0C8D4; /* gris-bleu clair */ font-family: Verdana, sans-serif; font-size: 11px; font-variant: small-caps; } .topnav a:link { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: none; color: #003366; /* bleu foncé */ padding: 2px; } .topnav a:visited { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: none; color: #003366; /* bleu foncé */ padding: 2px; } .topnav a:hover { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: underline; background: #003366; /* bleu foncé */ color: #FFFFFF; /* blanc */ padding: 2px; } .topnav_act a:active { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: underline; background: #003366; /* bleu foncé */ color: #FFFFFF; /* blanc */ padding: 2px; } .topnav_act a:link { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: none; color: #003366; /* bleu foncé */ padding: 2px; } .topnav_act a:visted { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: none; color: #003366; /* bleu foncé */ padding: 2px; } .topnav_act a:hover { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: underline; background: #003366; /* bleu foncé */ color: #FFFFFF; /* blanc */ padding: 2px; } /* Navigation basse */ .bottomnav { font-family: Verdana, sans-serif; font-size: 11px; font-variant: small-caps; } .bottomnav a:link { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: none; color: #003366; /* bleu foncé */ padding: 2px; } .bottomnav a:visited { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: none; color: #003366; /* bleu foncé */ padding: 2px; } .bottomnav a:hover { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: underline; background: #003366; /* bleu foncé */ color: #FFFFFF; /* blanc */ padding: 2px; } .bottomnav_act a:active { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: underline; background: #003366; /* bleu foncé */ color: #FFFFFF; /* blanc */ padding: 2px; } .bottomnav_act a:link { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: none; color: #003366; /* bleu foncé */ padding: 2px; } .bottomnav_act a:visted { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: none; color: #003366; /* bleu foncé */ padding: 2px; } .bottomnav_act a:hover { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: underline; background: #003366; /* bleu foncé */ color: #FFFFFF; /* blanc */ padding: 2px; } /* Navigation Gauche */ .leftnav { font-family: Verdana, sans-serif; font-size: 11px; color: #003366; /* bleu foncé */ } .leftnav a:link { font-weight: bold; font-family: Verdana, sans-serif; text-decoration: none; color: #003366; /* bleu foncé */ padding: 2px; margin-left: 10px; border-bottom: 1px dotted #003366; /* bleu foncé */ } .leftnav a:visited { font-weight: bold; font-family: Verdana, sans-serif; text-decoration: none; color: #003366; /* bleu foncé */ padding: 2px; margin-left: 10px; border-bottom: 1px dotted #003366; /* bleu foncé */ } .leftnav a:active { font-weight: bold; font-family: Verdana, sans-serif; text-decoration: none; color: #003366; /* bleu foncé */ padding: 1px 2px 2px 2px; margin-left: 10px; border: 1px solid #003366; /* bleu foncé */ background-color: #C0C8D4; /* bleu-gris clair */ } .leftnav a:hover { font-weight: bold; font-family: Verdana, sans-serif; text-decoration: none; color: #9B193D; /* bordeaux */ padding: 1px 2px 2px 2px; margin-left: 10px; border: 1px solid #003366; /* bleu foncé */ background-color: #C0C8D4; /* bleu-gris clair */ } .leftnav_act a:link { font-size: 11px; font-weight: bold; font-family: Verdana, sans-serif; text-decoration: none; color: #003366; /* bleu foncé */ padding: 1px 2px 2px 2px; margin-left: 10px; border: 1px solid #003366; /* bleu foncé */ background-color: #C0C8D4; /* bleu-gris clair */ } .leftnav_act a:visited { font-size: 11px; font-weight: bold; font-family: Verdana, sans-serif; text-decoration: none; color: #003366; /* bleu foncé */ padding: 1px 2px 2px 2px; margin-left: 10px; border: 1px solid #003366; /* bleu foncé */ background-color: #C0C8D4; /* bleu-gris clair */ } .leftnav_act a:hover { font-size: 11px; font-weight: bold; font-family: Verdana, sans-serif; text-decoration: none; color: #003366; /* bleu foncé */ padding: 1px 2px 2px 2px; margin-left: 10px; border: 1px solid #003366; /* bleu foncé */ background-color: #C0C8D4; /* bleu-gris clair */ } /* Spacer sous-menu Navigation Gauche */ .leftnavspc { font-family: Verdana, sans-serif; font-size: 11px; font-variant: small-caps; font-weight: bolder; color: #003366; /* bleu foncé */ text-decoration: none; padding: 2px; margin-left: 15px; background-color: #FFFFFF; /* bleu foncé / border-bottom: thin dotted #9B193D; / bordeaux / } /* Sous-menu Navigation Gauche */ .leftnav1 { font-family: Verdana, sans-serif; font-size: 11px; color: #003366; /* bleu foncé */ } .leftnav1 a:link { font-weight: bold; font-family: Verdana, sans-serif; text-decoration: underline; color: #003366; /* bleu foncé */ padding: 2px; margin-left: 15px; } .leftnav1 a:visited { font-weight: bold; font-family: Verdana, sans-serif; text-decoration: underline; color: #003366; /* bleu foncé */ padding: 2px; margin-left: 15px; } .leftnav1 a:active { font-weight: bold; font-family: Verdana, sans-serif; text-decoration: none; color: #C0C8D4; /* bleu clair */ padding: 2px; margin-left: 15px; background-color: #003366; /* bleu foncé */ } .leftnav1 a:hover { font-weight: bold; font-family: Verdana, sans-serif; text-decoration: none; color: #C0C8D4; /* bleu clair */ padding: 2px; margin-left: 15px; background-color: #003366; /* bleu foncé */ } .leftnav1_act a:link { font-size: 11px; font-weight: bold; font-family: Verdana, sans-serif; text-decoration: none; color: #C0C8D4; /* bleu clair */ padding: 2px; margin-left: 15px; background-color: #003366; /* bleu foncé */ } .leftnav1_act a:visited { font-size: 11px; font-weight: bold; font-family: Verdana, sans-serif; text-decoration: none; color: #C0C8D4; /* bleu clair */ padding: 2px; margin-left: 15px; background-color: #003366; /* bleu foncé */ } .leftnav1_act a:hover { font-size: 11px; font-weight: bold; font-family: Verdana, sans-serif; text-decoration: none; color: #C0C8D4; /* bleu clair */ padding: 2px; margin-left: 15px; background-color: #003366; /* bleu foncé */ } /* Left Navigation SubMenu Level 2 */ .leftnav2 { font-family: Verdana, sans-serif; font-size: 11px; color: #003366; /* bleu foncé */ } .leftnav2 a:link { font-weight: normal; font-family: Verdana, sans-serif; text-decoration: underline; color: #003366; /* bleu foncé */ padding: 2px; margin-left: 20px; } .leftnav2 a:visited { font-weight: normal; font-family: Verdana, sans-serif; text-decoration: underline; color: #003366; /* bleu foncé */ padding: 2px; margin-left: 20px; } .leftnav2 a:active { font-weight: normal; font-family: Verdana, sans-serif; text-decoration: none; color: #9B193D; /* bordeaux */ padding: 2px; margin-left: 20px; border: 1px solid #003366; /* bleu foncé */ } .leftnav2 a:hover { font-weight: normal; font-family: Verdana, sans-serif; color: #9B193D; /* bordeaux */ padding: 2px; margin-left: 20px; border: 1px solid #003366; /* bleu foncé */ } .leftnav2_act a:link { font-size: 11px; font-weight: normal; font-family: Verdana, sans-serif; text-decoration: none; color: #9B193D; /* bordeaux */ padding: 2px; margin-left: 20px; border: 1px solid #003366; /* bleu foncé */ } .leftnav2_act a:visited { font-size: 11px; font-weight: normal; font-family: Verdana, sans-serif; text-decoration: none; color: #9B193D; /* bordeaux */ padding: 2px; margin-left: 20px; border: 1px solid #003366; /* bleu foncé */ } .leftnav2_act a:hover { font-size: 11px; font-weight: normal; font-family: Verdana, sans-serif; text-decoration: none; color: #9B193D; /* bordeaux */ padding: 2px; margin-left: 20px; border: 1px solid #003366; /* bleu foncé */ } /* Lien Feedback */ .fback A { font-family: Verdana, Arial, Helvetica, sans-serif; color: #003366; /* bleu foncé */ font-weight: bold; font-size: 11px; font-stretch: wider; text-decoration: none; display: block; padding: 0.25em; border: 1px solid #003366; /* bleu foncé */ } .fback A:visited { font-family: Verdana, Arial, Helvetica, sans-serif; color: #003366; /* bleu foncé */ font-weight: bold; font-size: 11px; font-stretch: wider; text-decoration: none; display: block; padding: 0.25em; border: 1px solid #003366; /* bleu foncé */ } .fback A:hover { font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; /* blanc */ font-weight: bold; font-size: 11px; font-stretch: wider; text-decoration: none; display: block; background: #003366; /* bleu foncé */ padding: 0.25em; border: 1px solid #333333; /* gris moyen */ } /* Champs des Formulaires */ SELECT { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px } TEXTAREA { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px } INPUT { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px } .caption { font-family : Verdana, sans-serif; font-size : 10px; color : #000000; } .bulletlist { font-family : Verdana, sans-serif; font-size : 10px; color : #000000; } .table { font-family : Verdana, sans-serif; font-size : 11px; color : #000000; } .contenttable { font-family : Verdana, sans-serif; font-size : 11px; color : #000000; padding: 1em; margin-top: 1em; margin-bottom: 1em; border: 1px solid #C0C8D4; } /*Formulaire Recherche */ .searchform { font-family : Verdana, sans-serif; font-size : 11px; color : #000000; font-weight : normal; } .searchresultpagetitle { font-family : Verdana, sans-serif; font-size : 15px; color : #333333; font-weight : bold; } .searchresultcontent { font-family : Verdana, sans-serif; font-size : 11px; color : #000000; font-weight : normal; } .searchresultheader { font-family : Verdana, sans-serif; font-size : 14px; color : #333366; font-weight : bolder; } .searchmarkup { color : #000000; } .loginform { font-family : Verdana, sans-serif; font-size : 14px; color : #000000; font-weight : normal; } /* Formulaire Mail */ .mailform { font-family : Verdana, sans-serif; font-size : 11px; color : #003366; font-weight : normal; } .mailformrequired { font-family : Verdana, sans-serif; font-size : 11px; color : #003366; font-weight : bolder; } .mailformcomment { font-family : Verdana, sans-serif; font-size : 11px; color : #CC0000; font-weight : bolder; } .mailformradio { font-family : Verdana, sans-serif; font-size : 10px; color : #003366; font-weight : normal; } .filelinks { font-family : Verdana, sans-serif; font-size : 12px; color : #000000; } .filelinkssize { font-family : Verdana, sans-serif; font-size : 12px; color : #000000; } Gabarits Typo3 – Les Bases- 17 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: bottom .. :border: 0 .. :height: 255 .. :id: Graphic1 .. :name: Graphic1 .. :width: 479