Aller au contenu
Support de Zwii
ericemer

Premier site réaliser avec Zwii

Messages recommandés

Salut !

Très beau site, je pense m'en inspirer très fortement pour une commande d'une amie !

Comment as-tu réalisé le dégradé d'image en fond ?

A bientôt

Partager ce message


Lien à poster
Partager sur d’autres sites

salut @dji

le dégradé est réaliser en utilisant la pseudo class "::after"

pour expliquer simplement (enfin j'espère) : ::after permet d'ajouter du contenu dans la balise concernée.

ainsi dans mon cas, ça donne :

header::after {
    content: ""; // idiot mais obligatoire : en fait j'ajoute rien
    display: block; // comportement block (comme une div)
    position: absolute; //positionnement absolu sous reserve que header soit en positionnement relatif ou absolu
    bottom: 0; // je positionne en pied de block
    z-index: 1; // je le positionne devant dans mon cas (empilage des calques)
    background-image: linear-gradient(to top, rgb(40, 40, 40) 0%, rgba(40,40,40,0) 100%); // un dégradé du bas vers le haut de ma couleur du plein vers le transparent
    height: 250px; // la hauteur de mon dégradé
    width: 100%; // la largeur doit être précisée avec un positionnement absolu ... encore un truc idiot
}

 

  • J'aime 1
  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites

J'aime bien la Menuiserie Roger !

C'est vraiment chiadé, et ça fait un peu mentir le slogan de Zwiicms :

"Un CMS pour créer et gérer facilement son site web sans aucune connaissance en programmation."

Car on voit bien qu'il y a du boulot pro en design !

  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites

Il est superbe…. mais comment as-tu fais pour avoir le menu en haut du site??? J'ai beau essayer je n'y arrive pas!!

Partager ce message


Lien à poster
Partager sur d’autres sites

@schoune

bonjour et merci.

dans les fonctions de personnalisation de thème :

  • pour la bannière, position au dessus du site.
  • pour le menu, position avant la bannière.

Ensuite, dans mon cas, j'ai ajouté (avec jquery) une boite "#spaceur" avant #site pour générer un espace minimun car j'ai positionné le header en "position: absolute".

 

la dimension verticale (height) de aside#spaceur est calculée avec des unité vh (viewport height) et une dimension minimale est renseignée (min-height: 100px;)

Partager ce message


Lien à poster
Partager sur d’autres sites

@schoune

Si.

Je l'intègre dans ma page comme tout a chacun. Puis, je le déplace dans le header avec du jquery.

$( "#swiper" ).prependTo("header" ).parent().addClass("diapos");

et dans mon cas, j'ajoute la class "diapos" au header

Partager ce message


Lien à poster
Partager sur d’autres sites
Le 03/06/2019 à 09:03, ericemer a dit :

@schoune

bonjour et merci.

dans les fonctions de personnalisation de thème :

  • pour la bannière, position au dessus du site.
  • pour le menu, position avant la bannière.

Ensuite, dans mon cas, j'ai ajouté (avec jquery) une boite "#spaceur" avant #site pour générer un espace minimun car j'ai positionné le header en "position: absolute".

 

la dimension verticale (height) de aside#spaceur est calculée avec des unité vh (viewport height) et une dimension minimale est renseignée (min-height: 100px;)

Bonjour @ericemer,

c'est possible d'avoir le détail des manipulations, codes, afin de créer la boîte spaceur ajoutée avec du jquey.
J'y connais rien en jquery 😥

D'avance merci pour ton aide

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour @ericemer,

Je reviens avec une demande. Pour l'essentiel, j'ai réussi à me débrouiller.

Je trouve le fader pour la transition des images vraiment toP !

Difficile à réaliser, possible d'avoir un bref explicatif ?

D'avance merci pour le retour et belle journée

 

 

Partager ce message


Lien à poster
Partager sur d’autres sites

@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.

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 23 heures, ericemer a dit :

@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.

 

Je te remercie pour l'intérêt porté à ma demande. Au final j'ai trouvé la solution à force de creuser...
👍

 

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 1 heure, augras a dit :

Bonjour à tous les deux,

du coup la solution pourrait intéresser d'autres membres je pense : un des deux peut indiquer comment faire ?

Bonjour @augras,

 

je crois que j'ai trouvé le sujet qui correspond au code :

 

 

 

je pense que c'est ce code mais à voir si c'est encore compatible avec la V10.3.12

 

Cordialement

Mickael

Partager ce message


Lien à poster
Partager sur d’autres sites

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',
	});
});

 

Modifié par ericemer
encore des fautes d'orthographe

Partager ce message


Lien à poster
Partager sur d’autres sites

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;
  }
}

 

Modifié par ericemer

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour,

 

Honnêtement j'ai tapé fade effect swiper et j'ai trouvé un lien qui m'a donnée le code a changer. Mais je ne l'ai plus....

 

Par contre, simplement, il faut remplacer les lignes qui correspondent du fichier swiper.min.css par :
.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}
.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}
.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}
.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}

 

Mais j'ai pas testé.
Sinon annexé le fichier correspondant.

Belle soirée
Vinzze

swiper.min.css

Partager ce message


Lien à poster
Partager sur d’autres sites

×
×
  • Créer...