Aller au contenu
Support de Zwii

ericemer

Membres
  • Compteur de contenus

    98
  • Inscription

  • Dernière visite

Réputation sur la communauté

41 Excellent

À propos de ericemer

  • Rang
    Amateur

Visiteurs récents du profil

Le bloc de visiteurs récents est désactivé et il n’est pas visible pour les autres utilisateurs.

  1. Et pour ceux que cela interresse, le css, sans 2 ou 3 choses comme la gestion des icones avec une fonte (pour ceux que ca interresse, aller voir le site fontastic.me) et quelques class perso pour la mise en forme des contenus. Je ne commente pas ... @charset "UTF-8"; span.ico-telephone { min-width: 10em; } section { counter-reset: conter; } section a.imgallerie, section a.galleryGalleryPicture { position: relative; } section a.imgallerie::after, section a.galleryGalleryPicture::after { counter-increment: conter; /* On incrémente le compteur section */ content: counter(conter) " / "; position: absolute; color: white; background-color: #282828; padding: 0.5em; top: 0; left: 0; font-size: 0.8em; } .imgallerie { display: block; border: 1px solid #DDD; height: 150px; background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; transition: opacity 0.3s ease-out; } .imgallerie:hover { opacity: 0.7; } aside.gallerie { clear: both; padding-top: 1em; } aside.gallerie > div { display: grid; grid-gap: 1em; grid-template-columns: repeat(5, 1fr); } .col6 aside.gallerie > div { grid-template-columns: repeat(2, 1fr); } body { margin: 0; } body header { margin: 0; } header { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEUlEQVQImWNgYGD4z4AE/gMADwMB/414xEUAAAAASUVORK5CYII=) repeat, url("../site/file/source/slider/bandeau-generique.jpg") center center/cover no-repeat; } h2 { color: #e36c0e; } a.ico-telephone { text-decoration: none; } body nav { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 200px 1fr; align-items: end; } body nav #menu { justify-self: end; margin-right: 0; margin-bottom: 1em; } body nav #menu li:last-child a { background-color: #e36c0e; transition: all 0.3s; } body nav #menu li:last-child a:hover { color: #282828; } body nav li ul { padding-left: 0; width: 220px; right: 0; } #logo { width: 200px; height: 100px; max-height: 100%; background: url(../site/file/source/logo.png) left center/contain no-repeat; transition: scale 1s ease-in-out 0s; } #logo:hover { -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } #logo a { width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0) !important; } #logo span { visibility: hidden; width: 100%; height: 100%; } #site { position: relative; z-index: 1; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQImWNgYGBg+P///38IwcDAAABHygf5wwFByQAAAABJRU5ErkJggg==) repeat, linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, white 250px) repeat; } section { min-height: 250px; } section > *:first-child { margin-top: 0; } footer p, footer h4, footer h3, footer h2 { margin: 0 0 0.5em; } footer h2 { color: #e36c0e; font-size: 1.4em; } #footersite { display: grid; grid-template-columns: 1fr 1fr 1fr; } /*#region*/ body:not(#tinymce) #swiper::after { content: ""; display: block; height: 100%; width: 100%; z-index: 1; position: absolute; top: 0; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEUlEQVQImWNgYGD4z4AE/gMADwMB/414xEUAAAAASUVORK5CYII=) repeat; } .swipper-slide { height: 100%; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { color: white; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); left: 10px; right: auto; } /*#endregion*/ .vignette { position: relative; cursor: pointer; } .vignette:hover:after { content: ""; width: 150px; height: 120px; background-image: var(--background); background-size: contain; position: absolute; top: -120px; left: 0; } @media (min-width: 960px) { header { margin: 0; position: absolute; width: 100%; max-width: 100%; overflow: hidden; height: 60vh; } header::after { content: ""; display: block; position: absolute; bottom: 0; z-index: 1; background-image: linear-gradient(to top, #282828 0%, rgba(40, 40, 40, 0) 100%); height: 250px; width: 100%; } #spaceur { height: calc(60vh - 250px); background-color: rgba(236, 236, 236, 0.31); min-height: 100px; } #swiper { width: 100%; height: 60vh; } } @media (max-width: 500px) { aside.gallerie > div { grid-template-columns: repeat(1, 1fr); } .col6 aside.gallerie > div { grid-template-columns: repeat(1, 1fr); } } @media (max-width: 575px) { #footersite { display: block; } #footersite > * { margin-bottom: 1em; } } @media (max-width: 700px) { aside.gallerie > div { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { #logo { height: 100px; } } @media (max-width: 900px) { aside.gallerie > div { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 959px) { body nav { padding-left: 20px; } }
  2. Bonjour, voici le jquery que j'utilise sur ce site pour ajuster les différents éléments selon les besoins du moment. Aujourd'hui, je pense que je ferais différement avec du css (display: grid et grid-template-areas). $( document ).ready(function() { $('#barUpdate).remove(); // pour éviter des mises à jour qui mettraient le bazar. $('<div id="logo"><a href="/"><span>Menuiserie Mequin</span></a></div>').prependTo("nav" ) // je déplace mon logo avant mon menu. Le logo est géré en css. Le "span" généré est masqué avec du css (mais lisible par Google) $( "#swiper" ).prependTo("header" ).parent().addClass("diapos"); // je déplace le swipper dans le header et ajoute une class diapo au header... je ne sais plus pourquoi la class. $(".container").remove(); // je supprime du dom un bloc qui me sert pas. $('#footerDisplayCopyright').html('<a href="/mentions-legales">Mentions légales</a>'); // j'ajoute un lien... inutile aujourd'hui. $('#footerDisplayCopyright').append('<br /><a href="https://www.emery-com.com" target="_blank">Emery Communication</a>'); // J'ajoute ma signature. $('#site').before('<aside id="spaceur"class="container"> </aside>'); //J'ajoute un bloc 'espaceur' on peut faire autrement évidement $('#footersite > div').removeClass(); // supression des class ... je ne sais plus lesquelles $('section > p:first-child').remove(); // je supprime le paragraphe premier enfant de section //initialize swiper when document ready, déjà commenter plus haut var mySwiper = new Swiper ('#swiper', { // Optional parameters // direction: 'vertical', loop: true, autoplay: 4000, speed: 1500, spaceBetween: 10, prevButton: '.swiper-button-prev', nextButton: '.swiper-button-next', keyboardControl: true, mousewheelControl: true, roundLengths: true, effect: 'fade', }); });
  3. @vinzze je découvre ta demande (ça fait un moment que je ne suis pas venu sur le forum). Est-elle toujours d'actualité ? si oui, je vais me replonger dans ce que j'avais fait à l'époque et te fournir les infos.
  4. @Fred Bonjour, et de nouveau merci pour l'énorme travail fourni. Penses-tu qu'anonimiser l'ip du tag google analytics ne serait pas une bonne chose ? de ce que j'ai compris, les 4 derniers chiffres de l'ip enregistré sont "masqué" en utilisant le paramètre ci-joint. window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag("js", new Date()); gtag("config","UA-XXXXXXX", { "anonymize_ip": true });
  5. @vinzze salut, en effet j'utilise Zwipper. Voici le réglage que j'utilise : var mySwiper = new Swiper ('#swiper', { // Optional parameters // direction: 'vertical', loop: true, autoplay: 4000, speed: 1500, spaceBetween: 10, prevButton: '.swiper-button-prev', nextButton: '.swiper-button-next', keyboardControl: true, mousewheelControl: true, roundLengths: true, effect: 'fade', }); Donc pour la transition, c'est le paramètre "effect" qu'il faut adapté.
  6. Merci Augras pour le retour sur l'erreur et aux autres également pour les commentaires.
  7. Merci énormément. J'imagine que c'est trop tard mais voici pour https #### HTPPS RewriteCond %{SERVER_PORT} 80 RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] ########## End
  8. Bonjour à tous. Mon retour après une longue abscence ... Voici un site réalisé avec Zwii, avec une version que je connais bien (9. xxx), et qui me permet des adaptations à ma pogne. https://www.seminaire-saint-malo.com/ Réalisé pour une amie avec une optique "référencement" : il y a encore des éléments à optimiser — meta title, meta description, alt des images, la titraille, etc ... Content de vous relire. Je vais me pencher sur la version 10 ... PS : il est vraiment top et facile d'accès ce ZWII
  9. @mulanee bonjour, roger à raison sur les modifications proposées. Pour ma part, je me passerai de l'usage de tableau. Pour ta composition, tu n'en as vraiment pas besoin. Les tableaux ,pour cette usage, ont été abandonnés il ya quelques décennies. On préfère utiliser des balise "div, aside, p, span, etc." dans ton cas, tu vas te faciliter la vie.
  10. @saywhat49 @SandraDL exactement Bonjour, en effet la meta keywords est désormais inutile pour le référencement (Google) : trop d'abus certainement. Les balises "title" et les meta "description" sont importantes et particulièrement prisent en compte par Google. D'ailleurs, Ceux sont 2 balises qui apparraissent directement dans les résultats de recherche. Je m'apperçois que ce post date ...
  11. @Fred Je suis d'accord pour l'utilisateur lambda. Mais quand tu gères tes images avec bridge, lightroom ou photoshop, de façon automatique, tu dupliques l'image de ton choix et la renomme. Dans mon cas, plus rapide, pas besoin de renseigner dans l'administration.
  12. Merci beaucoup Pour réaliser un peu la même chose, j’avais customisé le module "Gallery". Ta solution semble bien meilleure (même si je ne l'ai pas encore testé).
  13. @Fred Merci pour l’info. Je me suis aperçu avoir omis de mettre une modification. J’ai donc modifié le premier post. Personnellement, je préfère la solution avec un fichier « couverture.jpeg » à insérer dans le dossier ciblé.
  14. Reste encore à améliorer mais déjà : selection au clic et affichage au survol (moyen) Ajouter à la fin module/gallery/view/edit/edit.js.php Je suis pas un champion du jquery/javascript : $(this).text() ne semble pas fonctionner ... var CoverList = $("td.col4"); // ajout de la class vignette et definition de l'url de l'image mais $(this).text() ne fonctionne pas CoverList.addClass("vignette").attr("style", "--background: url('" + directoryOldDOM.val() + "/" + $(this).text() + "')"); CoverList.click(function(){ //selection de l'image dans le formulaire LORSQU'ON CLICK $("#galleryCoverPicture").val($(this).text()); // definition de l'url de l'image mais $(this).text() ici fonctionne ... $(this).attr("style", "--background: url('/" + directoryOldDOM.val() + "/" + $(this).text() + "')"); }); et dans votre fichier custom.css .vignette { position: relative; cursor: pointer } .vignette:hover:after { content: ""; width: 150px; height: 120px; background-image: var(--background); background-size: contain; position: absolute; top: -120px; left: 0 }
  15. Le système est sympa. Bravo. Petit soucis template 1/2 1/2 - info copyright à droite/justification droite : le texte est collé à droite (pas de marge ou padding) edit : en fait, "le footersiteRight" n'a pas de padding ("footersiteLeft" a un padding de 10px)
×
×
  • Créer...