• 0
creatifmen

Bannière responsive futur...il y a t'il un espoir?

Question

creatifmen    12

hello tout le monde une bannière responsive qui ressemble a ça, c est possible avec zwii?

 

exemple avec une bannière 1170x200

5b0c527c8a8ee_00_1170x200zwbartest.thumb.png.a2be15b69b65ba780c9041f8d73192b5.png

 

avec zwii 8.2.9

01_normal.thumb.jpg.0667594a1a36dc4406449c8c039aa703.jpg

quand ont réduit avec le navigateur zwii 8.2.9 (pas responsive) image tronquée

5b0c52df213b7_02_reductionsansresponsive.jpg.7dbcea72d75591341de757f062c3f9f3.jpg

 

Voici ce que ça devrait donner avec une bannière responsive (c est le truc qui manque d'urgence) autrement Zwii  vas tomber dans l'oublie..

Zwii et ultime faut pas baisser les bras courage à toute l’équipe.
 

 

5b0c5332ab937_03_reductionavecbanresponsive.jpg.1eec3cdd936be831fe86fa5b03f3f5ec.jpg

Modifié par creatifmen (Voir l’historique des modifications)

Partager ce message


Lien à poster
Partager sur d’autres sites

34 réponses à cette question

Messages recommandés

  • 0
CroqueWeb    91
il y a 11 minutes, McGregor a dit :

Mais ta banner n'est pas vraiment responsive, est-elle ?

Un background-image adaptatif

Constat :

Le redimensionnement de la page entraîne obligatoirement un rognage de l'image si la taille de la partie visible de l'écran est inférieure à celle de l'image.

Création :

Créer une image d’une taille supérieure à celle que vous avez choisi pour la bannière, sa longueur devra s’adapter aux plus grands écrans (desktop ou laptop), 1280 px est suffisant dans la plupart des cas, mais choisissez 1920 px si l’affichage de votre site est fluide (100 %).

Ajoutez au moins 50 px à la hauteur choisie pour la bannière pour déterminer celle de votre image.

Il est préférable de centrer le contenu devant être visible en permanence.

 

Les propriétés éditables depuis l’interface de Zwii :

header{background-color:rgba(0,0,0,1);height:100px;line-height:100px;text-align:left}
header{background-image:url("../file/source/banniere.jpg");background-position:bottom center;background-repeat:no-repeat}
header span{color:rgba(255,255,255,1);font-family:"Lato",sans-serif;font-weight:normal;font-size:1.6em;text-transform:none}

Celles à ajouter :

Avant la version 8.3.13b, pour un meilleur compromis, il faut ajouter (Personnalisation du thème -> Mode avancé) ceci :

header { 
  margin:0;
  padding:0;
  background-size: cover;
}

 

 

 

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
CroqueWeb    91
il y a 4 minutes, PeterRabbit a dit :

@creatifmen a raison 

Sans doutes, mais on peut avoir envie d'une bannière responsivitive sans que celle-ci soit un slider, non ?

Pour ceux qui souhaitent afficher une image dans leur bannière, il est important que celle-ci soit adaptative (in french), et l'image de fond s'adaptera aux mieux avec la modif que je viens de soumettre à @cybertaf

 

il y a 7 minutes, PeterRabbit a dit :

Le début d'une vérité doit se trouver dans le css de Swiper. Je m'étonne que @Rémi n'ait jamais rien proposé.

Si tu détiens la vérité, la vrai, merci de bien vouloir nous la dévoiler -_-

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
CroqueWeb    91
il y a 25 minutes, McGregor a dit :

Gosh ! Les aiguilles d'Ansabère !

Mais ta banner n'est pas vraiment responsive, est-elle ?

Celle des aiguilles d'Ansabère ?

Si oui, ce n'est pas une image préparée pour le fond de la bannière, mais une image avec ses propres dimensions :

 

AiguillesdAnsabere.thumb.jpg.a76a38675eacac4491f4f2e59ec86baa.jpg

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
PeterRabbit    295
il y a 14 minutes, CroqueWeb a dit :

Un background-image adaptatif

Constat :

Le redimensionnement de la page entraîne obligatoirement un rognage de l'image si la taille de la partie visible de l'écran est inférieure à celle de l'image.

 

Je ne pense pas : 

 

5b913539a72a6_Capturedu2018-09-0616-03-28.thumb.jpg.825349fde9bbc3abed3441be4ca65695.jpg

 

 

5b913554cec74_Capturedu2018-09-0616-05-40.jpg.d4456f6179d42ff5bd1885ea5200dd41.jpg

 

Mais j'avoue que je ne me suis jamais passionné pour ce sujet sur lequel je ne sais pas grand chose.

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
creatifmen    12

hello

@CroqueWeb cool si tu as trouver qqchose fait plaisir..

 

pour Zwiiper le retour :love: on peut juste avoir une bannière simple, ont rajout simplement

dans swiperslides.inc.php,

 

<!-- Diaporama Swiper : http://idangero.us/swiper/ -->
            <div class="swiper-slide swiper-slide-active"><a href="/dossiersitex/"><img src="<?php echo helper::baseUrl(false); ?>site/file/source/banniere responsive-test.jpg"></a>
 </div>

 

a++

 

 

 

 

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
CroqueWeb    91
il y a 5 minutes, PeterRabbit a dit :

Je ne pense pas

Il ne s'agit pas du tout de la même chose, le redimensionnement de ton Zwiiper se fait sur des calques et des images :

<div id="swiper" class="swiper-container swiper-container-horizontal">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide-active"><a href="https://www.linternaute.com/voyage/amerique-du-sud/1268312-les-merveilles-de-patagonie/1269338-torres-del-paine" target="_blank" rel="noopener"><img title="L'Internaute Voyage" src="/www/02_tests-cms/Zwii_V8/831/ZwiiCMS-831/site/file/source/patagonia/torres_del_paine.jpg" /></a>
<div class="swiper-text">Patagonie<br />Torres del Paine</div>
</div>
<div class="swiper-slide"><a href="https://www.linternaute.com/voyage/amerique-du-sud/1268312-les-merveilles-de-patagonie/1269314-laguna-de-los-tres" target="_blank" rel="noopener"><img title="L'Internaute Voyage" src="/www/02_tests-cms/Zwii_V8/831/ZwiiCMS-831/site/file/source/patagonia/fitz_roy.jpg" /></a>
<div class="swiper-text">Laguna de los Tres<br />et mont Fitz Roy</div>
</div>
<div class="swiper-slide"><a href="https://www.linternaute.com/voyage/amerique-du-sud/1268312-les-merveilles-de-patagonie/1269326-laguna-torre" target="_blank" rel="noopener"><img title="L'Internaute Voyage" src="/www/02_tests-cms/Zwii_V8/831/ZwiiCMS-831/site/file/source/patagonia/laguna_torre.jpg" /></a>
<div class="swiper-text">Laguna Torre</div>
</div>
<div class="swiper-slide"><a href="https://www.linternaute.com/voyage/amerique-du-sud/1268312-les-merveilles-de-patagonie/1269311-canal-beagle" target="_blank" rel="noopener"><img title="L'Internaute Voyage" src="/www/02_tests-cms/Zwii_V8/831/ZwiiCMS-831/site/file/source/patagonia/canal_beagle.jpg" /></a>
<div class="swiper-text">Canal Beagle</div>
</div>
<div class="swiper-slide"><a href="https://www.linternaute.com/voyage/amerique-du-sud/1268312-les-merveilles-de-patagonie/1269315-ile-de-chiloe" target="_blank" rel="noopener"><img title="L'Internaute Voyage" src="/www/02_tests-cms/Zwii_V8/831/ZwiiCMS-831/site/file/source/patagonia/chiloe.jpg" /></a>
<div class="swiper-text">Ile de Chilo&eacute;</div>
</div>
<div class="swiper-slide"><a href="https://www.linternaute.com/voyage/amerique-du-sud/1268312-les-merveilles-de-patagonie/1269321-aysen" target="_blank" rel="noopener"><img title="L'Internaute Voyage" src="/www/02_tests-cms/Zwii_V8/831/ZwiiCMS-831/site/file/source/patagonia/puerto_aysen.jpg" /></a>
<div class="swiper-text">Puerto Ays&eacute;n</div>
</div>
</div>
<div id="swiper-button-prev" class="swiper-button-prev swiper-button-white">&nbsp;</div>
<div id="swiper-button-next" class="swiper-button-next swiper-button-white">&nbsp;</div>
</div>

Celui de la bannière se fait sur le fond (background) de la balise <header>, pas sur l'image elle même.

Il est très simple de dimensionner des images et des calques, sur lesquels on agit directement sur leur tailles (width & height), pour dimensionner une image de fond on ne dispose que des propriétés CSS background, tq cover, contain, etc

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
CroqueWeb    91
il y a 2 minutes, creatifmen a dit :

pour Zwiiper le retour :love: on peut juste avoir une bannière simple, ont rajout simplement

dans swiperslides.inc.php,

Oui, mais ça ne solutionne pas pour autant la non adaptabilité de la bannière, et oblige à installer Zwiiper qui remplace alors la bannière par un slider, et si il ne contient qu'une seule image ça ne fera évidemment pas un diaporama mais une image fixe.

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
creatifmen    12

@CroqueWeb oui tu as raison il faudrait intégrée le responsive bannière futur que tu as trouver dans la nouvelle version de zwii.

mais le Zwiiper le retour  c'est de la bombe car il fait la total et pour l'instant c'est la seule chose qui fonctionne pour la bannière responsive & faire un carrousel easy..

:kiss_wink:

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
CroqueWeb    91
il y a 22 minutes, PeterRabbit a dit :

Un background-image adaptatif

C'est ce dont il est question.

il y a 24 minutes, PeterRabbit a dit :

Je ne pense pas : 

Ce que tu montres est différent, ce sont des images dans des calques :

<div><img src="image.jpg"></div>

La propriété CSS background s'applique à :

<header></header>

 

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
PeterRabbit    295

Bravo @creatifmen ! Le temps que je fasse mes essais, j'en étais arrivé à la même conclusion :

<!-- Diaporama Swiper : http://idangero.us/swiper/ -->

    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide-active"><img src="<?php echo helper::baseUrl(false); ?>site/file/source/ny/5th_avenue.jpg"></div>
    </div>  

 

5b914136b97d8_Capturedu2018-09-0616-56-41.jpg.3028f14983f7b32e534cc0f5e7293b97.jpg

 

Au minimum, Zwiiper est un trois en un, ce qui n'est déjà pas mal. o.O

Mais j'ai une petite idée que je vais creuser pour essayer de faire la même chose sans.

Modifié par PeterRabbit (Voir l’historique des modifications)

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
PeterRabbit    295

Après quelques essais, et sauf aberration toujours possible, j'en arrive à l'hypothèse de travail que :

  • sans intégrer Swiper (aucun appel à ses deux css dans <head> ni à son js juste avant </body> dans "core/main/layout/main.php"),
  • sans rien ajouter dans le mode avancé du css (comme proposé par @CroqueWeb),
  • en faisant seulement appel (aux quatre endroits où le menu peut s'afficher dans "core/layout/main.php") au fichier de configuration "core/vendor/swiper/swiperslides.inc.php" réduit à son strict minimum 
<img src="<?php echo helper::baseUrl(false); ?>site/file/source/ny/5th_avenue.jpg">

on obtient une image vraiment responsive qui peut faire office de bannière si on la masque :

 

5b9153e8ecea5_Capturedu2018-09-0617-55-06.png.d3d5cd4b777d71d6615f2cfac86a9438.png

 

Moyennant quelques réglages de positionnement, il suffirait de composer une image de bannière avec texte et tout et tout... en attendant mieux.

 

Ceux qui voudraient essayer peuvent le faire aisément en n'installant que le module "banner_install" du plugin "Zwiiper" sur un ZwiiCMS neuf, puis en éditant "core/vendor/swiper/swiperslides.inc.php" pour le réduire au code ci-dessus.

Modifié par PeterRabbit (Voir l’historique des modifications)

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
CroqueWeb    91

Yes !

Mais sans ajouter quoi que ce soit d'autre qu'une image on obtient le même résultat :

<?php $layout = new layout($this); ?>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<?php $layout->showMetaTitle(); ?>
	<?php $layout->showMetaDescription(); ?>
	<?php $layout->showFavicon(); ?>
	<?php $layout->showVendor(); ?>
	<link rel="stylesheet" href="<?php echo helper::baseUrl(false); ?>core/layout/common.css">
	<link rel="stylesheet" href="<?php echo helper::baseUrl(false); ?>site/data/theme.css?<?php echo md5_file('site/data/theme.css'); ?>">
	<link rel="stylesheet" href="<?php echo helper::baseUrl(false); ?>site/data/custom.css?<?php echo md5_file('site/data/custom.css'); ?>">
</head>
<body>
<?php $layout->showStyle(); ?>
<?php $layout->showBar(); ?>
<?php $layout->showNotification(); ?>
<?php if($this->getData(['theme', 'menu', 'position']) === 'body-first' || $this->getData(['theme', 'menu', 'position']) === 'body-top' ): ?>
	<!-- Menu dans le fond du site avant la bannière -->
	<img src="<?php echo helper::baseUrl(false); ?>site/file/source/banniere.jpg">
	<nav>
		<div id="toggle"><?php echo template::ico('menu'); ?></div>
		<div id="menu" class="
		<?php if($this->getData(['theme', 'menu', 'position']) === 'body-top'){echo 'container-large';}else{echo'container';}
		?>">

			<?php $layout->showMenu(); ?>
		</div>
	</nav>
<?php endif; ?>
<?php if($this->getData(['theme', 'header', 'position']) === 'body'): ?>
	<!-- Bannière dans le fond du site -->

	<!-- menu image -->
	<?php
	if ($this->getData(['theme','header','linkHome'])){
	echo "<a href='" . helper::baseUrl(false) . "'>" ;}	?>
	<!-- menu image -->

	<header>
		<?php if(
			$this->getData(['theme', 'header', 'textHide']) === false
			// Affiche toujours le titre de la bannière pour l'édition du thème
			OR ($this->getUrl(0) === 'theme' AND $this->getUrl(1) === 'header')
		): ?>


			<div class="container">
				<span><?php echo $this->getData(['config', 'title']); ?></span>
			</div>


		<?php endif; ?>
	</header>
	<!-- menu image -->
	<?php
	if ($this->getData(['theme','header','linkHome'])){echo "</a>";}
	?>
	<!-- menu image -->

<?php endif; ?>
<?php if($this->getData(['theme', 'menu', 'position']) === 'body-second'): ?>
	<!-- Menu dans le fond du site après la bannière -->
	<img src="<?php echo helper::baseUrl(false); ?>site/file/source/banniere.jpg">
	<nav>
		<div id="toggle"><?php echo template::ico('menu'); ?></div>
		<div id="menu" class="container">
			<?php $layout->showMenu(); ?>
		</div>
	</nav>
<?php endif; ?>
<!-- Site -->
<div id="site" class="container">
	<?php if($this->getData(['theme', 'menu', 'position']) === 'site-first'): ?>
		<!-- Menu dans le site avant la bannière -->
		<img src="<?php echo helper::baseUrl(false); ?>site/file/source/banniere.jpg">
		<nav>
			<div id="toggle"><?php echo template::ico('menu'); ?></div>
			<div id="menu" class="container">
				<?php $layout->showMenu(); ?>
			</div>
		</nav>
	<?php endif; ?>
	<?php if(
		$this->getData(['theme', 'header', 'position']) === 'site'
		// Affiche toujours la bannière pour l'édition du thème
		OR (
			$this->getData(['theme', 'header', 'position']) === 'hide'
			AND $this->getUrl(0) === 'theme'
		)
	): ?>
		<!-- Bannière dans le site -->

		<!-- menu image -->
		<?php
		if ($this->getData(['theme','header','linkHome'])){
		echo "<a href='" . helper::baseUrl(false) . "'>" ;}	?>
		<!-- menu image -->
		<header <?php if($this->getData(['theme', 'header', 'position']) === 'hide'): ?>class="displayNone"<?php endif; ?>>
			<?php if(
				$this->getData(['theme', 'header', 'textHide']) === false
				// Affiche toujours le titre de la bannière pour l'édition du thème
				OR ($this->getUrl(0) === 'theme' AND $this->getUrl(1) === 'header')
			): ?>
			<div class="container">
				<span><?php echo $this->getData(['config', 'title']); ?></span>
			</div>
			<?php endif; ?>
		</header>
		<?php
		if ($this->getData(['theme','header','linkHome'])){echo "</a>";}	?>
		<?php endif; ?>
	<?php if(
		$this->getData(['theme', 'menu', 'position']) === 'site-second'
		// Affiche toujours le menu pour l'édition du thème
		OR (
			$this->getData(['theme', 'menu', 'position']) === 'hide'
			AND $this->getUrl(0) === 'theme'
		)
	): ?>
		<!-- Menu dans le site après la bannière -->
		<img src="<?php echo helper::baseUrl(false); ?>site/file/source/banniere.jpg">
		<nav <?php if($this->getData(['theme', 'menu', 'position']) === 'hide'): ?>class="displayNone"<?php endif; ?>>
			<div id="toggle"><?php echo template::ico('menu'); ?></div>
			<div id="menu" class="container">
				<?php $layout->showMenu(); ?>
			</div>
		</nav>
	<?php endif; ?>
	<!-- Corps -->
	<section><?php $layout->showContent(); ?></section>
	<?php if(
		$this->getData(['theme', 'footer', 'position']) === 'site'
		// Affiche toujours le pied de page pour l'édition du thème
		OR (
			$this->getData(['theme', 'footer', 'position']) === 'hide'
			AND $this->getUrl(0) === 'theme'
		)
	): ?>
		<!-- Pied de page dans le site -->
		<footer <?php if($this->getData(['theme', 'footer', 'position']) === 'hide'): ?>class="displayNone"<?php endif; ?>>
			<div class="container">
				<?php $layout->showSocials(); ?>
				<?php $layout->showFooterText(); ?>
				<?php $layout->showCopyright(); ?>
			</div>
		</footer>
	<?php endif; ?>
</div>
<?php if($this->getData(['theme', 'footer', 'position']) === 'body'): ?>
	<!-- Pied de page dans le fond du site -->
	<footer>
		<div class="container">
			<?php $layout->showSocials(); ?>
			<?php $layout->showFooterText(); ?>
			<?php $layout->showCopyright(); ?>
		</div>
	</footer>
<?php endif; ?>
<!-- Lien remonter en haut -->
<div id="backToTop"><?php echo template::ico('up'); ?></div>
<?php $layout->showAnalytics(); ?>
<?php $layout->showScript(); ?>
</body>
</html>

 

01.jpg.a9b19dba0d691b732d505195b01250f7.jpg

02.thumb.jpg.f33c8bec6cf1bc778a93f23f97cac995.jpg

 

Et une fois encore il s'agit d'une image dimensionnée, comme toutes les images du site, par les propriétés "responsives" de Zwii, ce n'est pas une bannière en tant que telle.

Essaye d'ajouter un texte écrit par dessus cette image, tel que le titre peut s'afficher dans la bannière et tel qu'il y est paramétrable, ça complexifie déjà la chose.

Il ne s’agit pas ici de réécrire Zwii, il a été conçu avec un codage html5, il y a donc un header, dans lequel est porté d’importantes informations, le titre en est une.

 

Ici il y à les balises <header>

</header> une bannière avec un titre et une image de fond est présente sur le site :

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Accueil - ZwiiCMS-dev-8.3.13</title>	<meta name="description" content="8.3.12a">	<link rel="shortcut icon" href="Zwii831dev/site/file/source/favicon.ico">	<script>var baseUrl = "Zwii831dev\/";var baseUrlQs = "Zwii831dev\/";</script><script src="Zwii831dev/core/vendor/jquery/jquery.min.js"></script><link rel="stylesheet" href="Zwii831dev/core/vendor/normalize/normalize.min.css"><link rel="stylesheet" href="Zwii831dev/core/vendor/lity/lity.min.css"><script src="Zwii831dev/core/vendor/lity/lity.min.js"></script><script src="Zwii831dev/core/vendor/filemanager/callback.js"></script><link rel="stylesheet" href="Zwii831dev/core/vendor/tippy/tippy.min.css"><script src="Zwii831dev/core/vendor/tippy/tippy.min.js"></script><script src="Zwii831dev/core/vendor/tippy/init.js"></script><link rel="stylesheet" href="Zwii831dev/core/vendor/zwiico/css/zwiico.min.css"><link rel="stylesheet" href="Zwii831dev/core/vendor/zwiico/init.css">	<link rel="stylesheet" href="Zwii831dev/core/layout/common.css">
	<link rel="stylesheet" href="Zwii831dev/site/data/theme.css?f3515eac6e1b96d85c82a614e46c63f9">
	<link rel="stylesheet" href="Zwii831dev/site/data/custom.css?ff7408d4af327015835e3d352ec24e84">
</head>
<body>
	<!-- Menu dans le fond du site avant la bannière -->
	<nav>
		<div id="toggle"><span class="zwiico-menu" style="font-size:1em"></span></div>
		<div id="menu" class="
		container-large">

			<ul><li><a href="Zwii831dev/accueil" class="active">Accueil<span class="zwiico-down zwiico-margin-left" style="font-size:1em"></span></a><ul><a href="Zwii831dev/enfant">Enfant</a></li></ul></li><li><a href="Zwii831dev/blog">Blog</a><ul></ul></li><li><a href="Zwii831dev/galeries">Galeries</a><ul></ul></li><li><a href="Zwii831dev/diaporamours">Diaporamours</a><ul></ul></li><li id="menuLoginLink" ><a href="Zwii831dev/user/login/accueil">Connexion</a></li></ul>		</div>
	</nav>
	<!-- Bannière dans le fond du site -->

	<!-- menu image -->
		<!-- menu image -->

		<header>
		

			<div class="container">
				<span>ZwiiCMS-dev-8.3.13</span>
			</div>
	

			</header>
	<!-- menu image -->			
		<!-- menu image -->		

<!-- Site -->
<div id="site" class="container">
				<!-- Corps -->
	<section><h1 id="sectionTitle">Accueil</h1><h3>Bienvenue sur Zwii</h3>
<p>Si vous avez besoin de jeter un œil à votre <a title="Forum" href="http://forum.zwiicms.com/">forum</a> Zwii :)</p></section>
	</div>
	<!-- Pied de page dans le fond du site -->
	<footer>
		<div class="container">
									<div id="footerCopyright">Motorisé par <a href="http://zwiicms.com/" target="_blank">Zwii</a> | <a href="Zwii831dev/sitemap">Plan du site</a><span id="footerLoginLink" > | <a href="Zwii831dev/user/login/accueil">Connexion</a></span></div>		</div>
	</footer>
<!-- Lien remonter en haut -->
<div id="backToTop"><span class="zwiico-up" style="font-size:1em"></span></div>
<script>var core = {};core.alert = function(text){var lightbox = lity(function($){return $("<div>").addClass("lightbox").append($("<span>").text(text),$("<div>").addClass("lightboxButtons").append($("<a>").addClass("button").text("Ok").on("click", function(){lightbox.close();})))}(jQuery));$(document).on("keyup", function(event){if(event.keyCode === 13){lightbox.close();}});return false;};core.colorVariants = function(rgba){rgba = rgba.match(/\(+(.*)\)/);rgba = rgba[1].split(", ");return {"normal": "rgba(" + rgba[0] + "," + rgba[1] + "," + rgba[2] + "," + rgba[3] + ")","darken": "rgba(" + Math.max(0, rgba[0] - 15)+ "," + Math.max(0, rgba[1] - 15)+ "," + Math.max(0, rgba[2] - 15)+ "," + rgba[3] + ")","veryDarken": "rgba(" + Math.max(0, rgba[0] - 20)+ "," + Math.max(0, rgba[1] - 20)+ "," + Math.max(0, rgba[2] - 20)+ "," + rgba[3] + ")","text": core.relativeLuminanceW3C(rgba)> .22 ? "inherit" : "white"};};core.confirm = function(text, yesCallback, noCallback){var lightbox = lity(function($){return $("<div>").addClass("lightbox").append($("<span>").text(text),$("<div>").addClass("lightboxButtons").append($("<a>").addClass("button grey").text("Non").on("click", function(){lightbox.options('button', true);lightbox.close();if(typeof noCallback !== "undefined"){noCallback();}}),$("<a>").addClass("button").text("Oui").on("click", function(){lightbox.options('button', true);lightbox.close();if(typeof yesCallback !== "undefined"){yesCallback();}})))}(jQuery));lightbox.options('button', false);$(document).on('lity:close', function(event, instance){if(instance.options('button')=== false&& typeof noCallback !== "undefined"){noCallback();}});$(document).on("keyup", function(event){if(event.keyCode === 13){lightbox.close();if(typeof yesCallback !== "undefined"){yesCallback();}}});return false;};core.end = function(){var formDOM = $("form");var inputsDOM = formDOM.find("input:not([data-no-dirty]), select:not([data-no-dirty]), textarea:not(.editorWysiwyg):not([data-no-dirty])");var inputSerialize = inputsDOM.serialize();$(window).on("beforeunload", function(){if(inputsDOM.serialize()!== inputSerialize){return "Les modifications que vous avez apportées ne seront peut-être pas enregistrées.";}});formDOM.submit(function(){$(window).off("beforeunload");});};$(function(){core.end();});core.noticeAdd = function(id, notice){$("#" + id + "Notice").text(notice).removeClass("displayNone");$("#" + id).addClass("notice");};core.noticeRemove = function(id){$("#" + id + "Notice").text("").addClass("displayNone");$("#" + id).removeClass("notice");};core.start = function(){var backToTopDOM = $("#backToTop");backToTopDOM.on("click", function(){$("body, html").animate({scrollTop: 0}, "400");});$(window).on("scroll", function(){if($(this).scrollTop()> 200){backToTopDOM.fadeIn();}else {backToTopDOM.fadeOut();}});var notificationTimer;$("#notification").on("mouseenter", function(){clearTimeout(notificationTimer);$("#notificationProgress").stop().width("100%");}).on("mouseleave", function(){notificationTimer = setTimeout(function(){$("#notification").fadeOut();}, 4000);$("#notificationProgress").animate({"width": "0%"}, 4000, "linear");}).trigger("mouseleave");$("#notificationClose").on("click", function(){clearTimeout(notificationTimer);$("#notification").fadeOut();$("#notificationProgress").stop();});var menuDOM = $("#menu");$("#toggle").on("click", function(){menuDOM.slideToggle();});$(window).on("resize", function(){if($(window).width()> 768){menuDOM.css("display", "");}});if(false){if(document.cookie.indexOf("ZWII_COOKIE_CONSENT")=== -1){$("body").append($("<div>").attr("id", "cookieConsent").append($("<span>").text("En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies."),$("<span>").attr("id", "cookieConsentConfirm").text("OK").on("click", function(){var expires = new Date();expires.setFullYear(expires.getFullYear()+ 1);expires = "expires=" + expires.toUTCString();document.cookie = "ZWII_COOKIE_CONSENT=true;" + expires;$(this).parents("#cookieConsent").fadeOut();})));}}$("#barSelectPage").on("change", function(){var pageUrl = $(this).val();if(pageUrl){$(location).attr("href", pageUrl);}});$(".inputFileHidden").on("change", function(){var inputFileHiddenDOM = $(this);var fileName = inputFileHiddenDOM.val();if(fileName === ""){fileName = "Choisissez un fichier";$(".inputFileDelete").addClass("disabled");}else {$(".inputFileDelete").removeClass("disabled");}inputFileHiddenDOM.parent().find(".inputFileLabel").text(fileName);}).trigger("change");$(".inputFileDelete").on("click", function(){$(this).parents(".inputWrapper").find(".inputFileHidden").val("").trigger("change");});$("#barUpdate").on("click", function(){return core.confirm("Effectuer la mise à jour ?", function(){$(location).attr("href", $("#barUpdate").attr("href"));});});$("#barLogout").on("click", function(){return core.confirm("Se déconnecter ?", function(){$(location).attr("href", $("#barLogout").attr("href"));});});$("form").on("submit", function(){$(this).find(".uniqueSubmission").addClass("disabled").prop("disabled", true).empty().append($("<span>").addClass("zwiico-spin animate-spin"))});$("[type=email]").on("change", function(){var _this = $(this);var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;if(pattern.test(_this.val())){core.noticeRemove(_this.attr("id"));}else {core.noticeAdd(_this.attr("id"), "Format incorrect");}});var elementDOM = $("iframe, video, embed");elementDOM.each(function(){var _this = $(this);_this.data("ratio", _this.height()/ _this.width()).removeAttr("width height");});$(window).on("resize", function(){elementDOM.each(function(){var _this = $(this);var width = _this.parent().first().width();_this.width(width).height(width * _this.data("ratio"));});}).trigger("resize");};core.start();core.relativeLuminanceW3C = function(rgba){var RsRGB = rgba[0] / 255;var GsRGB = rgba[1] / 255;var BsRGB = rgba[2] / 255;var RsRGBA = rgba[3] * RsRGB + (1 - rgba[3]);var GsRGBA = rgba[3] * GsRGB + (1 - rgba[3]);var BsRGBA = rgba[3] * BsRGB + (1 - rgba[3]);var R = (RsRGBA <= .03928)? RsRGBA / 12.92 : Math.pow((RsRGBA + .055)/ 1.055, 2.4);var G = (GsRGBA <= .03928)? GsRGBA / 12.92 : Math.pow((GsRGBA + .055)/ 1.055, 2.4);var B = (BsRGBA <= .03928)? BsRGBA / 12.92 : Math.pow((BsRGBA + .055)/ 1.055, 2.4);return .2126 * R + .7152 * G + .0722 * B;};</script></body>
</html>

 

La, non !

Une image remplace la bannière :

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Accueil - Zwii, votre site en quelques clics !</title>	<meta name="description" content="Zwii est un CMS sans base de données qui permet à ses utilisateurs de créer et gérer facilement un site web sans aucune connaissance en programmation.">	<link rel="shortcut icon" href="Zwii831/site/file/source/favicon.ico">	<script>var baseUrl = "Zwii831\/";var baseUrlQs = "Zwii831\/?";</script><script src="Zwii831/core/vendor/jquery/jquery.min.js"></script><link rel="stylesheet" href="Zwii831/core/vendor/normalize/normalize.min.css"><link rel="stylesheet" href="Zwii831/core/vendor/lity/lity.min.css"><script src="Zwii831/core/vendor/lity/lity.min.js"></script><script src="Zwii831/core/vendor/filemanager/callback.js"></script><link rel="stylesheet" href="Zwii831/core/vendor/tippy/tippy.min.css"><script src="Zwii831/core/vendor/tippy/tippy.min.js"></script><script src="Zwii831/core/vendor/tippy/init.js"></script><link rel="stylesheet" href="Zwii831/core/vendor/zwiico/css/zwiico.min.css"><link rel="stylesheet" href="Zwii831/core/vendor/zwiico/init.css">	<link rel="stylesheet" href="Zwii831/core/layout/common.css">
	<link rel="stylesheet" href="Zwii831/site/data/theme.css?05314fbf54c44054665e8ff17e15826b">
	<link rel="stylesheet" href="Zwii831/site/data/custom.css?b65db281b64375a66bc721c05a8e8e56">
</head>
<body>
<!-- Site -->
<div id="site" class="container">
					<!-- Menu dans le site après la bannière -->
		<img src="Zwii831/site/file/source/banniere.jpg">
		<nav >
			<div id="toggle"><span class="zwiico-menu" style="font-size:1em"></span></div>
			<div id="menu" class="container">
				<ul><li><a href="Zwii831/?accueil" class="active">Accueil<span class="zwiico-down zwiico-margin-left" style="font-size:1em"></span></a><ul><a href="Zwii831/?enfant">Enfant</a></li></ul></li><li><a href="Zwii831/?blog">Blog</a><ul></ul></li><li><a href="Zwii831/?galeries">Galeries</a><ul></ul></li><li><a href="Zwii831/?site-de-zwii" target="_blank">Site de Zwii</a><ul></ul></li><li><a href="Zwii831/?contact">Contact</a><ul></ul></li><li id="menuLoginLink" ><a href="Zwii831/?user/login/accueil">Connexion</a></li></ul>			</div>
		</nav>
		<!-- Corps -->
	<section><h1 id="sectionTitle">Accueil</h1><h3>Bienvenue sur votre nouveau site Zwii !</h3>
<p><strong>Un email contenant le récapitulatif de votre installation vient de vous être envoyé.</strong></p>
<p>Connectez-vous dès maintenant à votre espace membre afin de créer un site à votre image ! Vous allez pouvoir personnaliser le thème, créer des pages, ajouter des utilisateurs et bien plus encore !</p>
<p>Si vous avez besoin d'aide ou si vous cherchez des informations sur Zwii, n'hésitez pas à jeter un œil à notre <a title="Forum" href="http://forum.zwiicms.com/">forum</a>.</p></section>
			<!-- Pied de page dans le site -->
		<footer >
			<div class="container">
												<div id="footerCopyright">Motorisé par <a href="http://zwiicms.com/" target="_blank">Zwii</a> | <a href="Zwii831/?sitemap">Plan du site</a><span id="footerLoginLink" > | <a href="Zwii831/?user/login/accueil">Connexion</a></span></div>			</div>
		</footer>
	</div>
<!-- Lien remonter en haut -->
<div id="backToTop"><span class="zwiico-up" style="font-size:1em"></span></div>
<script>var core = {};core.alert = function(text){var lightbox = lity(function($){return $("<div>").addClass("lightbox").append($("<span>").text(text),$("<div>").addClass("lightboxButtons").append($("<a>").addClass("button").text("Ok").on("click", function(){lightbox.close();})))}(jQuery));$(document).on("keyup", function(event){if(event.keyCode === 13){lightbox.close();}});return false;};core.colorVariants = function(rgba){rgba = rgba.match(/\(+(.*)\)/);rgba = rgba[1].split(", ");return {"normal": "rgba(" + rgba[0] + "," + rgba[1] + "," + rgba[2] + "," + rgba[3] + ")","darken": "rgba(" + Math.max(0, rgba[0] - 15)+ "," + Math.max(0, rgba[1] - 15)+ "," + Math.max(0, rgba[2] - 15)+ "," + rgba[3] + ")","veryDarken": "rgba(" + Math.max(0, rgba[0] - 20)+ "," + Math.max(0, rgba[1] - 20)+ "," + Math.max(0, rgba[2] - 20)+ "," + rgba[3] + ")","text": core.relativeLuminanceW3C(rgba)> .22 ? "inherit" : "white"};};core.confirm = function(text, yesCallback, noCallback){var lightbox = lity(function($){return $("<div>").addClass("lightbox").append($("<span>").text(text),$("<div>").addClass("lightboxButtons").append($("<a>").addClass("button grey").text("Non").on("click", function(){lightbox.options('button', true);lightbox.close();if(typeof noCallback !== "undefined"){noCallback();}}),$("<a>").addClass("button").text("Oui").on("click", function(){lightbox.options('button', true);lightbox.close();if(typeof yesCallback !== "undefined"){yesCallback();}})))}(jQuery));lightbox.options('button', false);$(document).on('lity:close', function(event, instance){if(instance.options('button')=== false&& typeof noCallback !== "undefined"){noCallback();}});$(document).on("keyup", function(event){if(event.keyCode === 13){lightbox.close();if(typeof yesCallback !== "undefined"){yesCallback();}}});return false;};core.end = function(){var formDOM = $("form");var inputsDOM = formDOM.find("input:not([data-no-dirty]), select:not([data-no-dirty]), textarea:not(.editorWysiwyg):not([data-no-dirty])");var inputSerialize = inputsDOM.serialize();$(window).on("beforeunload", function(){if(inputsDOM.serialize()!== inputSerialize){return "Les modifications que vous avez apportées ne seront peut-être pas enregistrées.";}});formDOM.submit(function(){$(window).off("beforeunload");});};$(function(){core.end();});core.noticeAdd = function(id, notice){$("#" + id + "Notice").text(notice).removeClass("displayNone");$("#" + id).addClass("notice");};core.noticeRemove = function(id){$("#" + id + "Notice").text("").addClass("displayNone");$("#" + id).removeClass("notice");};core.start = function(){var backToTopDOM = $("#backToTop");backToTopDOM.on("click", function(){$("body, html").animate({scrollTop: 0}, "400");});$(window).on("scroll", function(){if($(this).scrollTop()> 200){backToTopDOM.fadeIn();}else {backToTopDOM.fadeOut();}});var notificationTimer;$("#notification").on("mouseenter", function(){clearTimeout(notificationTimer);$("#notificationProgress").stop().width("100%");}).on("mouseleave", function(){notificationTimer = setTimeout(function(){$("#notification").fadeOut();}, 4000);$("#notificationProgress").animate({"width": "0%"}, 4000, "linear");}).trigger("mouseleave");$("#notificationClose").on("click", function(){clearTimeout(notificationTimer);$("#notification").fadeOut();$("#notificationProgress").stop();});var menuDOM = $("#menu");$("#toggle").on("click", function(){menuDOM.slideToggle();});$(window).on("resize", function(){if($(window).width()> 768){menuDOM.css("display", "");}});if(true){if(document.cookie.indexOf("ZWII_COOKIE_CONSENT")=== -1){$("body").append($("<div>").attr("id", "cookieConsent").append($("<span>").text("En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies."),$("<span>").attr("id", "cookieConsentConfirm").text("OK").on("click", function(){var expires = new Date();expires.setFullYear(expires.getFullYear()+ 1);expires = "expires=" + expires.toUTCString();document.cookie = "ZWII_COOKIE_CONSENT=true;" + expires;$(this).parents("#cookieConsent").fadeOut();})));}}$("#barSelectPage").on("change", function(){var pageUrl = $(this).val();if(pageUrl){$(location).attr("href", pageUrl);}});$(".inputFileHidden").on("change", function(){var inputFileHiddenDOM = $(this);var fileName = inputFileHiddenDOM.val();if(fileName === ""){fileName = "Choisissez un fichier";$(".inputFileDelete").addClass("disabled");}else {$(".inputFileDelete").removeClass("disabled");}inputFileHiddenDOM.parent().find(".inputFileLabel").text(fileName);}).trigger("change");$(".inputFileDelete").on("click", function(){$(this).parents(".inputWrapper").find(".inputFileHidden").val("").trigger("change");});$("#barUpdate").on("click", function(){return core.confirm("Effectuer la mise à jour ?", function(){$(location).attr("href", $("#barUpdate").attr("href"));});});$("#barLogout").on("click", function(){return core.confirm("Se déconnecter ?", function(){$(location).attr("href", $("#barLogout").attr("href"));});});$("form").on("submit", function(){$(this).find(".uniqueSubmission").addClass("disabled").prop("disabled", true).empty().append($("<span>").addClass("zwiico-spin animate-spin"))});$("[type=email]").on("change", function(){var _this = $(this);var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;if(pattern.test(_this.val())){core.noticeRemove(_this.attr("id"));}else {core.noticeAdd(_this.attr("id"), "Format incorrect");}});var elementDOM = $("iframe, video, embed");elementDOM.each(function(){var _this = $(this);_this.data("ratio", _this.height()/ _this.width()).removeAttr("width height");});$(window).on("resize", function(){elementDOM.each(function(){var _this = $(this);var width = _this.parent().first().width();_this.width(width).height(width * _this.data("ratio"));});}).trigger("resize");};core.start();core.relativeLuminanceW3C = function(rgba){var RsRGB = rgba[0] / 255;var GsRGB = rgba[1] / 255;var BsRGB = rgba[2] / 255;var RsRGBA = rgba[3] * RsRGB + (1 - rgba[3]);var GsRGBA = rgba[3] * GsRGB + (1 - rgba[3]);var BsRGBA = rgba[3] * BsRGB + (1 - rgba[3]);var R = (RsRGBA <= .03928)? RsRGBA / 12.92 : Math.pow((RsRGBA + .055)/ 1.055, 2.4);var G = (GsRGBA <= .03928)? GsRGBA / 12.92 : Math.pow((GsRGBA + .055)/ 1.055, 2.4);var B = (BsRGBA <= .03928)? BsRGBA / 12.92 : Math.pow((BsRGBA + .055)/ 1.055, 2.4);return .2126 * R + .7152 * G + .0722 * B;};</script></body>
</html>

 

Modifié par CroqueWeb (Voir l’historique des modifications)

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
PeterRabbit    295

Bien sûr qu'il n'est pas nécessaire de passer par un fichier particulier pour injecter une seule image, on peut copier son adresse quatre fois.

Ce que je voulais simplement dire, c'est que si j'avais à faire une bannière, je centrerais une image de façon que le fait qu'elle ne soit pas responsive ne soit pas un problème, au contraire...

 

5b918aea20214_Capturedu2018-09-0622-14-41.png.9019dac132f7442188eb02c0b56c441c.png

 

... la responsivité de l'image bannière avec un titre superposé n'étant pas un atout.

 

5b918c2c22d37_Capturedu2018-09-0622-20-30.png.66bdf3c6336013d5322aa022239fda3d.png

 

 Tu peux supprimer mon message et ta réponse, ils sont sans intérêt. :/

 

Modifié par PeterRabbit (Voir l’historique des modifications)

Partager ce message


Lien à poster
Partager sur d’autres sites
  • 0
CroqueWeb    91
Il y a 1 heure, Iron a dit :

Cela doit être, selon moi, d'origine dans le core de Zwii.

Ce sera dans une prochaine version proposée par @cybertaf

Il y a 1 heure, Iron a dit :

On tient le bon bout (de code?) :glasses:

Oui, au niveau de la fonctionnalité, mais non au niveau de mon code PHP et JavaScript qui ne colle pas bien aux standards de la POO, mais @cybertaf va nous coder ça nickel :)

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant