forked from ZwiiCMS-Team/ZwiiCMS
[9.2.25] Preview du site
This commit is contained in:
Fred Tempez
parent
2615198d7a
commit
8c4ebad69a
@ -30,3 +30,10 @@ textarea,
|
||||
.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);
|
||||
}
|
||||
@ -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>")
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user