Encadrer un texte

Comment encadrer un texte en HTML ?

Dans ce tutoriel, nous allons voir comment encadrer un texte en HTML/CSS, avec les options de réglages des colonnes ou avec les composants du thème. 

 
 

L'option Bordé de la colonne

Sur cette colonne, l'option "Bordé" a été mise en place dans les préférences de la colonne : 

Acceder au preferences de la colonne

Encadrer des contenus avec l'option

Selon le thème de votre site, vous pourrez personnaliser la couleur de la bordure depuis Configuration > Apparence.

Ajouter une bordure sur un élément du site en HTML/CSS

Il est également possible de créer des encadrements avec du HTML et du CSS. 

Ce texte est dans un cadre.

Il faut pour faire cela basculer l'éditeur visuel en éditeur HTML et ajouter une class CSS pour le paragraphe ou le bout de texte à encadrer (alors dans une balise span). En CSS, il faut définir 3 caractéristiques pour la bordure : sa taille, son style et sa couleur. Ajoutez également une marge intérieure pour que le texte ne soit pas collé à la bordure. 

Voici le code utilisé en HTML : 

    <span class="encadrer-un-contenu">Ce texte est dans un cadre.</span>

Et voici les styles CSS appliquées à la class encadrer-un-contenu :

    .encadrer-un-contenu{
        border: 1px solid black;
        padding: 5px;
    }

Les règles CSS sont à appliquer dans Configuration > Apparence et en restant en mode simple, dans le formulaire en bas de page Modifier/Ajouter du code CSS au thème (utilisateurs avertis) pour les appliquer sur le thème en cours, ou dans Configuration > Réglages > Zones éditables et dans le formulaire Styles CSS supplémentaires pour conserver les règles CSS même en changeant de thème.

De nombreuses possibilités sont offertes en CSS pour personnaliser les bordures (arrondies, en pointillés, double-trait, etc.).

Utiliser les composants intégrés dans le thème pour ajouter un cadre autour d'un élément

Ajouter un cadre avec EMS-Framework

Ce texte est encadré automatiquement avec les class CSS panel et panel-body
<div class="panel">
<div class="panel-body">Ce texte est encadré automatiquement avec les class CSS <em>panel</em> et <em>panel-body</em></div>
</div>

Vous trouverez sur cette page les différentes possibilités pour créer un encadrement avec un thème EMS-Framework (Smart, Pretty et Blogger) : EMS Framework : Composants (puis Panel).

Ajouter un cadre avec Bootstrap

Avec un thème Bootstrap comme Rebirth, vous pourrez ajouter la class CSS card. Voici un exemple de ce qu'il est possible de faire : 

Ajouter un cadre avec boostrap et la class cardLe code HTML utilisé sur un thème Boostrap pour cette encadrement est : 

    <div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Titre de la carte</h5>
    <p class="card-text">Description de votre choix</p>
    <a href="#" class="btn btn-primary">Bouton d'action</a>
  </div>
</div>

Voici le lien de la page de Bootstrap (en anglais) pour voir toutes les possibilités des class CSS card La class CSS card sur Bootstrap.

Ces tutoriels pourraient également vous intéresser