Evolution #30925
[Themes] exposer les variantes définies en niveau01 sous forme de variables
0%
Description
Lorsque l'on définit un niveau01 on peut préciser des valeurs de couleur qui seront utilisée par les variantes colorées des themes.
Actuellement ces variantes sont injectées "en dur" dans des parametres `style` de balises structurant les pages.
De manière à pouvoir exploiter ces valeurs de couleurs dans les css des themes, je propose d'injecter ces valeurs sous forme de variables css :
dans le fichier `src/Cadoles/CoreBundle/Resources/views/base.html.twig` à la ligne 32, sous la balise `<style>` et avant le block `{% block localstyle %}` insérer le code :
:root{
--colorbody: #{{ color['colorbody'] }};
--main: #{{ color['main'] }};
--mainR: {{ color['mainrgb']['r'] }};
--mainG: {{ color['mainrgb']['g'] }};
--mainB: {{ color['mainrgb']['b'] }};
--dark: #{{ color['dark'] }};
--darkR: {{ color['darkrgb']['r'] }};
--darkG: {{ color['darkrgb']['g'] }};
--darkB: {{ color['darkrgb']['b'] }};
--light: #{{ color['light'] }};
--lightR: {{ color['lightrgb']['r'] }};
--lightG: {{ color['lightrgb']['g'] }};
--lightB: {{ color['lightrgb']['b'] }};
--fontcolorhover: #{{ color['fontcolorhover'] }};
--fontcolorhoverdark: #{{ color['fontcolorhoverdark'] }};
}
Dès lors toutes ces variables sont accessibles depuis le `style.css` d'un thème et offrent un peu plus de possibilités...
Pierre
ps: en pj un apercu de l'accès aux variables depuis l'interface dev d'un navigateur
Historique
#1 Mis à jour par Pierre CADEOT il y a plus de 3 ans
on peut également rajouter le reste :
--header: url(/{{ alias }}/{{ header }});
--logo: url(/{{ alias }}/{{ logo }});
# INUTILE :
# --niveau01: "{% if not app.session.get('sublogo') is empty %}/{{ alias }}/{{ app.session.get('sublogo') }}{% endif %}";
# la var(--header) prend *deja* la valeur du header niveau01 si défini
--heightniveau01: {{ heightheader-40 }};
--fgheader: {{ fgheader }};
--heightheader: {{ heightheader }};
--
edit header et logo : url(xxx)
#2 Mis à jour par Pierre CADEOT il y a plus de 3 ans
- Fichier theme-metice.tgz ajouté
- Fichier cssvars-exemples.jpg Voir ajouté
quelques exemples d'utilisation avec le theme "métice" joint
#3 Mis à jour par Arnaud FORNEROT il y a plus de 3 ans
- sublogo c'est un logo en plus de celui du site qui vient se coller à lui si en a déclaré un dans le niveau01 dont je vais rajouter en variable CSS
- heightniveau01 : c'est quoi cela ? je ne vois à quoi cela correspond
Sinon voici ce que j'ai implémenté
:root {
--colorbody: #dbdbdb;
--main: #f15a22;
--mainR: 241;
--mainG: 90;
--mainB: 34;
--dark: #bf2800;
--darkR: 191;
--darkG: 40;
--darkB: 0;
--light: #ff8c54;
--lightR: 255;
--lightG: 140;
--lightB: 84;
--fontcolorhover: #ffffff;
--fontcolorhoverdark: #cdcdcd;
--fontfacetitle: Anton-Regular;
--fontfacebody: Helvetica;
--header: url(/ninegate/uploads/header/header.png);
--logo: url(/ninegate/uploads/logo/logo.png);
--sublogo: url(/ninegate/uploads/niveau01/5fa543ebb7c0f.png);
--fgheader: 1;
--heightheader: 100;
}
Sinon j'ai encore des problèmes avec ton zip du thèmes metice
Tu pourrais me le déposer sur un cloud ?
#4 Mis à jour par Arnaud FORNEROT il y a plus de 3 ans
- Tracker changé de Demande à Evolution
Intégration des variables css dans la version de dev 1.0+3-99
Me manque ton thème qui se décompresse en erreur
#5 Mis à jour par Arnaud FORNEROT il y a plus de 3 ans
- Statut changé de Nouveau à Résolu
pas d'intégration pour l'instant du thème metice dans les sources on peut donc considérer cette demande comme réalisée
#6 Mis à jour par Arnaud FORNEROT il y a plus de 3 ans
- Version cible mis à Envole 6.16
#7 Mis à jour par Arnaud FORNEROT il y a plus de 3 ans
- Statut changé de Résolu à Fermé