Ajout de contenu

Joseph Beeson a créé un tutoriel PDF extrêmement complet sur l'ajout de contenu dans CMS Made Simple. Je vais donc ici me contenter de vous donner quelques principes de bases et astuces.

Gestion du contenu
Plusieurs blocs de contenu
Contenu des menus
Les ancres
Style Tiny

GESTION DU CONTENU

Depuis le panneau d'administration de CMSMS, concentrez-vous sur le menu "Contenu" pour gérer le.... contenu ! C'est avec cette partie que vous pourrez éditer vos pages, ajouter des images, modifier les blocs de contenus globaux (comme le footer), etc.

CONTENU DES MENUS

Les menus, une fois définis par les templates et feuilles css, sont gérés automatiquement par le logiciel avec les paramètres choisis. Par exemple, sur cette page, nous avons deux navigations, l'une contenant les pages du 1er niveau (Home, CMS Made Simple, Tutos....), l'autre contenant toutes les pages ayant pour parent la page "tutos". Regardez ce que cela donne dans l'arborescence dans le menu "Contenu" → Pages :

Le fait que ces deux menus soient présents dans cette page et leur style (couleur, font, ect) ont été définis dans le gabarit et les feuilles de style. En l'occurrence ici le gabarit "tuto".

Donc si je rajoute une page, comme ceci (menu Contenu→Pages / Ajouter un nouveau contenu en bas à gauche) en indiquant que le parent est la page 3. Tutos (voir capture précédente) et que le texte du menu est "Exemple".

Après insertion du contenu et enregistrement un nouveau lien appelé "Exemple" apparaîtra dans mon menu de droite.

A moins que je ne décide le contraire ! Et oui peut-être n'avez-vous pas envie qu'une page apparaisse dans votre menu ! Auquel cas il vous suffit de vous rendre sur l'onglet "options" et de décocher la case "afficher dans le menu".

PLUSIEURS BLOCS DE CONTENU

Si vous avez utilisé les tutos de ces pages pour importer votre propre template, vous avez peut-être constaté que je n'ai prévu qu'un seul contenu éditable dans le gabarit à l'aide de {content}.

Mais voilà vous aimeriez plusieurs blocs de contenu. Un sur fond jaune, un vert fluo, un pour une animation ou que sais-je... !

Dans ce cas, il vous faut indiquer dans votre gabarit ceci :

{content block="premier"}
{content block="deuxieme"}
{content block="troisieme"}

Evidemment, vous pouvez remplacer premier, deuxieme et troisième par ce qui vous chante....

Ou, pour gérer les styles, quelque chose comme cela :


<div id="contenuglobal>
{content block="premier"}
<div id="contenu2">
{content block="deuxieme"}
</div>
<div id="contenu*">
{content block="troisieme"}
</div>
</div>

N'oubliez pas de définir les propriétés dans les feuilles de style !

A présent, si vous créer une nouvelle page, vous verrez que plusieurs blocs apparaissent les uns en dessous des autres et vous permettent d'éditer les différents contenus !

LES ANCRES

Pour ceux qui ne savent peut-être pas encore ce qu'est une ancre et comme rien ne vaut un exemple :

En haut de cette page (et vu la longueur de celle-ci) j'ai placé plusieurs liens pointant à l'intérieur de cette même page pour vous aider à atteindre plus facilement le sujet désiré. Retournez au sommet de la page et cliquez sur "Les ancres" pour comprendre.

Deux choses pour ceci :

- un lien qui renvoie vers l'ancre
- une ancre 

Il semble que CMS Made Simple ait actuellement un léger souci pour gérer les ancres.

Explications :

On commence par créer l'ancre. On se place à l'endroit désiré - pour moi juste avant le paragraphe "Les ancres" et on clique sur l'icône ancre de la barre Tiny :

On nomme l'ancre (pour mon exemple "Les ancres") et on clique sur Insérer. Normalement une petite ancre devrait maintenant apparaître dans votre texte.

Pour créer le lien qui va renvoyer vers l'ancre, on sélectionne le texte ou l'image qui servira d'ancre (pour moi le texte "Les ancres" tout en haut de la page) et on clique sur l'icône lien de la barre Tiny :

Dans la fenêtre qui apparaît et à l'aide de la liste déroulante "Ancres", nous pouvons sélectionner l'ancre précédemment créée.

Si tout était pour le mieux dans le meilleur des mondes, à ce stade, tout devrait fonctionner. Mais à priori cela ne sera pas le cas. Les liens risquent fort de vous renvoyer vers beaucoup d'endroits de votre site mais pas du tout là où vous le souhaiteriez.... Je vous passe les explications du pourquoi du comment et passe directement à la solution.

On ne va pas toucher à la définition de l'ancre qui elle fonctionne mais on va modifier le lien renvoyant vers l'ancre.

Le texte ou image vous servant de lien vers l'ancre étant sélectionné, cliquez à nouveau sur l'icône lien (voir capture ci-dessus). 

Dans la première ligne nommée "lien URL"; il va falloir rajouter l'indication de la page concernée, en l'occurrence ici la page "ajout-de-contenu.html" (donc la page où se trouve l'ancre), ce qui donnera l'indication suivante :

ajout-de-contenu.html#Les ancres

Cette fois, ça marche !

Evidemment, vous pouvez pointer sur une ancre d'une autre page, si vous le désirez...!

STYLE TINY

Lorsque vous créez ou éditez une page, vous agissez sur le contenu de la balise {content} de votre gabarit.

Généralement cette balise sera placée dans une div. Et le style général de cette div (police, taille de la police, couleur de police, du fond....) sera défini dans la feuille de style correspondante.

Donc, dès que vous remplissez vos page de contenu, c'est ce style qui s'applique par défaut.

Par exemple si vous choisissez dans la barre Tiny d'appliquer un "Titre de niveau 3", ce sont les propriétés de votre feuille de style qui s'appliquent.

Et rien ne vous empêche d'ailleurs de compléter vos feuilles de style au fur et à mesure de vos besoins.

Pareil pour les listes, les tableaux, etc, pour autant que vous ayez préalablement définis les propriétaires qui s'y rapportent.

Attention, ceci ne fonctionne que vous n'agissiez pas sur le contenu même à l'aide de la barre Tiny. Si vous choisissez une police, une taille de caractère et une couleur dans votre barre Tiny, c'est cela qui s'appliquera. Au niveau du code, cela va vous créer des balises <font> </font> dans votre page html.

Et à l'heure actuelle, c'est ce que nous désirons éviter le plus possible. Le but étant de séparer le contenu de la mise en page !!!

Imaginons maintenant que vous vouliez définir un style particulier accessible dans votre barre Tiny. Prenons un exemple dans cette page : lorsque je vous indique des portions de code, voici le rendu :

{content}

Pour obtenir cela, je sélectionne la ligne concernée et je sélectionne dans ma barre Tiny le style voulu. En en un click, un style particulier s'applique.

Nous allons voir comment y arriver.

Allez, on y va :

1. Définissez dans la feuille de style rattachée au gabarit de la page en cours d'édition les styles utiles. Par exemple, pour moi, dans la feuille de style "tutosimple" rattachée à mon gabarit "tuto", je rajoute les propriétés suivantes :

.codesp {
background: #660033;
color : white;
padding-left : 40px;
}

2. Ensuite menu Extensions→Tiny

3. Vous arrivez directement sur un onglet "ajustements" qui vous permet de définir des options pour Tiny. Je ne vous donne pas plus d'indications ici sur ces différentes options, ça me paraît relativement simple. Dans le second onglet "Barre d'outils" vous pouvez gérer quelles icônes/boutons doivent apparaître dans Tiny (peut être utile pour restreindre les actions de certains éditeurs...).

4. Cliquez sur le troisième onglet "Styles CSS".

5. Remplissez le champ selon les styles que vous voulez voir apparaître dans les styles Tiny, comme ceci :

Style1=codesp

Si vous en avez plusieurs, comme ceci :

Style1=codesp; Style2=attention; .....

6. Cliquez sur "Mise à jour". A présent, les styles devraient apparaître dans la liste déroulante Style dans votre barre Tiny. Vous n'avez plus qu'à les utiliser.

Ceci n'est valable que pour des styles inline simples. Mais pas pour des div !