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 
dans votre contenu.
Pour voir le rendu, désélectionnez le bouton
Créer des blocs de texte qui s'adaptent et se positionnent en fonction de la largeur de l'écran
<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; }
</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">Texte à ajouter</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body">Texte à ajouter</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body">Texte à ajouter</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body">Texte à ajouter</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body">Texte à ajouter</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body">Texte à ajouter</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body">Texte à ajouter</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body">Texte à ajouter</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-body">Texte à ajouter</div>
</div>
</div>
</div>
</div>
Ajouter un menu horizontal dépliable
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.
Créer une liste de fichiers avec le logo en début de ligne
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>
Vous pourrez trouver en suivant ce lien, deux autres possibilités de style et de présentations (blocs, carrousel, liste déroulante).
Il est important de suivre étape par étape et de compléter tous les champs. Le code généré sera à copier dans le code source de votre contenu sur CmonSite (bouton "source" dans l'éditeur de texte du contenu)
Ajouter des liens sur des images avec des effets au survol
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 
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>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" title="Météo" 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"
Liste des é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>
Ajouter un flux rss
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
Ajouter le flux d'une page 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.
Aligner 3 images avec légende de façon responsive
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; } .alignement img{ min-width: 64px;padding: 0 10px 0 10px !important;margin-bottom: 0 !important; } /*----------- 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><img alt="" src="https://picsum.photos/id/1018/183/122" /></li>
<li><img alt="" src="https://picsum.photos/id/1016/183/122" /></li>
<li><img alt="" src="https://picsum.photos/id/1015/183/122" /></li>
</ul>
<p>Une palette de couleurs intenses habille les paysages</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>
ETAPE 3 :
Cliquez à nouveau sur "source" pour revenir à l'éditeur de base. Vous pourrez ainsi modifier les images et le texte facilement.
Pour modifier une image : sélectionner là en cliquant dessus. Puis cliquez sur l'icône d'insertion d'une image pour accéder à votre médiathèque. Rechercher l'image souhaitée et sélectionnez-la. Celle-ci remplacera automatiquement l'image précédente. Vous pouvez l'ajuster manuelle si besoin, avec la poignée noire en bas à droite de l'image.
Aligner 4 images avec légende de façon responsive
Vous trouverez ci-arpès un code source qui vous permet d'intégrer 4 images alignées et centrées avec un texte en dessous.
Vous pouvez supprimer une image pour n'en avoir que trois ou deux, si besoin.
Pour information, les images ici ont une taille de 183 x 122 pixels. Vous pouvez aller jusqu'à 300 pixels de large (au-delà, les images ne seront plus les unes à côtés des autres).
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: center;
align-content: stretch;
padding: 0;
margin: 0;}
.flex li{
list-style-type: none;
margin:0; }
.alignement p {
text-align: center;
margin: 0;
padding: 0;}
/*----------- FIN Style pour les Flex box--------------*/
</style>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 2 :
Ensuite, copiez le code ci-après (en restant dans "source").
<div class="alignement">
<ul class="flex">
<li><img alt="" src="https://picsum.photos/id/1018/183/122" /></li>
<li><img alt="" src="https://picsum.photos/id/1016/183/122" /></li>
<li><img alt="" src="https://picsum.photos/id/1015/183/122" /></li>
<li><img alt="" src="https://picsum.photos/id/1018/183/122" /></li>
</ul>
<p>Une palette de couleurs intenses habille les paysages</p>
</div>Vous pouvez copier plusieurs fois le code de l'étape 2, pour avoir plusieurs blocs de 4 images identiques (pensez simplement à sauter une ligne entre chaque copie).
ETAPE 3 :
Cliquez à nouveau sur "source" pour revenir à l'éditeur de base. Vous pourrez ainsi modifier les images et le texte facilement.
Pour modifier une image : sélectionner là en cliquant dessus. Puis cliquez sur l'icône d'insertion d'une image pour accéder à votre médiathèque. Rechercher l'image souhaitée et sélectionnez-la. Celle-ci remplacera automatiquement l'image précédente. Vous pouvez l'ajuster manuelle si besoin, avec la poignée noire en bas à droite de l'image.
Aligner une image, un texte, 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.
Intéger une vidéo
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.
