Dernière modification au site : 17 mai 2012


Édition simple
  1. Présentation de l'outil simple
  2. Taper / coller du texte
  3. Importation et conversion
  4. Créer des liens
  1. Sélecteur de couleurs
  2. Sélecteur de classes
  3. Manipulation des tableaux

Sélecteur de classes

Dans l'outil d'édition simple Bouton_modifier_simple , le sélecteur de classe classes vous offre une foule d'options.

   boite_classes

Test : cliquez ici pour faire disparaître/apparaître le paragraphe


Nous pouvons composer des classes supplémentaires sur mesure, avec par exemple une image de fond spéciale, ou même un comportement spécial. Par exemple, cliquez sur le titre de cette section « Utilisation des couleurs et des classes » pour faire disparaître et réapparaître ce paragraphe.

On peut
 combiner des
classes
 CTRL + CLIC pour sélectionner plus d'une classe dans la liste









Composer une classe avec CTRL + CLIC dans la liste, pour faire une sélection multiple. On voit en temps réel le style qui sera appliqué, cependant la plupart des effets (comme le paragraphe qui disparaît ci-dessus) sont appliqués seulement sur les pages approuvées alors souvent ces options ne sont laissés qu'aux super-administrateurs..

Et pour ceux qui aiment les raccourcis-claviers, CTRL-O pour appliquer la dernière classe composée, si on ne veut pas ouvrir l'outil !


Les mots « bloc » et « inline » viennent du langage de programmation.

Les classes de type « bloc » forment littéralement un bloc, donc elles passent des lignes.

Tandis que celles de types « inline » restent dans la ligne .. on le sait par essai/erreur OU, si vous avez la version de Bamboo d'octobre 2011 ou plus, avec la couleur dans la liste déroulante, comme dans l'image ci-haut.

Dans les classes composées, dès qu'une classe bloc est présente, c'est le bloc qui l'emporte. La section complète sera donc de type bloc.

Parfois, la sélection est un peu capricieuse, et on ne peut pas appliquer une classe sur n'importe quoi, par exemple si votre sélection contient à la fois du texte gras et normal, ou ne contient que la moitié d'un bloc. Dans ce cas, vous pouvez isoler le bloc de texte auquel vous voulez appliquer une classe en ajoutant quelques lignes ou quelques espaces avant et après, puis tenter de recommencer l'opération.


NOUVEAUTÉ FÉVRIER 2012 : À même l'outil des classes, se trouve maintenant un bouton « retirer la classe en cours ». Vous n'avez donc qu'à placer votre curseur dans la classe à retirer, puis à cliquer ! Rien de plus simple !

Pour retirer une classe

Bouton_modifier_simple ÉDITION SIMPLE : Souvent, vous n'avez qu'à placer le curseur au début du texte et appuyer sur RETOUR-ARRIÈRE (backspace). Si ça ne fonctionne pas : copiez (CTRL-C) le texte contenu dans la classe et supprimez la entièrement, puis collez le texte directement dans la page avec le raccourci-clavier « magique » CTRL-SHIFT-V. Vous pouvez aussi le coller dans l'outil d'ajout de contenu (par le bouton plus options_plus) et seul le texte sera conservé.

Bouton_modifier Vous pouvez aussi passer par l'ÉDITION AVANCÉE : dans la boîte de texte, trouvez le début du texte de la classe à supprimer, et enlevez la balise qui se trouve juste avant.

retirer_classe
Dans notre exemple, vous devez retirer de <div, au début, jusqu'à zenbox">, avant le début du texte.

Bouton_modifier Toujours avec l'outil d'édition avancée, vous pouvez aussi utiliser le bouton « retirer le format de la sélection », mais cette option retirera aussi tous les autres formats, comme les couleurs et les titres.

Communiquez avec nous pour connaître les possibilités d'une mise à jour de votre Bamboo !

Classe en cours sur le curseur


Depuis février 2012, une nouvelle section est classe_sur_curseurprésente dans l'outil des classe. En bas complètement, vous pouvez voir la classe présente à l'emplacement de votre curseur. Ce qui vous permet entre autre de savoir quelle(s) classe(s) vous avez utilisé pour avoir l'effet que vous voudriez reproduire ailleurs !

Vous pouvez maintenant ajouter facilement des classes à une section qui en comporte déjà. En effet, simplement en sélectionnant les classes à ajouter et à cliquer sur « ajouter les classes...», votre sélection sera ajoutée.

Pour ceux qui connaissent très bien Bamboo, le champ où est inscrit le nom de la classe en cours vous permet d'ajouter une classe avec son code. Après avoir inscrit la classe à ajouter ou retiré la classe non désirée, cliquer sur le bouton « ajuster manuellement cette classe » et vous verrez le résultat en temps réel.

Le bouton « retirer les classes » retirera ces dernières là où est situé le curseur.


Étapes pour transformer un élément en deux colonnes égales,
à partir du sélecteur de classe


  • En suivant ces étapes, vous évitez entre autre les conflits de marges et de « padding », c'est pourquoi il faut éviter de combiner la classe « colonne flottante » à une autre classe de type « bloc »
  • Pour insérer du contenu pleine largeur à la suite de telles colonnes, créez un nouvel élément !


1- Sélectionner la partie de texte constituant la première colonne


Nunc at aliquam turpis. Nulla gravida gravida odio nec euismod. Etiam ipsum sapien, vehicula non rutrum et, iaculis eleifend ipsum. Sed eros libero, fringilla ut bibendum non, vulputate quis tortor. Phasellus ac quam enim, eget vehicula mauris. In pharetra dignissim bibendum. Duis libero tellus, vehicula sit amet auctor sit amet, varius eget magna. Nullam venenatis, risus ut elementum pharetra, sapien diam volutpat nulla, fermentum sodales est leo vitae ante. Maecenas tincidunt convallis dui quis interdum. Fusce tristique varius neque, vel pharetra dolor semper sit amet. Suspendisse potenti. Vestibulum aliquam massa vitae lorem ornare pharetra.

2- Appliquez la classe « Colonne flottante », puis faire de même sur la deuxième colonne

Nunc at aliquam turpis. Nulla gravida gravida odio nec euismod. Etiam ipsum sapien, vehicula non rutrum et, iaculis eleifend ipsum. Sed eros libero, fringilla ut bibendum non, vulputate quis tortor. Phasellus ac quam enim, eget vehicula mauris.
In pharetra dignissim bibendum. Duis libero tellus, vehicula sit amet auctor sit amet, varius eget magna. Nullam venenatis, risus ut elementum pharetra, sapien diam volutpat nulla, fermentum sodales est leo vitae ante. Maecenas tincidunt convallis dui quis interdum. Fusce tristique varius neque, vel pharetra dolor semper sit amet. Suspendisse potenti. Vestibulum aliquam massa vitae lorem ornare pharetra.

3- Vous pouvez ensuite appliquez des classes à l'intérieur des colonnes.

Nunc at aliquam turpis. Nulla gravida gravida odio nec euismod.
Etiam ipsum sapien, vehicula non rutrum et, iaculis eleifend ipsum. Sed eros libero, fringilla ut bibendum non, vulputate quis tortor. Phasellus ac quam enim, eget vehicula mauris.
In pharetra dignissim bibendum. Duis libero tellus, vehicula sit amet auctor sit amet, varius eget magna.
Nullam venenatis, risus ut elementum pharetra, sapien diam volutpat nulla, fermentum sodales est leo vitae ante. Maecenas tincidunt convallis dui quis interdum.
Fusce tristique varius neque, vel pharetra dolor semper sit amet. Suspendisse potenti. Vestibulum aliquam massa vitae lorem ornare pharetra





Autre exemple d'utilisation simple des classes

En sélectionnant quelques mots,
on applique une classe combinant
« flottant à droite » et « petit »

Horizontal4
pour ajouter des informations
dans ce nouveau contenant
ou même forer
Bien qu'on peut déjà placer directement une image flottante, pour ajouter du contenu supplémentaire sous l'image on doit faire flotter un « contenant » pour le texte, auquel on ajoute ensuite une image et tout ce que l'on désire.

Un peu de Lorem Ipsum pour remplir notre exemple !
Nulla gravida gravida odio nec euismod. Etiam ipsum sapien, vehicula non rutrum et, iaculis eleifend ipsum. Sed eros libero, fringilla ut bibendum non, vulputate quis tortor. Phasellus ac quam enim, eget vehicula mauris. In pharetra dignissim bibendum. Duis libero tellus, vehicula sit amet auctor sit amet, varius eget magna. Nullam venenatis, risus ut elementum pharetra, sapien diam volutpat nulla, fermentum sodales est leo vitae ante. Maecenas tincidunt convallis dui quis interdum. Fusce tristique varius neque, vel pharetra dolor semper sit amet. Suspendisse potenti. Vestibulum aliquam massa vitae lorem ornare pharetra. Nullam venenatis, risus ut elementum pharetra, sapien diam volutpat nulla, fermentum sodales est leo vitae ante. Maecenas tincidunt convallis dui quis interdum. Fusce tristique varius neque, vel pharetra dolor semper sit amet. Suspendisse potenti. Vestibulum aliquam massa vitae lorem ornare pharetra.

Mais rien de mieux que de l'essayer pour voir le résultat directement dans la page !
Dans la liste déroulante, plusieurs choix de classes s'offrent à vous.

En sélectionnant une classe (ou plusieurs, en tenant la touche ctrl enfoncée), vous verrez un aperçu directement dans la fenêtre.