Soumis par ilefevre le jeu 11/03/2021 - 15:02

Aller plus loin en ajoutant du code source ou des widgets

 

 

Cliquez sur l'une des rubriques pour dérouler le contenu et accéder à l'explication et/ou au code source à intégrer.

 

En utilisant le code source, vous pouvez ajouter des contenus au delà des affichages proposés dans les thèmes.
Vous pouvez copier le code source, puis le coller en ayant précédemment cliqué sur le bouton picto code source  dans votre contenu.
Pour voir le rendu, désélectionnez le bouton picto code source

 

1. Ajouter un menu horizontal dépliable

Présentation menu dépliant horizontale

Attention : lorsqu'un menu est déplié lors de l'enregistrement de la page, il sera affiché déplié pour le visiteur. Pensez donc à bien replier vos menus horizontaux avant d'enregistrer.

<style type="text/css">details>summary {
 
  list-style: none;
}
summary::-webkit-details-marker {
  display: none
}

summary::after {
  content: ' ►';
}
details[open] summary:after {
  content: " ▼";
}
summary{
background:linear-gradient(to bottom right,#cccccc,#ffffff);
margin-bottom:0.8rem;
padding: 8px 15px;
}
summary:hover{
cursor:pointer;
}
details div{
margin-bottom: 1rem;}
</style>
<details open=""><summary title="Cliquer pour découvrir le détail">Titre </summary>
<div>Texte a ajouter</div>
</details>

<details><summary title="Cliquer pour découvrir le détail">Titre </summary>

<div>Texte a ajouter</div>
</details>

<details><summary title="Cliquer pour découvrir le détail">Titre </summary>

<div>Texte a ajouter</div>
</details>

<details><summary title="Cliquer pour découvrir le détail">Titre </summary>

<div>Texte a ajouter</div>
</details>

<details><summary title="Cliquer pour découvrir le détail">Titre </summary>

<div>Texte a ajouter</div>
</details>

<details><summary title="Cliquer pour découvrir le détail">Titre </summary>

<div>Texte a ajouter</div>
</details>

<details><summary title="Cliquer pour découvrir le détail">Titre </summary>

<div>Texte a ajouter</div>
</details>

<details><summary title="Cliquer pour découvrir le détail">Titre </summary>

<div>Texte a ajouter</div>
</details>

<details><summary title="Cliquer pour découvrir le détail">Titre </summary>

<div>Texte a ajouter</div>
</details>

<details><summary title="Cliquer pour découvrir le détail">Titre </summary>

<div>Texte a ajouter</div>
</details>

<details><summary title="Cliquer pour découvrir le détail">Titre </summary>

<div>Texte a ajouter</div>
</details>

<details><summary title="Cliquer pour découvrir le détail">Titre </summary>

<div>Texte a ajouter</div>
</details>

<details><summary title="Cliquer pour découvrir le détail">Titre </summary>

<div>Texte a ajouter</div>
</details>

<details><summary title="Cliquer pour découvrir le détail">Titre </summary>

<div>Texte a ajouter</div>
</details>

<details><summary title="Cliquer pour découvrir le détail">Titre </summary>

<div>Texte a ajouter</div>
</details>

<details><summary title="Cliquer pour découvrir le détail">Titre </summary>

<div>Texte a ajouter</div>
</details>

 

Si vous êtes à l'aise, un minimum, avec le code source, vous trouverez ci-après un tutoriel pour modifier la couleur de fond des menus horizontaux : tutoriel.

2. Créer une liste de fichiers avec le logo en début de ligne

Présentation liste PDF

Vous pouvez copier coller le bloc pour avoir deux listes sur la même page.

Pour chaque ligne vous pouvez créer un lien sur le texte.

<style type="text/css">.cmonsite_widget {
  max-width:48%;
  min-width:15rem;
  margin-right:3%;
  padding:1em 1.5em;
  border:1px solid #000000;
  border-radius:0 0 4px 4px;
  background:#eeeeee;
  margin-bottom:1.5em;
}

.cmonsite_widget__title {
  font-size:18px;
  text-align:center;
  //text-transform:uppercase;
  position:relative;
  color:#000000;
  }
.cmonsite_widget__title:after,
.cmonsite_widget__title:before {
    content: "";
    display:block;
    width:10%;
    height:2px;
    background:#000000;
    position:absolute;
    top:50%;
  }
 
.cmonsite_widget__title:after {
    right: 0;
  }

.cmonsite_file-list li {
    padding-top:.5em;
padding-right:.5em;
  }
.cmonsite_file-list a {
    color: #000000;
    text-decoration:none;
  }
 
.cmonsite_file-list{   
list-style-type: none;   
padding: 0;   
margin: 0; }   
.list-bare li {   
background-image: url('https://docs.ternum-bfc.fr/sites/default/files/picto-pdf.png');
background-repeat: no-repeat;
background-position: 1em 0.4em;
padding-left: 3em;
}
.cmonsiteflex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: left;
  flex-flow: row wrap;
  align-items: stretch;
  align-content: stretch;
  padding: 15px 50px;
  margin: 0;
  width:100%;

}
</style>
<p> </p>

<div class="cmonsiteflex">
<section class="cmonsite_widget">
<h3 class="cmonsite_widget__title">Liste de vos fichiers</h3>

<div class="cmonsite_widget__body">
<ul class="list-bare cmonsite_file-list">
    <li>Compte rendu du xxxx</li>
    <li>Compte rendu du yyyy</li>
    <li>Compte rendu du zzzz</li>
</ul>
</div>
</section>
</div>

 

Ajouter un bloc supplémentaire sous le premier

<div class="cmonsiteflex">
<section class="cmonsite_widget">
<h3 class="cmonsite_widget__title">Liste de vos fichiers</h3>

<div class="cmonsite_widget__body">
<ul class="list-bare cmonsite_file-list">
    <li>Compte rendu du xxxx</li>
    <li>Compte rendu du yyyy</li>
    <li>Compte rendu du zzzz</li>
</ul>
</div>
</section>
</div>

3. Ajouter des liens sur des images avec des effets au survol

Présentation images en ligne

Vous pouvez ajouter des liens aux images et elles seront adaptatives (responsive) quel que soit l'écran utilisé.

Ici les images font 160 pixels de large. Vous pouvez adapter en modifiant la valeur a la ligne 16 : width: 160px;

Chaque image doit avoir le style liste à puces Picto liste à puces puis il suffit d'ajouter un lien sur l'image

<style type="text/css">.flex{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: left;
  flex-flow: row wrap;
  align-items: stretch;
  align-content: stretch;
  padding: 15px 50px;
  margin: 0;
}
.flex li{
  width: 160px;
  height: auto;
  margin-bottom: 15px;
  margin-right: 10px;
  border:1px solid #effffe;
  list-style-type: none;
  }
li img:hover {
  border-radius: 20px;   
  transform: scale(1.1); -webkit-transform: scale(1.1);
  transition:transform .4s ease;
}
</style>
<div>
<ul class="flex">
    <li>
    <p><a href="https://docs.ternum-bfc.fr/cmonsite"><img alt="" data-entity-type="file" data-entity-uuid="be41a198-4f79-4751-81fe-ea7b8a1018ed" height="161" src="/sites/0000003372/files/Mes%20documents/Vertmenton/20200921-1534--actualites.png" width="160" /></a></p>
    </li>
    <li>
    <p><a href="https://www.sicemont.fr"><img alt="" data-entity-type="file" data-entity-uuid="ab463071-d01a-41b6-adec-281fd084da40" height="330" src="/sites/0000003372/files/Mes%20documents/accouchement.jpg" width="500" /></a></p>
    </li>
    <li>
    <p><a href="https://docs.ternum-bfc.fr"><img alt="" data-entity-type="file" data-entity-uuid="396ebdef-ea31-4e01-bd3f-3cca584b9534" height="162" src="/sites/0000003372/files/Mes%20documents/Vertmenton/20201006-1625--Boutons_carres-A-a-C-bouton-carres-conseil-municipal-mairie.png" width="160" /></a></p>
    </li>
    <li>
    <p><a href="https://docs.ternum-bfc.fr/cmonsite"><img alt="" data-entity-type="file" data-entity-uuid="a029e95e-c54f-44bf-84f3-dbe07b773672" height="159" src="/sites/0000003372/files/Mes%20documents/Vertmenton/20201006-1630--Boutons_carres-A-a-C-bouton-carres-budgets-mairie.png" width="160" /></a></p>
    </li>
    <li>
    <p><a href="https://docs.ternum-bfc.fr/cmonsite"><img alt="" data-entity-type="file" data-entity-uuid="eb99dc4e-9765-452d-8a6c-6fb077ad7712" height="161" src="/sites/0000003372/files/Mes%20documents/Vertmenton/20201009-0959--Boutons_carres-O-a-R-bouton-carres-permanences-png..png" width="160" /></a></p>
    </li>
    <li>
    <p><a href="https://docs.ternum-bfc.fr/cmonsite"><img alt="" data-entity-type="file" data-entity-uuid="a14c54d5-31d5-4cc2-b2c4-9ab99ed260a7" height="195" src="/sites/0000003372/files/Mes%20documents/Vertmenton/logo-plan-vermenton_s.jpeg" width="160" /></a></p>
    </li>
    <li><img alt="" data-entity-type="file" data-entity-uuid="a029e95e-c54f-44bf-84f3-dbe07b773672" height="159" src="/sites/0000003372/files/Mes%20documents/Vertmenton/20201006-1630--Boutons_carres-A-a-C-bouton-carres-budgets-mairie.png" width="160" /></li>
    <li><img alt="" data-entity-type="file" data-entity-uuid="396ebdef-ea31-4e01-bd3f-3cca584b9534" height="162" src="/sites/0000003372/files/Mes%20documents/Vertmenton/20201006-1625--Boutons_carres-A-a-C-bouton-carres-conseil-municipal-mairie.png" width="160" /></li>
    <li>
    <p><a href="https://docs.ternum-bfc.fr/cmonsite"><img alt="" data-entity-type="file" data-entity-uuid="410f40f6-1cd8-46f9-bb26-65d7b472d908" height="83" src="/sites/0000003372/files/Mes%20documents/Vertmenton/logo_mappy_s.jpg" width="160" /></a></p>
    </li>
    <li>
    <p><a href="https://docs.ternum-bfc.fr/cmonsite"><img alt="" data-entity-type="file" data-entity-uuid="be41a198-4f79-4751-81fe-ea7b8a1018ed" height="161" src="/sites/0000003372/files/Mes%20documents/Vertmenton/20200921-1534--actualites.png" width="160" /></a></p>
    </li>
    <li>
    <p><a href="https://docs.ternum-bfc.fr/cmonsite"><img alt="" data-entity-type="file" data-entity-uuid="396ebdef-ea31-4e01-bd3f-3cca584b9534" height="162" src="/sites/0000003372/files/Mes%20documents/Vertmenton/20201006-1625--Boutons_carres-A-a-C-bouton-carres-conseil-municipal-mairie.png" width="160" /></a></p>
    </li>
    <li>
    <p><a href="https://docs.ternum-bfc.fr/cmonsite"><img alt="" data-entity-type="file" data-entity-uuid="eb99dc4e-9765-452d-8a6c-6fb077ad7712" height="161" src="/sites/0000003372/files/Mes%20documents/Vertmenton/20201009-0959--Boutons_carres-O-a-R-bouton-carres-permanences-png..png" width="160" /></a></p>
    </li>
</ul>


</div>
4. Météo

Présentation météo

Rendez-vous sur https://meteofrance.com/widgets Choisissez votre ville et votre couleur. Récupérez le code proposé par Météo France

exemple : <iframe id="widget_autocomplete_preview" width="150" height="300" frameborder="0" src="https://meteofrance.com/widget/prevision/211710"> </iframe>

Pour que votre météo s'adapte automatiquement aux différentes tailles d'écrans, remplacer la valeur "width" par 100% : width="100%" et supprimez la valeur "height"

5. Liste des élus

Présentation liste élus

Pour centrer vos images dans les encadrés : double-cliquer sur une image, puis dans les paramètres "aligner" choisissez "centre".

Vous avez besoin de recadrer, redimensionner vos images pour qu'elles soient toutes identiques ? Voici la démarche avec l'outil gratuit en ligne Photopea

 

Code à insérer (11 élus) :

<link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" rel="stylesheet" />
<style type="text/css">#team h5{ color: #4655A4; }
.card{ border-radius: 4px;
transition: all 0.3s ease-in;
 -webkit-transition: all 0.3s ease-in;
 -moz-transition: all 0.3s ease-in; margin-bottom: 35px; }
.card:hover{ background: #4655A4; color: #fff; border-radius: 18px; border:none; }
 .card:hover h3{ color: #fff; }
 .card:hover h5{ color: #fff; }
</style>
<div class="container text-center">
<div class="row imgpos">
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" data-entity-type="file" data-entity-uuid="e462ace5-c3ff-4780-ba81-9267cf838664" height="250" src="/sites/0000003470/files/Mes%20documents/Trombinoscope/portrait-homme-1.jpg" style="margin-left: auto; border-radius:150px;" width="200" />
<h3>Monsieur X</h3>

<h5>Maire</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" data-entity-type="file" data-entity-uuid="aaa3065f-3e89-4b21-830d-3fb4e63324e2" height="250" src="/sites/0000003470/files/Mes%20documents/Trombinoscope/portrait-femme-1.jpg" style="margin-left: auto; border-radius:150px;" width="200" />
<h3>Madame Y</h3>

<h5>1er Adjointe</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" data-entity-type="file" data-entity-uuid="bc7a0b61-5319-4165-9539-d4c8273a5f3e" height="250" src="/sites/0000003470/files/Mes%20documents/Trombinoscope/portrait-homme2.jpg" style="margin-left: auto; border-radius:150px;" width="200" />
<h3>Monsieur Z</h3>

<h5>Délégué l'urbanisme</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" style="margin-left: auto; border-radius:150px;" />
<h3>Madame Y</h3>

<h5>Maire</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" style="margin-left: auto; border-radius:150px;" />
<h3>Monsieur X</h3>

<h5>1er Adjoint</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" style="margin-left: auto; border-radius:150px;" />
<h3>Madame Y</h3>

<h5>Délégué l'urbanisme</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" style="margin-left: auto; border-radius:150px;" />
<h3>Madame Y</h3>

<h5>Maire</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" style="margin-left: auto; border-radius:150px;" />
<h3>Monsieur X</h3>

<h5>1er Adjoint</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" style="margin-left: auto; border-radius:150px;" />
<h3>Madame Y</h3>

<h5>Délégué l'urbanisme</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" style="margin-left: auto; border-radius:150px;" />
<h3>Madame Y</h3>

<h5>Maire</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" style="margin-left: auto; border-radius:150px;" />
<h3>Monsieur X</h3>

<h5>Maire</h5>
</div>
</div>
</div>
</div>
</div>

 

Code à insérer (30 élus) :

<link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" rel="stylesheet" />
<style type="text/css">#team h5{

    color: #4655A4;

}

.card{

    border-radius: 4px;

    transition: all 0.3s ease-in;

    -webkit-transition: all 0.3s ease-in;

    -moz-transition: all 0.3s ease-in;

    margin-bottom: 35px;

}

.card:hover{

    background: #4655A4;

    color: #fff;

    border-radius: 5px;

    border:none;

}

.card:hover h3{

    color: #fff;

}

.card:hover h5{

    color: #fff;

}
</style>
<div class="container text-center">
<div class="row imgpos">
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Madame Y</h3>

<h5>Maire</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Monsieur X</h3>

<h5>1er Adjoint</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Madame Y</h3>

<h5>Délégué l'urbanisme</h5>
</div>
</div>
</div>


<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Madame Y</h3>

<h5>Maire</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Monsieur X</h3>

<h5>1er Adjoint</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Madame Y</h3>

<h5>Délégué l'urbanisme</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Madame Y</h3>

<h5>Maire</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Monsieur X</h3>

<h5>1er Adjoint</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Madame Y</h3>

<h5>Délégué l'urbanisme</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Madame Y</h3>

<h5>Maire</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Monsieur X</h3>

<h5>1er Adjoint</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Madame Y</h3>

<h5>Délégué l'urbanisme</h5>
</div>
</div>
</div>


<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Madame Y</h3>

<h5>Maire</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Monsieur X</h3>

<h5>1er Adjoint</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Madame Y</h3>

<h5>Délégué l'urbanisme</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Madame Y</h3>

<h5>Maire</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Monsieur X</h3>

<h5>1er Adjoint</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Madame Y</h3>

<h5>Délégué l'urbanisme</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Madame Y</h3>

<h5>Maire</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Monsieur X</h3>

<h5>1er Adjoint</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Madame Y</h3>

<h5>Délégué l'urbanisme</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Madame Y</h3>

<h5>Maire</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Monsieur X</h3>

<h5>1er Adjoint</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Madame Y</h3>

<h5>Délégué l'urbanisme</h5>
</div>
</div>
</div>


<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Madame Y</h3>

<h5>Maire</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Monsieur X</h3>

<h5>1er Adjoint</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Madame Y</h3>

<h5>Délégué l'urbanisme</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Madame Y</h3>

<h5>Maire</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Monsieur X</h3>

<h5>1er Adjoint</h5>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body"><img alt="" src="http://placehold.it/200x250" />
<h3>Madame Y</h3>

<h5>Délégué l'urbanisme</h5>
</div>
</div>
</div>

</div>
</div>

 

6. Ajouter un flux rss

 présentation flux JSL

Pour ajouter le flux RSS du journal local, il vous faudra demander le lien du flux auprès du journal ou le récupérer directement sur leur site web.
Cliquer ici pour afficher le tutoriel pour intégrer le flux d'un journal

7. Ajouter le flux d'une page facebook

présentation flux facebook

Vous pouvez ajouter le journal de votre page Facebook dans Cmonsite, notamment dans un des contenus libre de votre page d'accueil. Cliquer ici pour afficher le tutoriel pour intégrer le journal de votre page Facebook sur CmonSite.

Attention : le fait d'intégrer des sites externes (comme votre journal facebook) peut embarquer des cookies. Penez contact avec votre fournisseur pour pouvoir indiquer à vos utilisateurs quels sont les cookies ajoutés.

8. Aligner 3 images avec légende de façon responsive

présentation de bloc de 3 images alignées avec une légende

Vous avez le choix entre 3 images alignées et centrées avec une seule légende ou 3 images alignées et centrées avec une légende par image.

Vous pouvez supprimer une image pour n'en avoir que deux, si besoin.

Pour information, les images ici ont une taille de 183 x 122 pixels.

ETAPE 1 :

Copiez tout d'abord la première partie du code qui sert à donner un style défini aux images :

<style type="text/css">/*----------- Style pour les Flex box--------------*/
.flex{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
  justify-content: center;
  flex-flow: row wrap;
  align-items: stretch;
  align-content: stretch;
  padding: 0;
  margin: 0;}

.flex li{
  list-style-type: none;
margin:0;
  }
.alignement p {
text-align: center;
margin: 0;
padding: 0;
}
.alignement figure figcaption{
text-align: center;
margin:0;
padding:0;
}

/*----------- FIN Style pour les Flex box--------------*/</style>

Dans votre contenu, cliquez sur l'icône "source" puis collez votre code.

Ce code n'est à coller qu'une seule fois dans un contenu, que vous insériez un seul bloc de 3 images ou que vous insériez plusieurs blocs de 3 images dans votre contenu.

 

ETAPE 2A :

Ensuite, copiez le code ci-après si vous souhaitez 3 images avec une seule légende pour les trois (en étant resté dans "source").

Vous pouvez copier plusieurs fois le code pour avoir plusieurs bloc de trois images identiques (pensez simplement à sauter une ligne entre chaque copie).

<div class="alignement">
<ul class="flex">
    <li><code><code><img alt="" src="https://picsum.photos/id/1018/183/122" /></code></code></li>
    <li><code><code><img alt="" src="https://picsum.photos/id/1016/183/122" /></code></code></li>
    <li><code><code><img alt="" src="https://picsum.photos/id/1015/183/122" /></code></code></li>
</ul>

<p><code>Une palette de couleurs intenses habille les paysages</code></p>
</div>

 

ETAPE 2B :

Si non, copiez le code ci-après si vous souhaitez 3 images avec une légende en dessous de chaque image (en étant resté dans "source").

Vous pouvez copier plusieurs fois le code pour avoir plusieurs bloc de trois images identiques (pensez simplement à sauter une ligne entre chaque copie).

<div class="alignement">
<ul class="flex">
    <li>
    <figure><img alt="" src="https://picsum.photos/id/1018/183/122" />

    <figcaption>Andrew Ridley</figcaption>
    </figure>
    </li>
    <li>
    <figure><img alt="" src="https://picsum.photos/id/1016/183/122" />
    <figcaption>Philippe Wuyts</figcaption>
    </figure>
    </li>
    <li>
    <figure><img alt="" src="https://picsum.photos/id/1015/183/122" />
    <figcaption>Alexey Topolyanskiy</figcaption>
    </figure>
    </li>
</ul>
</div>

 

Cliquez à nouveau sur "source" pour revenir à l'éditeur de base. Vous pourrez ainsi modifier les images et le texte facilement.

Vous pouvez ajouter plus de photographies si besoin, en sélectionnant la photographie ajoutée et en cliquant sur "liste à puces".

9. Aligner une image, un texte, une image

aligner une image, un texte et une image

Pour information, les images ici ont une taille de 400 x 266 pixels et le texte contient 70 mots.

 

ETAPE 1 :

Copiez tout d'abord la première partie du code qui sert à donner un style défini aux images :

<style type="text/css">/*----------- Style pour les Flex box--------------*/
.flex{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
  justify-content: center;
  flex-flow: row wrap;
  align-items: stretch;
  align-content: stretch;
  padding: 0;
  margin: 0;}

.flex li{
  list-style-type: none;
margin:0;
flex-grow: 1;
flex-basis: 25%;
  }
.flex li p {
padding: 1rem;
}

@media screen and (max-width: 1280px)
{
.flex{
-webkit-flex-flow: column wrap;
  flex-flow: column wrap;
align-items:center;
  align-content: center;
}
.flex li{
width : 350px;
height: auto;
  }
}
/*----------- FIN Style pour les Flex box--------------*/
</style>

Dans votre contenu, cliquez sur l'icône "source" puis collez votre code.

Ce code n'est à coller qu'une seule fois dans un contenu, que vous insériez un seul bloc "une image, le texte et une image" ou que vous insériez plusieurs blocs de ce type dans votre contenu.

 

ETAPE 2 :

Ensuite, copiez le code ci-après pour obtenir un bloc "une image, un texte, une image" (en étant resté dans "source").

Vous pouvez copier plusieurs fois le code pour avoir plusieurs bloc "une image, le texte et une image" (pensez simplement à sauter une ligne entre chaque copie).

<div class="alignement">
<ul class="flex">
    <li><img alt="" src="https://picsum.photos/id/1018/400/266" /></li>
    <li>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur dignissim velit, eget imperdiet augue ullamcorper eget. Cras tincidunt sem ut consequat auctor. Maecenas feugiat neque vel metus viverra consectetur. Vivamus vitae lectus egestas, lacinia purus a, semper lorem. Morbi tempus odio nec nunc bibendum, posuere faucibus erat imperdiet. Etiam mattis malesuada imperdiet. Donec vel mollis lorem. In nunc quam, tincidunt nec luctus vel, sodales nec dui lorem ipsum sit.</p>
    </li>
    <li><img alt="" src="https://picsum.photos/id/1015/400/266" /></li>
</ul>
</div>

 

Cliquez à nouveau sur "source" pour revenir à l'éditeur de base. Vous pourrez ainsi modifier les images et le texte facilement.

10. Intéger une vidéo

video intégrée à CmonSite

Tout d'abord, pour intégrer une vidéo, il vous faudra la déposer sur une plateforme spécialisée de vidéos tels que Viméo, YouTube, Dailymotion, etc.

Vous pouvez visualiser le pas à pas dans la vidéo ci-après :

Si la vidéo ne s'affichait pas correctement, vous pouvez la visionner directement sur Vimeo : https://player.vimeo.com/video/538591065#t=10m37s

 

De plus, pour que votre vidéo s'affiche de manière responsive (qu'elle s'adapte à toutes les tailles d'écran, du mobile à l'écran d'ordinateur), pensez à modifier la largeur dans le code source par : width="100%". Laissez la hauteur telle quelle.

 

Capture écran du code source modifié avec width="100%"

 

 

 

Retour au sommaire