ZwiiCMS-Team
/
ZwiiCMS
3
3
Fork 2
Code Releases 123 Activity

[9.2.25] Preview du site

Browse Source
pull/3/head
Fred Tempez 3 years ago
parent 2615198d7a
commit 8c4ebad69a
3 changed files with 103 additions and 40 deletions
Show Stats Download Patch File Download Diff File

7
core/module/theme/view/site/site.css
Unescape Escape View File

@ -29,4 +29,11 @@ textarea,
.button.buttonGrey,
.button.buttonGrey:hover {
color: rgba(33, 34, 35, 1);
}
div.preview {
border-radius: 2%;
-webkit-box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.75);
box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.75);
}

36
core/module/theme/view/site/site.js.php
Unescape Escape View File

@ -10,6 +10,37 @@
* @link http://zwiicms.com/
*/
/*
* Chargement de l'aperçu
*/
$( document ).ready(function() {
// Import des polices de caractères
var titleFont = $("#themeTitleFont").val();
var textFont = $("#themeTextFont").val();
var css = "@import url('https://fonts.googleapis.com/css?family=" + titleFont + "|" + textFont + "');";
var colors = core.colorVariants($("#themeButtonBackgroundColor").val());
css += "h1.preview,h3.preview{color:" + $("#themeTitleTextColor").val() + ";font-family:'" + titleFont.replace(/\+/g, " ") + "',sans-serif;font-weight:" + $("#themeTitleFontWeight").val() + ";text-transform:" + $("#themeTitleTextTransform").val() + "}";
css += "p.preview{color:" + $("#themeTextTextColor").val() + "}";
css += "div.preview{background-color:" + $("#themeSiteBackgroundColor").val() + ";}";
// Couleurs des liens
colors = core.colorVariants($("#themeLinkTextColor").val());
css += "a.preview{color:" + colors.normal + "}";
css += "a.preview:hover{color:" + colors.darken + "}";
// Paramètrage du DOM
$("#themePreview").remove();
$("<style>")
.attr("type", "text/css")
.attr("id", "themePreview")
.text(css)
.appendTo("head");
});
/**
* Aperçu en direct
*/
@ -36,14 +67,18 @@ $("input, select").on("change", function() {
colors = core.colorVariants($("#themeLinkTextColor").val());
//css += "a{color:" + colors.normal + "}";
//css += "a:hover{color:" + colors.darken + "}";
css += "a.preview{color:" + colors.normal + "}";
css += "a.preview:hover{color:" + colors.darken + "}";
// Couleur, polices, épaisseur et capitalisation de caractères des titres
//css += "h1,h2,h3,h4,h5,h6{color:" + $("#themeTitleTextColor").val() + ";font-family:'" + titleFont.replace(/\+/g, " ") + "',sans-serif;font-weight:" + $("#themeTitleFontWeight").val() + ";text-transform:" + $("#themeTitleTextTransform").val() + "}";
css += "h1.preview,h3.preview{color:" + $("#themeTitleTextColor").val() + ";font-family:'" + titleFont.replace(/\+/g, " ") + "',sans-serif;font-weight:" + $("#themeTitleFontWeight").val() + ";text-transform:" + $("#themeTitleTextTransform").val() + "}";
// Police de caractères
css += "body{font-family:'" + textFont.replace(/\+/g, " ") + "',sans-serif}";
// Taille du texte
css += "body,.row > div{font-size:" + $("#themeTextFontSize").val() + "}";
// Couleur du texte
//css += "body,.block h4,input[type='email'],input[type='text'],input[type='password'],.inputFile,select,textarea,.inputFile,.button.buttonGrey,.button.buttonGrey:hover{color:" + $("#themeTextTextColor").val() + "}";
css += "p.preview{color:" + $("#themeTextTextColor").val() + "}";
// Largeur du site
css += ".container{max-width:" + $("#themeSiteWidth").val() + "}";
if ($("#themeSiteWidth").val() === "100%") {
@ -55,6 +90,7 @@ $("input, select").on("change", function() {
// Couleur du site, arrondi sur les coins du site et ombre sur les bords du site
//css += "#site{background-color:" + $("#themeSiteBackgroundColor").val() + ";border-radius:" + $("#themeSiteRadius").val() + ";box-shadow:" + $("#themeSiteShadow").val() + " #212223}";
css += "#site{border-radius:" + $("#themeSiteRadius").val() + ";box-shadow:" + $("#themeSiteShadow").val() + " #212223}";
css += "div.preview{background-color:" + $("#themeSiteBackgroundColor").val() + ";}";
// Ajout du css au DOM
$("#themePreview").remove();
$("<style>")

100
core/module/theme/view/site/site.php
Unescape Escape View File

@ -17,47 +17,67 @@
<div class="block">
<h4>Couleurs</h4>
<div class="row">
<div class="col4">
<?php echo template::text('themeSiteBackgroundColor', [
'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.',
'label' => 'Fond',
'value' => $this->getData(['theme', 'site', 'backgroundColor'])
]); ?>
<div class="col8">
<div class="row">
<div class="col6">
<?php echo template::text('themeSiteBackgroundColor', [
'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.',
'label' => 'Fond',
'value' => $this->getData(['theme', 'site', 'backgroundColor'])
]); ?>
</div>
<div class="col6">
<?php echo template::text('themeTextTextColor', [
'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.',
'label' => 'Texte',
'value' => $this->getData(['theme', 'text', 'textColor'])
]); ?>
</div>
</div>
<div class="row">
<div class="col6">
<?php echo template::text('themeTitleTextColor', [
'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.',
'label' => 'Titres',
'value' => $this->getData(['theme', 'title', 'textColor'])
]); ?>
</div>
<div class="col6">
<?php echo template::text('themeLinkTextColor', [
'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.',
'label' => 'Liens',
'value' => $this->getData(['theme', 'link', 'textColor'])
]); ?>
</div>
</div>
<div class="col6 offset3">
<?php echo template::text('themeButtonBackgroundColor', [
'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.',
'label' => 'Boutons',
'value' => $this->getData(['theme', 'button', 'backgroundColor'])
]); ?>
</div>
</div>
<div class="col4">
<?php echo template::text('themeTextTextColor', [
'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.',
'label' => 'Texte',
'value' => $this->getData(['theme', 'text', 'textColor'])
]); ?>
</div>
<div class="col4">
<?php echo template::text('themeLinkTextColor', [
'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.',
'label' => 'Liens',
'value' => $this->getData(['theme', 'link', 'textColor'])
]); ?>
</div>
</div>
<div class="row">
<div class="col4">
<?php echo template::text('themeTitleTextColor', [
'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.',
'label' => 'Titres',
'value' => $this->getData(['theme', 'title', 'textColor'])
]); ?>
</div>
<div class="col4 offset4">
<?php echo template::text('themeButtonBackgroundColor', [
'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.',
'label' => 'Boutons',
'value' => $this->getData(['theme', 'button', 'backgroundColor'])
]); ?>
<div class="col4 preview">
<h1 class="preview">Aperçu</h1>
<div class="row">
<div class="col8">
<h3 class="preview">Titre 3 </h3>
<p class="preview">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col4">
<p><a href="#" class="preview">Hyperlien</a></p>
<?php echo template::button('themeSiteTest', [
'class' => 'buttonPreview',
'value' => 'Test'
]); ?>
</div>
</div>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save