Aller au contenu
Communauté Zwii et Yocto
creatifmen

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

Par creatifmen, dans Bugs, questions, suggestions et astuces

Messages recommandés

PeterRabbit    434

PeterRabbit
Posté(e) (modifié)

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

Partager ce message

Lien à poster
Partager sur d’autres sites

PeterRabbit    434

PeterRabbit
Posté(e) (modifié)

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

Partager ce message

Lien à poster
Partager sur d’autres sites

CroqueWeb    103

CroqueWeb
Posté(e) (modifié)

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

Partager ce message

Lien à poster
Partager sur d’autres sites

Iron    11

Iron
Posté(e) (modifié)

Après lecture de ces différents posts, je crois que @CroqueWeb détient la vérité sur la bannière responsive.

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

 

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

Modifié par Iron

Partager ce message

Lien à poster
Partager sur d’autres sites

PeterRabbit    434

PeterRabbit
Posté(e) (modifié)

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

Partager ce message

Lien à poster
Partager sur d’autres sites

CroqueWeb    103

CroqueWeb
Posté(e)
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

CroqueWeb    103

CroqueWeb
Posté(e)
Il y a 8 heures, McGregor a dit :

Gosh ! Les aiguilles d'Ansabère !

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

Autre exemple de background-image non adaptatif, qui devrait être prochainement résolu à partir de la même solution que pour la bannière :

 

03.jpg.a456e3da6fb46333ebc92762a51b47a8.jpg

 

04.thumb.jpg.71c0b1fbe46d4d2dc89751e3af157cba.jpg

Partager ce message

Lien à poster
Partager sur d’autres sites

creatifmen    27

creatifmen
Posté(e) (modifié)

@CroqueWebla façon genre 

		<img src="Zwii831/site/file/source/banniere.jpg">
		<nav >

je l'avais déjà tester depuis un moment sauf que ça fait un espace moche en bas...
( toujours de la même grandeur 2 ou 3px)

a++

mode.jpg

Modifié par creatifmen

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
Aller sur la liste des sujets Bugs, questions, suggestions et astuces
×