Avec Automne vous pouvez directement gérer les feuilles de styles de votre site depuis l'administration (pour des informations sur les feuilles de style consultez les pré-requis).
La gestion des feuilles de style est accessible depuis le panneau latéral de droite : onglet "Modèles", puis lien "Feuilles de styles".
Vous aurez alors la liste de vos feuilles de styles et répertoires stockés dans le répertoire CSS d'Automne (/css).
- Editer une feuille : sélectionnez-la et cliquez sur « Modifier ».
- Supprimer une feuille : cliquez sur « Supprimer » après l'avoir sélectionné. Assurez vous bien de ne plus avoir besoin d'une feuille de style avant de la supprimer, sous peine de casser le design de votre site.
En mode modification vous pouvez activer la coloration syntaxique (case à cocher en haut à gauche) ce qui vous permettra d'avoir des repères visuels lors de l'édition.
Vous noterez dans la liste des feuilles de style la présence de deux fichiers à part. Ils servent tous les deux à la barre d'outil WYSIWYG fournie avec Automne (CK Editor).
editorstyles.xml défini les styles qui seront accessibles dans la barre d'outil et applicables sur les éléments contenu dans l'éditeur HTML. C'est donc ici qu'il faudra définir les styles gras vert et gras rose par exemple.
Exemple de fichier :
<?xml version="1.0" encoding="iso-8859-1" ?>
<Styles>
<Style name="Gras personnel" element="span">
<Attribute name="style" value="font-weight: bold;" />
</Style>
</Styles>
Dans cette page nous définissons que le style de nom Gras personnel peut être appliqué sur les éléments span et qu'il va mettre sur ceux-ci la propriété CSS font-weight : bold.
De nombreuses autres possibilités vous sont offertes pour en savoir plus consultez l'aide officielle de CK Editor.
editortemplates.xml défini des blocs de XHTML qui seront mis à disposition dans la barre d'outil.
Ainsi si vous devez régulièrement mettre des informations avec une structure précise mais des données variantes dans un bloc de texte, intégrer ces informations dans les templates est une bonne idée.
Exemple de fichier :
<?xml version="1.0" encoding="iso-8859-1" ?>
<Templates>
<Template title="Tableau paramétré pour Automne.">
<Description>Ceci est un exemple de tableau paramétré pour Automne.</Description>
<Html>
<![CDATA[
<table class="CMS_table" cellpadding="2" cellspacing="1" border="0">
<tr>
<th class="CMS_th">titre</th>
<th class="CMS_th">titre</th>
<th class="CMS_th">titre</th>
<th class="CMS_th">titre</th>
</tr>
<tr>
<td class="CMS_td">cellule</td>
<td class="CMS_td">cellule</td>
<td class="CMS_td">cellule</td>
<td class="CMS_td">cellule</td>
</tr>
</table>
]]>
</Html>
</Template>
</Templates>
Ici nous avons créé un template de nom Tableau, paramétré pour Automne. Pour lequel nous souhaitons afficher la description : Ceci est un exemple de tableau paramétré pour Automne.
Nous définissons ensuite le HTML de base qui sera mis à disposition.
Pour plus d'informations sur la création d'un fichier de template, veuillez consultez la documentation officielle de CK Editor.
Les autres fichiers CSS sont classiques et servent soient à vos modèles de pages soit à vos modules. Pour les fichiers CSS des modules, il est possible de laisser Automne gérer automatiquement le chargement de ceux-ci.
Pour cela il suffit de placer dans le répertoire /css/modules un fichier ayant le nom de votre code module. Par exemple pour le module contact (nom de code "pcontact") le fichier sera nommé pcontact.css. Vous pouvez même spécifier les types de périphériques auxquels s'adressent votre fichier CSS.
Par exemple si pour mon module contact je veux avoir une feuille destinée à l'impression je n'ai qu'à ajouter dans le répertoire une feuille nommée pcontact-print.css.
Les périphériques actuellement supportés sont :
- print : impression
- screen : affichage sur écran
Pour les feuilles de styles de module, les feuilles ne précisant pas les périphériques sont considérées comme devant être toujours chargées. Dans l'exemple avec la feuille pcontact, la feuille pcontact.css sera chargée comme étant destinée à tous les périphériques et la feuille pcontact-print.css sera chargée comme étant destinée aux impressions.
Le tag <atm-css-tags>
Dans les modèles de page il est possible de charger vos feuilles de style via le tag <atm-css-tag> d'Automne. Ce tag permet de gérer automatiquement le chargement des fichiers CSS souhaités et d'accroître les performances de chargement.
Exemple d'utilisation :
<html>
<head>
<atm-css-tags files="/css/common.css,/css/interieur.css" media="all" />
<atm-css-tags files="/css/print.css" media="print" />
</head>
<body></body>
</html>
Télécharger la Documentation Automne
English
1 contribution(s)
Par Frank Taillandier le 02/04/2010 17:42:55 :
L'affichage des styles dans l'éditeur est également abordé dans ce sujet du forum : http://www.automne-cms.org/forum/viewtopic.php?f=2&t=618&p=1755#p1755