forked from ZwiiCMS-Team/ZwiiCMS
10.1 Thème
This commit is contained in:
parent
1a1071992e
commit
3960e68365
@ -1,13 +1,15 @@
|
|||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
## version 10.1.000
|
## version 10.1.000
|
||||||
- Nouveauté :
|
- Nouveautés :
|
||||||
- Thème des écrans d'administration modifiable (configuration, utilisateurs : etc.)
|
- Thème des écrans d'administration modifiable (configuration, utilisateurs : etc.)
|
||||||
|
- Thème du site : couleur de l'encadrement et la bordure des blocs.
|
||||||
|
- Thème du menu : couleur du texte de la page active
|
||||||
- Corrections :
|
- Corrections :
|
||||||
- Configuration SMTP : sur-cryptage du mot de passe.
|
- Configuration SMTP : sur-cryptage du mot de passe.
|
||||||
- Quelques corrections liées à l'hébergeur Free.
|
- Quelques corrections liées à l'hébergeur Free.
|
||||||
- Modification :
|
- Modification :
|
||||||
- Optimisation des opérations de disque, mis en cache en lecture des données de pages. Aucun cache en écriture.
|
- Optimisation des opérations de disque, mise en cache en lecture des données de pages. Aucun cache en écriture.
|
||||||
- Mise à jour :
|
- Mise à jour :
|
||||||
- TinyMCE 4.9.10
|
- TinyMCE 4.9.10
|
||||||
|
|
||||||
|
@ -173,8 +173,8 @@ class common {
|
|||||||
$this->user = $this->getData(['user', $this->getInput('ZWII_USER_ID')]);
|
$this->user = $this->getData(['user', $this->getInput('ZWII_USER_ID')]);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Mise ne cache des pages
|
// Mise en cache des pages
|
||||||
$this->page = $this->readPageCache();
|
$this->page = $this->getPageCache();
|
||||||
|
|
||||||
// Construit la liste des pages parents/enfants
|
// Construit la liste des pages parents/enfants
|
||||||
if($this->hierarchy['all'] === []) {
|
if($this->hierarchy['all'] === []) {
|
||||||
@ -435,7 +435,7 @@ class common {
|
|||||||
* Lecture des fichiers de données de page et mise ne cache
|
* Lecture des fichiers de données de page et mise ne cache
|
||||||
* @param @return string données des pages
|
* @param @return string données des pages
|
||||||
*/
|
*/
|
||||||
public function readPageCache() {
|
public function getPageCache() {
|
||||||
// Trois tentatives
|
// Trois tentatives
|
||||||
for($i = 0; $i < 3; $i++) {
|
for($i = 0; $i < 3; $i++) {
|
||||||
$data =json_decode(file_get_contents(self::DATA_DIR.'fr/page.json'), true);
|
$data =json_decode(file_get_contents(self::DATA_DIR.'fr/page.json'), true);
|
||||||
@ -443,7 +443,7 @@ class common {
|
|||||||
return($data);
|
return($data);
|
||||||
}
|
}
|
||||||
elseif($i === 2) {
|
elseif($i === 2) {
|
||||||
exit('Unable to read data file.');
|
exit('Erreur fatale : impossible d\'accéder aux pages');
|
||||||
}
|
}
|
||||||
// Pause de 10 millisecondes
|
// Pause de 10 millisecondes
|
||||||
usleep(10000);
|
usleep(10000);
|
||||||
@ -1409,7 +1409,7 @@ class core extends common {
|
|||||||
// Icône BacktoTop
|
// Icône BacktoTop
|
||||||
$css .= '#backToTop {background-color:' .$this->getData(['theme', 'body', 'toTopbackgroundColor']). ';color:'.$this->getData(['theme', 'body', 'toTopColor']).';}';
|
$css .= '#backToTop {background-color:' .$this->getData(['theme', 'body', 'toTopbackgroundColor']). ';color:'.$this->getData(['theme', 'body', 'toTopColor']).';}';
|
||||||
// Site
|
// Site
|
||||||
$colors = helper::colorVariants($this->getData(['theme', 'text', 'linkTextColor']));
|
$colors = helper::colorVariants($this->getData(['theme', 'text', 'linkColor']));
|
||||||
$css .= 'a{color:' . $colors['normal'] . '}';
|
$css .= 'a{color:' . $colors['normal'] . '}';
|
||||||
$css .= 'a:hover{color:' . $colors['darken'] . '}';
|
$css .= 'a:hover{color:' . $colors['darken'] . '}';
|
||||||
$css .= 'body,.row > div{font-size:' . $this->getData(['theme', 'text', 'fontSize']) . '}';
|
$css .= 'body,.row > div{font-size:' . $this->getData(['theme', 'text', 'fontSize']) . '}';
|
||||||
@ -1433,6 +1433,9 @@ class core extends common {
|
|||||||
$css .= '.button:active,button[type=\'submit\']:active,.pagination a:active{background-color:' . $colors['veryDarken'] . '}';
|
$css .= '.button:active,button[type=\'submit\']:active,.pagination a:active{background-color:' . $colors['veryDarken'] . '}';
|
||||||
$colors = helper::colorVariants($this->getData(['theme', 'title', 'textColor']));
|
$colors = helper::colorVariants($this->getData(['theme', 'title', 'textColor']));
|
||||||
$css .= 'h1,h2,h3,h4,h5,h6{color:' . $colors['normal'] . ';font-family:"' . str_replace('+', ' ', $this->getData(['theme', 'title', 'font'])) . '",sans-serif;font-weight:' . $this->getData(['theme', 'title', 'fontWeight']) . ';text-transform:' . $this->getData(['theme', 'title', 'textTransform']) . '}';
|
$css .= 'h1,h2,h3,h4,h5,h6{color:' . $colors['normal'] . ';font-family:"' . str_replace('+', ' ', $this->getData(['theme', 'title', 'font'])) . '",sans-serif;font-weight:' . $this->getData(['theme', 'title', 'fontWeight']) . ';text-transform:' . $this->getData(['theme', 'title', 'textTransform']) . '}';
|
||||||
|
// Les blocs
|
||||||
|
$colors = helper::colorVariants($this->getData(['theme', 'block', 'backgroundColor']));
|
||||||
|
$css .= '.block {border: 1px solid ' . $this->getdata(['theme','block','borderColor']) . ';}.block h4 {background:'. $colors['normal'] . ';color:' . $colors['text'] .';}';
|
||||||
// Bannière
|
// Bannière
|
||||||
$colors = helper::colorVariants($this->getData(['theme', 'header', 'backgroundColor']));
|
$colors = helper::colorVariants($this->getData(['theme', 'header', 'backgroundColor']));
|
||||||
if($this->getData(['theme', 'header', 'margin'])) {
|
if($this->getData(['theme', 'header', 'margin'])) {
|
||||||
|
@ -829,7 +829,7 @@ footer #footerSocials .zwiico-github:hover {
|
|||||||
|
|
||||||
/* Bloc */
|
/* Bloc */
|
||||||
.block {
|
.block {
|
||||||
border: 1px solid #D8DFE3;
|
/* border: 1px solid #D8DFE3;*/
|
||||||
padding: 20px 20px 10px;
|
padding: 20px 20px 10px;
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
@ -844,7 +844,7 @@ footer #footerSocials .zwiico-github:hover {
|
|||||||
.block h4 {
|
.block h4 {
|
||||||
margin: -20px -20px 10px -20px;
|
margin: -20px -20px 10px -20px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background: #ECEFF1;
|
/* background: #ECEFF1;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Aides */
|
/* Aides */
|
||||||
|
@ -144,11 +144,15 @@ class init extends common {
|
|||||||
'shadow' => '0',
|
'shadow' => '0',
|
||||||
'width' => '960px'
|
'width' => '960px'
|
||||||
],
|
],
|
||||||
|
'block' => [
|
||||||
|
'backgroundBlockColor' => 'rgba(236, 239, 241, 1)',
|
||||||
|
'borderColor' => 'rgba(236, 239, 241, 1)'
|
||||||
|
],
|
||||||
'text' => [
|
'text' => [
|
||||||
'font' => 'Open+Sans',
|
'font' => 'Open+Sans',
|
||||||
'fontSize' => '13px',
|
'fontSize' => '13px',
|
||||||
'textColor' => 'rgba(33, 34, 35, 1)',
|
'textColor' => 'rgba(33, 34, 35, 1)',
|
||||||
'linkTextColor' => 'rgba(74, 105, 189, 1)'
|
'linkColor' => 'rgba(74, 105, 189, 1)'
|
||||||
],
|
],
|
||||||
'title' => [
|
'title' => [
|
||||||
'font' => 'Oswald',
|
'font' => 'Oswald',
|
||||||
@ -174,7 +178,7 @@ class init extends common {
|
|||||||
'backgroundColorButtonRed' => 'rgba(231, 76, 60, 1)',
|
'backgroundColorButtonRed' => 'rgba(231, 76, 60, 1)',
|
||||||
'backgroundColorButtonGreen' => 'rgba(57, 112, 12, 1)',
|
'backgroundColorButtonGreen' => 'rgba(57, 112, 12, 1)',
|
||||||
'backgroundBlockColor' => 'rgba(236, 239, 241, 1)',
|
'backgroundBlockColor' => 'rgba(236, 239, 241, 1)',
|
||||||
'borderBlockColor' => 'rgba(236, 239, 241, 1)',
|
'borderBlockColor' => 'rgba(236, 239, 241, 1)'
|
||||||
],
|
],
|
||||||
];
|
];
|
||||||
|
|
||||||
|
@ -568,18 +568,22 @@ class theme extends common {
|
|||||||
'font' => $this->getInput('themeTextFont'),
|
'font' => $this->getInput('themeTextFont'),
|
||||||
'fontSize' => $this->getInput('themeTextFontSize'),
|
'fontSize' => $this->getInput('themeTextFontSize'),
|
||||||
'textColor' => $this->getInput('themeTextTextColor'),
|
'textColor' => $this->getInput('themeTextTextColor'),
|
||||||
'linkTextColor'=> $this->getInput('themeTextLinkTextColor')
|
'linkColor'=> $this->getInput('themeTextLinkColor')
|
||||||
]]);
|
]]);
|
||||||
$this->setData(['theme', 'site', [
|
$this->setData(['theme', 'site', [
|
||||||
'backgroundColor' => $this->getInput('themeSiteBackgroundColor'),
|
'backgroundColor' => $this->getInput('themeSiteBackgroundColor'),
|
||||||
'radius' => $this->getInput('themeSiteRadius'),
|
'radius' => $this->getInput('themeSiteRadius'),
|
||||||
'shadow' => $this->getInput('themeSiteShadow'),
|
'shadow' => $this->getInput('themeSiteShadow'),
|
||||||
'width' => $this->getInput('themeSiteWidth'),
|
'width' => $this->getInput('themeSiteWidth'),
|
||||||
'margin' => $this->getInput('themeSiteMargin',helper::FILTER_BOOLEAN),
|
'margin' => $this->getInput('themeSiteMargin',helper::FILTER_BOOLEAN)
|
||||||
]]);
|
]]);
|
||||||
$this->setData(['theme', 'button', [
|
$this->setData(['theme', 'button', [
|
||||||
'backgroundColor' => $this->getInput('themeButtonBackgroundColor'),
|
'backgroundColor' => $this->getInput('themeButtonBackgroundColor')
|
||||||
]]);
|
]]);
|
||||||
|
$this->setData(['theme', 'block', [
|
||||||
|
'backgroundColor' => $this->getInput('themeBlockBackgroundColor'),
|
||||||
|
'borderColor' => $this->getInput('themeBlockBorderColor')
|
||||||
|
]]);
|
||||||
// Valeurs en sortie
|
// Valeurs en sortie
|
||||||
$this->addOutput([
|
$this->addOutput([
|
||||||
'notification' => 'Modifications enregistrées',
|
'notification' => 'Modifications enregistrées',
|
||||||
|
@ -8,13 +8,7 @@
|
|||||||
'value' => 'Retour'
|
'value' => 'Retour'
|
||||||
]); ?>
|
]); ?>
|
||||||
</div>
|
</div>
|
||||||
<div class="col2">
|
<div class="col2 offset6">
|
||||||
<?php echo template::button('configHome', [
|
|
||||||
'href' => helper::baseUrl() ,
|
|
||||||
'value' => 'Accueil'
|
|
||||||
]); ?>
|
|
||||||
</div>
|
|
||||||
<div class="col2 offset4">
|
|
||||||
<?php echo template::button('configAdminReset', [
|
<?php echo template::button('configAdminReset', [
|
||||||
'class' => 'buttonRed',
|
'class' => 'buttonRed',
|
||||||
'href' => helper::baseUrl() . 'theme/resetAdmin',
|
'href' => helper::baseUrl() . 'theme/resetAdmin',
|
||||||
|
@ -51,7 +51,6 @@ $("input, select").on("change", function() {
|
|||||||
} else {
|
} else {
|
||||||
css += "nav a:hover{background-color:" + $("#themeMenuActiveColor").val() + ";color:" + $('#themeMenuActiveTextColor').val() + ";}";
|
css += "nav a:hover{background-color:" + $("#themeMenuActiveColor").val() + ";color:" + $('#themeMenuActiveTextColor').val() + ";}";
|
||||||
}
|
}
|
||||||
console.log(css);
|
|
||||||
// Taille, hauteur, épaisseur et capitalisation de caractères du menu
|
// Taille, hauteur, épaisseur et capitalisation de caractères du menu
|
||||||
css += "#toggle span,#menu a{padding:" + $("#themeMenuHeight").val() + ";font-family:'" + menuFont.replace(/\+/g, " ") + "',sans-serif;font-weight:" + $("#themeMenuFontWeight").val() + ";font-size:" + $("#themeMenuFontSize").val() + ";text-transform:" + $("#themeMenuTextTransform").val() + "}";
|
css += "#toggle span,#menu a{padding:" + $("#themeMenuHeight").val() + ";font-family:'" + menuFont.replace(/\+/g, " ") + "',sans-serif;font-weight:" + $("#themeMenuFontWeight").val() + ";font-size:" + $("#themeMenuFontSize").val() + ";text-transform:" + $("#themeMenuTextTransform").val() + "}";
|
||||||
// Alignement du menu
|
// Alignement du menu
|
||||||
|
@ -15,9 +15,9 @@
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col12">
|
<div class="col12">
|
||||||
<div class="block">
|
<div class="block">
|
||||||
<h4>Couleurs</h4>
|
<h4>Couleur</h4>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col3">
|
<div class="col6">
|
||||||
<?php echo template::text('themeMenuTextColor', [
|
<?php echo template::text('themeMenuTextColor', [
|
||||||
'class' => 'colorPicker',
|
'class' => 'colorPicker',
|
||||||
'help' => 'Le curseur horizontal règle le niveau de transparence.',
|
'help' => 'Le curseur horizontal règle le niveau de transparence.',
|
||||||
@ -25,36 +25,43 @@
|
|||||||
'value' => $this->getData(['theme', 'menu', 'textColor'])
|
'value' => $this->getData(['theme', 'menu', 'textColor'])
|
||||||
]); ?>
|
]); ?>
|
||||||
</div>
|
</div>
|
||||||
<div class="col3">
|
<div class="col6">
|
||||||
<?php echo template::text('themeMenuBackgroundColor', [
|
<?php echo template::text('themeMenuBackgroundColor', [
|
||||||
'class' => 'colorPicker',
|
'class' => 'colorPicker',
|
||||||
'help' => 'Le curseur horizontal règle le niveau de transparence.',
|
'help' => 'Le curseur horizontal règle le niveau de transparence.',
|
||||||
'label' => 'Fond',
|
'label' => 'Fond',
|
||||||
'value' => $this->getData(['theme', 'menu', 'backgroundColor'])
|
'value' => $this->getData(['theme', 'menu', 'backgroundColor'])
|
||||||
]); ?>
|
]); ?>
|
||||||
</div>
|
</div>
|
||||||
<div class="col3">
|
|
||||||
<?php echo template::text('themeMenuActiveTextColor', [
|
|
||||||
'class' => 'colorPicker',
|
|
||||||
'help' => 'Le curseur horizontal règle le niveau de transparence.',
|
|
||||||
'label' => 'Texte page active',
|
|
||||||
'value' => $this->getData(['theme', 'menu', 'activeTextColor'])
|
|
||||||
]); ?>
|
|
||||||
</div>
|
|
||||||
<div class="col3 verticalAlignBottom">
|
|
||||||
<?php
|
|
||||||
echo template::checkbox('themeMenuActiveColorAuto', true, 'Fond automatique.', [
|
|
||||||
'checked' => $this->getData(['theme', 'menu', 'activeColorAuto']),
|
|
||||||
'help' => 'La couleur de fond de la page active peut être définie automatique ou selon une couleur définie, comme par exemple celle de fond des pages.'
|
|
||||||
]); ?>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
</div>
|
||||||
<div class="col3 offset9">
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col12">
|
||||||
|
<div class="block">
|
||||||
|
<h4>Page active</h4>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col4">
|
||||||
|
<?php echo template::text('themeMenuActiveTextColor', [
|
||||||
|
'class' => 'colorPicker',
|
||||||
|
'help' => 'Le curseur horizontal règle le niveau de transparence.',
|
||||||
|
'label' => 'Texte',
|
||||||
|
'value' => $this->getData(['theme', 'menu', 'activeTextColor'])
|
||||||
|
]); ?>
|
||||||
|
</div>
|
||||||
|
<div class="col4 verticalAlignBottom">
|
||||||
|
<?php
|
||||||
|
echo template::checkbox('themeMenuActiveColorAuto', true, 'Couleur du fond automatique', [
|
||||||
|
'checked' => $this->getData(['theme', 'menu', 'activeColorAuto']),
|
||||||
|
'help' => 'La couleur de fond de la page active peut être définie automatique ou selon une couleur définie, comme par exemple celle de fond des pages.'
|
||||||
|
]); ?>
|
||||||
|
</div>
|
||||||
|
<div class="col4">
|
||||||
<?php echo template::text('themeMenuActiveColor', [
|
<?php echo template::text('themeMenuActiveColor', [
|
||||||
'class' => 'colorPicker',
|
'class' => 'colorPicker',
|
||||||
'help' => 'Couleur de fond de la page sélectionnée dans le menu.<br>Le curseur horizontal règle le niveau de transparence.',
|
'help' => 'Couleur de fond de la page sélectionnée dans le menu.<br>Le curseur horizontal règle le niveau de transparence.',
|
||||||
'label' => 'Fond active',
|
'label' => 'Fond',
|
||||||
'value' => $this->getData(['theme', 'menu', 'activeColor'])
|
'value' => $this->getData(['theme', 'menu', 'activeColor'])
|
||||||
]); ?>
|
]); ?>
|
||||||
</div>
|
</div>
|
||||||
|
@ -14,13 +14,6 @@
|
|||||||
* Chargement de l'aperçu
|
* Chargement de l'aperçu
|
||||||
*/
|
*/
|
||||||
$( document).ready(function() {
|
$( document).ready(function() {
|
||||||
updateDOM();
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Aperçu en direct
|
|
||||||
*/
|
|
||||||
$("input, select").on("change",function() {
|
|
||||||
/**
|
/**
|
||||||
* Option de marge si la taille n'est pas fluide
|
* Option de marge si la taille n'est pas fluide
|
||||||
*/
|
*/
|
||||||
@ -30,77 +23,94 @@ $("input, select").on("change",function() {
|
|||||||
} else {
|
} else {
|
||||||
$("#themeSiteMargin").addClass("enabled");
|
$("#themeSiteMargin").addClass("enabled");
|
||||||
}
|
}
|
||||||
updateDOM();
|
var backgroundImage = <?php echo json_encode(helper::baseUrl(false) . self::FILE_DIR . 'source/' . $this->getData(['theme','body','image'])); ?>;
|
||||||
|
var backgroundcolor = <?php echo json_encode($this->getdata(['theme','body','backgroundColor'])); ?>;
|
||||||
|
css = "div.bodybackground{background-color:" + backgroundcolor + "; background-image: url(" + backgroundImage + ");background-size:cover;}";
|
||||||
|
css += "div.bgPreview{padding: 5px;background-color:" + $("#themeSiteBackgroundColor").val() + ";}";
|
||||||
|
$("#themePreview").remove();
|
||||||
|
$("<style>")
|
||||||
|
.attr("type", "text/css")
|
||||||
|
.attr("id", "themePreview")
|
||||||
|
.text(css)
|
||||||
|
.appendTo("head");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Aperçu en direct
|
||||||
|
*/
|
||||||
|
$("input, select").on("change",function() {
|
||||||
|
|
||||||
function updateDOM() {
|
/**
|
||||||
|
* Aperçu dans la boîte
|
||||||
|
*/
|
||||||
|
|
||||||
/**
|
// Import des polices de caractères
|
||||||
* Aperçu dans la boîte
|
var titleFont = $("#themeTitleFont").val();
|
||||||
*/
|
var textFont = $("#themeTextFont").val();
|
||||||
|
var css = "@import url('https://fonts.googleapis.com/css?family=" + titleFont + "|" + textFont + "');";
|
||||||
|
// Couleurs des boutons
|
||||||
|
var colors = core.colorVariants($("#themeButtonBackgroundColor").val());
|
||||||
|
css += ".button.buttonSubmitPreview{background-color:" + colors.normal + ";}";
|
||||||
|
css += ".button.buttonSubmitPreview:hover{background-color:" + colors.darken + "}";
|
||||||
|
css += ".button.buttonSubmitPreview{color:" + colors.text + ";}";
|
||||||
|
|
||||||
// Import des polices de caractères
|
// Couleurs des liens
|
||||||
var titleFont = $("#themeTitleFont").val();
|
var colors = core.colorVariants($("#themeTextLinkColor").val());
|
||||||
var textFont = $("#themeTextFont").val();
|
css += "a.urlPreview{color:" + colors.normal + "}";
|
||||||
var css = "@import url('https://fonts.googleapis.com/css?family=" + titleFont + "|" + textFont + "');";
|
css += "a.urlPreview:hover{color:" + colors.darken + "}";
|
||||||
// Couleurs des boutons
|
// Couleur, polices, épaisseur et capitalisation de caractères des titres
|
||||||
var colors = core.colorVariants($("#themeButtonBackgroundColor").val());
|
css += ".headerPreview,.headerPreview{color:" + $("#themeTitleTextColor").val() + ";font-family:'" + titleFont.replace(/\+/g, " ") + "',sans-serif;font-weight:" + $("#themeTitleFontWeight").val() + ";text-transform:" + $("#themeTitleTextTransform").val() + "}";
|
||||||
css += ".button.buttonSubmitPreview{background-color:" + colors.normal + ";}";
|
// Police de caractères
|
||||||
css += ".button.buttonSubmitPreview:hover{background-color:" + colors.darken + "}";
|
// Police + couleur
|
||||||
css += ".button.buttonSubmitPreview{color:" + colors.text + ";}";
|
css += ".textPreview,.urlPreview{color:" + $("#themeTextTextColor").val() + ";font-family:'" + textFont.replace(/\+/g, " ") + "',sans-serif; font-size:" + $("#themeTextFontSize").val() + ";}";
|
||||||
|
// Couleur des liens
|
||||||
|
//css += "a.preview,.buttonSubmitPreview{font-family:'" + textFont.replace(/\+/g, " ") + "',sans-serif}";
|
||||||
|
|
||||||
// Couleurs des liens
|
// Taille du texte
|
||||||
colors = core.colorVariants($("#themeLinkTextColor").val());
|
// Couleur du texte
|
||||||
css += "a.urlPreview{color:" + colors.normal + "}";
|
css += "p.preview{color:" + $("#themeTextTextColor").val() + "}";
|
||||||
css += "a.urlPreview:hover{color:" + colors.darken + "}";
|
|
||||||
// Couleur, polices, épaisseur et capitalisation de caractères des titres
|
|
||||||
css += ".headerPreview,.headerPreview{color:" + $("#themeTitleTextColor").val() + ";font-family:'" + titleFont.replace(/\+/g, " ") + "',sans-serif;font-weight:" + $("#themeTitleFontWeight").val() + ";text-transform:" + $("#themeTitleTextTransform").val() + "}";
|
|
||||||
// Police de caractères
|
|
||||||
// Police + couleur
|
|
||||||
css += ".textPreview,.urlPreview{color:" + $("#themeTextTextColor").val() + ";font-family:'" + textFont.replace(/\+/g, " ") + "',sans-serif; font-size:" + $("#themeTextFontSize").val() + ";}";
|
|
||||||
// Couleur des liens
|
|
||||||
//css += "a.preview,.buttonSubmitPreview{font-family:'" + textFont.replace(/\+/g, " ") + "',sans-serif}";
|
|
||||||
|
|
||||||
// Taille du texte
|
/**
|
||||||
// Couleur du texte
|
* Aperçu réel
|
||||||
css += "p.preview{color:" + $("#themeTextTextColor").val() + "}";
|
*/
|
||||||
|
|
||||||
/**
|
// Taille du site
|
||||||
* Aperçu réel
|
if ($("#themeSiteWidth").val() === "750px") {
|
||||||
*/
|
css += ".button, button{font-size:0.8em;}";
|
||||||
|
} else {
|
||||||
|
css += ".button, button{font-size:1em;}";
|
||||||
|
}
|
||||||
|
// Largeur du site
|
||||||
|
var margin = $("#themeSiteMargin").is(":checked") ? 0 : '20px' ;
|
||||||
|
css += ".container{max-width:" + $("#themeSiteWidth").val() + "}";
|
||||||
|
if ($("#themeSiteWidth").val() === "100%") {
|
||||||
|
css += "#site{margin: 0px auto;} body{margin:0 auto;} #bar{margin:0 auto;} body > header{margin:0 auto;} body > nav {margin: 0 auto;} body > footer {margin:0 auto;}";
|
||||||
|
} else {
|
||||||
|
css += "#site{margin: " + margin + " auto !important;} body{margin:0px 10px;} #bar{margin: 0 -10px;} body > header{margin: 0 -10px;} body > nav {margin: 0 -10px;} body > footer {margin: 0 -10px;} ";
|
||||||
|
}
|
||||||
|
// 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}";
|
||||||
|
var backgroundImage = <?php echo json_encode(helper::baseUrl(false) . self::FILE_DIR . 'source/' . $this->getData(['theme','body','image'])); ?>;
|
||||||
|
var backgroundcolor = <?php echo json_encode($this->getdata(['theme','body','backgroundColor'])); ?>;
|
||||||
|
css += "div.bodybackground{background-color:" + backgroundcolor + "; background-image: url(" + backgroundImage + ");background-size:cover;}";
|
||||||
|
css += "div.bgPreview{padding: 5px;background-color:" + $("#themeSiteBackgroundColor").val() + ";}";
|
||||||
|
|
||||||
|
// Les blocs
|
||||||
|
|
||||||
// Taille du site
|
var colors = core.colorVariants($("#themeBlockBackgroundColor").val());
|
||||||
if ($("#themeSiteWidth").val() === "750px") {
|
css += ".block.preview {padding: 20px 20px 10px;margin: 20px 0; word-wrap: break-word;border-radius: 2px;border: 1px solid " + $("#themeBlockBorderColor").val() + ";}.block.preview h4.preview {background: " + colors.normal + ";color:" + colors.text + ";margin: -20px -20px 10px -20px; padding: 10px;}";
|
||||||
css += ".button, button{font-size:0.8em;}";
|
|
||||||
} else {
|
|
||||||
css += ".button, button{font-size:1em;}";
|
|
||||||
}
|
|
||||||
// Largeur du site
|
|
||||||
var margin = $("#themeSiteMargin").is(":checked") ? 0 : '20px' ;
|
|
||||||
css += ".container{max-width:" + $("#themeSiteWidth").val() + "}";
|
|
||||||
if ($("#themeSiteWidth").val() === "100%") {
|
|
||||||
css += "#site{margin: 0px auto;} body{margin:0 auto;} #bar{margin:0 auto;} body > header{margin:0 auto;} body > nav {margin: 0 auto;} body > footer {margin:0 auto;}";
|
|
||||||
} else {
|
|
||||||
css += "#site{margin: " + margin + " auto !important;} body{margin:0px 10px;} #bar{margin: 0 -10px;} body > header{margin: 0 -10px;} body > nav {margin: 0 -10px;} body > footer {margin: 0 -10px;} ";
|
|
||||||
}
|
|
||||||
// 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}";
|
|
||||||
var backgroundImage = <?php echo json_encode(helper::baseUrl(false) . self::FILE_DIR . 'source/' . $this->getData(['theme','body','image'])); ?>;
|
|
||||||
var backgroundcolor = <?php echo json_encode($this->getdata(['theme','body','backgroundColor'])); ?>;
|
|
||||||
css += "div.bodybackground{background-color:" + backgroundcolor + "; background-image: url(" + backgroundImage + ");background-size:cover;}";
|
|
||||||
css += "div.bgPreview{background-color:" + $("#themeSiteBackgroundColor").val() + ";}";
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Injection dans le DOM
|
* Injection dans le DOM
|
||||||
*/
|
*/
|
||||||
// Ajout du css au DOM
|
// Ajout du css au DOM
|
||||||
$("#themePreview").remove();
|
$("#themePreview").remove();
|
||||||
$("<style>")
|
$("<style>")
|
||||||
.attr("type", "text/css")
|
.attr("type", "text/css")
|
||||||
.attr("id", "themePreview")
|
.attr("id", "themePreview")
|
||||||
.text(css)
|
.text(css)
|
||||||
.appendTo("head");
|
.appendTo("head");
|
||||||
|
|
||||||
}
|
});
|
@ -46,14 +46,32 @@
|
|||||||
]); ?>
|
]); ?>
|
||||||
</div>
|
</div>
|
||||||
<div class="col6">
|
<div class="col6">
|
||||||
<?php echo template::text('themeTextLinkTextColor', [
|
<?php echo template::text('themeTextLinkColor', [
|
||||||
'class' => 'colorPicker',
|
'class' => 'colorPicker',
|
||||||
'help' => 'Le curseur horizontal règle le niveau de transparence.',
|
'help' => 'Le curseur horizontal règle le niveau de transparence.',
|
||||||
'label' => 'Liens',
|
'label' => 'Liens',
|
||||||
'value' => $this->getData(['theme', 'text', 'linkTextColor'])
|
'value' => $this->getData(['theme', 'text', 'linkColor'])
|
||||||
]); ?>
|
]); ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col6">
|
||||||
|
<?php echo template::text('themeBlockBackgroundColor', [
|
||||||
|
'class' => 'colorPicker',
|
||||||
|
'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.',
|
||||||
|
'label' => 'Arrière-plan des blocs',
|
||||||
|
'value' => $this->getData(['theme', 'block', 'backgroundColor'])
|
||||||
|
]); ?>
|
||||||
|
</div>
|
||||||
|
<div class="col6">
|
||||||
|
<?php echo template::text('themeBlockBorderColor', [
|
||||||
|
'class' => 'colorPicker',
|
||||||
|
'help' => 'Couleur visible en l\'absence d\'une image.<br />Le curseur horizontal règle le niveau de transparence.',
|
||||||
|
'label' => 'Bordure des blocs',
|
||||||
|
'value' => $this->getData(['theme', 'block', 'borderColor'])
|
||||||
|
]); ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col6 offset3">
|
<div class="col6 offset3">
|
||||||
<?php echo template::text('themeButtonBackgroundColor', [
|
<?php echo template::text('themeButtonBackgroundColor', [
|
||||||
@ -66,23 +84,28 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col4 bodybackground">
|
<div class="col4 bodybackground">
|
||||||
<div class="bgPreview">
|
<div class="bgPreview">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col12">
|
<div class="col8">
|
||||||
<h1 class="headerPreview">Titre </h1>
|
<h1 class="headerPreview">Aperçu </h1>
|
||||||
<h3 class="headerPreview">Sous-Titre </h3>
|
<h3 class="headerPreview">Sous-Titre </h3>
|
||||||
<p class="textPreview">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
||||||
<p><a href="#" class="urlPreview">Lorem ipsum dolor sit amet.</a></p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="col4">
|
||||||
<div class="row">
|
|
||||||
<div class="col4 offset8">
|
|
||||||
<?php echo template::button('themeSiteSubmitButtonPreview', [
|
<?php echo template::button('themeSiteSubmitButtonPreview', [
|
||||||
'class' => 'buttonSubmitPreview',
|
'class' => 'buttonSubmitPreview',
|
||||||
'value' => 'Bouton'
|
'value' => 'Bouton'
|
||||||
]); ?>
|
]); ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col12">
|
||||||
|
<div class="block preview">
|
||||||
|
<h4 class="preview">Block</h4>
|
||||||
|
<p class="textPreview">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||||
|
<p><a href="#" class="urlPreview">Lorem ipsum dolor sit amet.</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user