====== Personnalisation du thème PluXML pour Le Site du Gnu-Bricoleur ====== Ici sont regroupées l’ensemble des modifications que j'ai effectué sur le thème de base pour avoir quelque chose d'un peu personnalisé. Comme je travail à un script pour automatiser le tout lors des prochaines mises à jour, j'utilise cette page comme pense bête. Si ça peut servir à quelqu'un au passage, tant mieux ! Je n'ai pas trouvé beaucoup d'info concrètes sur internet sur comment faire son propre thème. Je suis donc parti du thème de base que je trouvait pas mal et je l'ai un peu "tweaker". Les fichiers de thèmes sont situés tout simplement dans le dossier "themes" de l'arborescence PluXML. Il y a dans ce dossier un sous-dossier par thème. La description du thème, son nom, le nom de l'auteur et la date sont dans le fichier "info.xml". A modifier en fonction pour pouvoir reconnaître son thème et l'appliquer depuis l'interface admin. ===== Modifier les couleurs ===== {{ :capture_du_2017-07-12_20_59_23.png?200 |}} {{ :capture_du_2017-07-12_20_59_23.png?200 |}} ==== Couleurs de fond ==== Un simple Ctrl+H dans le fichier theme.css pour remplacer tout le blanc (#fff) du fond de page et des menus par du jaune dans mon cas (#ff0).(je dit pas que c'est de bon goût ;-) mais au moins c'est joyeux !) Attention à la couleur du texte du titre (dans le sélecteur .header) et à la couleur de la partie cliquable du titre (sélecteur .header a). Finalement, j'ai mit jaune aussi :-). ==== Couleur du bandeau de titre ==== Pour le bandeau bleu, je souhaitais mettre le dégradé chouette de la barre des tâches de cinnamon [[astuces:linux_mint_de|(voir article dédié)]]. Il suffit de modifier le paramètre background de .header avec la ligne suivante pour ajouter le dégradé. .header { background: linear-gradient(rgba(70, 70, 70, 0.9), rgba(50, 50, 50, 0.9)); color: #fff; padding-bottom: 6rem; padding-top: 6rem; text-align: center; } ==== Petit bonus ==== Je me souvient que le [[https://lehollandaisvolant.net/|Holandais Volant]] avait un effet très chouette sur le titre de son blog, des flammes apparaissaient lorsque la souris restait suffisamment longtemps posé dessus. Il me semble qu'il avait d’ailleurs écrit un article à ce sujet mais je n'ai pas réussi à le retrouver. L'effet n'étant plus présent sur la version actuelle de son site, impossible de remettre la main sur le morceau de code. Impossible ? Non ! En effet, un petit tour sur Wayback Machine et on retrouve une version de la page incluant cet effet, avec l'inspecteur de code de Firefox, c'est alors facile de trouver le nom de l'animation ("fire", quelle originalité !) et de la le morceau de code correspondant. La beauté du truc c'est que l'animation est entièrement codée en CSS : @keyframes fire { 0%, 50%, 100% { text-shadow: #FFFF00 0px -1px 1px, #FFCC00 1px -3px 2px, #FF9900 0px -4px 6px, #FF6600 2px -7px 8px, #FF3300 1px -9px 9px, #FF0000 1px -10px 15px; } 20%, 40% { text-shadow: #FFFF00 1px -1px 2px, #FFCC00 2px -3px 3px, #FF9900 1px -5px 6px, #FF6600 3px -6px 8px, #FF3300 3px -8px 9px, #FF0000 3px -11px 13px; } 30% { text-shadow: #FFFF00 2px -1px 2px, #FFCC00 3px -3px 3px, #FF9900 2px -6px 7px, #FF6600 5px -5px 9px, #FF3300 6px -7px 10px, #FF0000 5px -12px 15px; } 60% { text-shadow: #FFFF00 -1px -1px 2px, #FFCC00 -0px -3px 3px, #FF9900 -1px -3px 6px, #FF6600 -3px -8px 8px, #FF3300 -3px -10px 9px, #FF0000 -3px -11px 13px; } 70% { text-shadow: #FFFF00 -2px -1px 2px, #FFCC00 -1px -3px 3px, #FF9900 -2px -2px 7px, #FF6600 -5px -9px 9px, #FF3300 -6px -9px 8px, #FF0000 -5px -12px 11px; } } h1 a:hover { animation: fire .3s infinite ease alternate 1s; -webkit-animation: fire .3s infinite ease-in-out alternate 1s; } /* Crédits : Le Hollandais Volant (https://lehollandaisvolant.net/)*/ L'animation en elle même est très réussie, j'ai juste modifié les couleurs pour qu'elles correspondent au thème du site. @keyframes fire { 0%, 50%, 100% { text-shadow: #FFFF00 0px -1px 1px, #FFCC00 1px -3px 2px, #FFFF00 0px -4px 6px, #FFCC00 2px -7px 8px, #FFFF00 1px -9px 9px, #FFCC00 1px -10px 15px; } 20%, 40% { text-shadow: #FFFF00 1px -1px 2px, #FFCC00 2px -3px 3px, #FFFF00 1px -5px 6px, #FFCC00 3px -6px 8px, #FFFF00 3px -8px 9px, #FFCC00 3px -11px 13px; } 30% { text-shadow: #FFFF00 2px -1px 2px, #FFCC00 3px -3px 3px, #FFFF00 2px -6px 7px, #FFCC00 5px -5px 9px, #FFFF00 6px -7px 10px, #FFCC00 5px -12px 15px; } 60% { text-shadow: #FFFF00 -1px -1px 2px, #FFCC00 -0px -3px 3px, #FFFF00 -1px -3px 6px, #FFCC00 -3px -8px 8px, #FFFF00 -3px -10px 9px, #FFCC00 -3px -11px 13px; } 70% { text-shadow: #FFFF00 -2px -1px 2px, #FFCC00 -1px -3px 3px, #FFFF00 -2px -2px 7px, #FFCC00 -5px -9px 9px, #FFFF00 -6px -9px 8px, #FFC00 -5px -12px 11px; } } h1 a:hover { animation: fire .3s infinite ease alternate 1s; -webkit-animation: fire .3s infinite ease-in-out alternate 1s; } ==== Couleur des titres du menu ==== La couleur des titres du menu est déterminée par le CSS suivant : .static.group.active, .static.menu.active a { color: #e42929; } et, .static.group.noactive, .static.menu.noactive a { color: #258fd6; } Pour avoir quelque chose de moins flashy que du bleu et rouge, on modifie ainsi : .static.group.active, .static.menu.active a { color: #46462D; font-weight:bold; } .static.group.noactive, .static.menu.noactive a { color: #46462D; } ==== Couleur des liens ==== Les règles pour les liens sont contenues dans plucss.css. Néanmoins, il est déconseillé de modifier ce fichier pour faciliter le travail lors des mises à jour. Comme PluXML est bien fait, le fichier theme.css est chargé après et donc toute règle ajouté à ce fichier prévaut sur celle de plucss.css. Cela permet de redéfinir les règles suivantes pour les liens : a:active, a:hover { color: #444; text-decoration: underline; } a { color: #171717; text-decoration: none; } Bizarrement, les règles pour les titres d'articles (qui sont aussi des liens) sont dans theme.css. On les édite ainsi. .article header h2 a { color: #333; } .article header h2 a:hover { color: #444; text-decoration: none; } Comme le titre du site est aussi un lien, il faut l’empêcher de devenir gris quand quelqu'un passe la souris dessus, on modifie donc la règle sur le .header pour spécifier une couleur. .header a:hover { text-decoration: none; color: #ff0; } ===== Modifications structurelles ===== J'aime assez le thème par défaut donc je n'ai pas changé grand chose mais j'aurai bien aimé avoir un logo à coté du titre de mon site et deux trois autres bricoles. ==== Logo à coté du titre ==== Il suffit de modifier le fichier header.php du thème (racine du thème) pour modifier la ligne h1 de la façon suivante :

logo du sitemainTitle('link'); ?>

subTitle(); ?>

De cette façon, on inclus une image de taille fixe à coté du titre. La taille du titre ne dépendant pas de la taille de la page (apparemment), on obtient un résultat qui sera harmonieux quelque soit la taille de l'écran. Néanmoins, avec cette syntaxe, le bas de l'image est aligné avec le bas du texte et ce n'est pas très beau. On résout ce soucis avec la règle css suivante : .header img { vertical-align: middle; } ==== Zone de texte un peu plus visible ==== Pour l'instant, notre texte est gris foncé sur un fond jaune pétant ce n'est pas très lisible et c'est un peu agressif. Pour trouver le nom de la zone contenant le texte, on utilise l'inspecteur de Firefox. On ajoute ensuite une règle css pour ajouter un fond transparent et mettre une petite ombre : .grid { background-color: rgba(255, 255, 255, 0.3); box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7); } ==== Favicon ==== Rien de compliqué, il suffit de modifier l'image favicon.png dans le dossier img du thème. Il faut parfois vider le cache du navigateur pour voir le favicon apparaître. ==== Sidebar ==== J'ai ajouté à la suite de sidebar.php les lignes suivantes afin d'étoffer un peu la sidebar. Ces lignes ajoutent des liens vers des sites que je fréquente souvent, des images et précisent la licence.

lang('HACKER VAILLANT …'); ?>

lang('BLOGS FAVORIS'); ?>

lang('FIREFOX FOREVER'); ?>

lang('LICENCE'); ?>

===== Codes complet ===== Pour finir, voici les fichiers complet : /* # ------------------ BEGIN LICENSE BLOCK ------------------ # # This file is part of PluXml : http://www.pluxml.org # # Package: theme.css # Copyright (c) 2017 PluXml # Authors Jos, Stephane F. # Licensed under the GPL license. # See http://www.gnu.org/licenses/gpl.html # # ------------------- END LICENSE BLOCK ------------------- */ /* ----- Menu ----- */ .nav { background-color: #ff0; height: 4rem; text-align: left; margin-top: 1rem; } .nav ul { line-height: 3rem; } @media (max-width: 767px) { .nav { height: auto; max-height: 200px; overflow-y: auto; text-align: left; margin-top: 0; } .nav>.container { padding: 0; } .responsive-menu label { background-color: #ff0; color: #333; font-size: 3.5rem; margin: .75rem; text-align: right; } .responsive-menu label:before { content: '\039e'; } } li a.active { color: #e42929; } /* ---------- Header ---------- */ body { background-color: #ff0; font-size: 1.6rem; } @media (min-width: 64rem) { .container { padding-left: 15rem; padding-right: 15rem; } } .header { background: linear-gradient(rgba(70, 70, 70, 0.9), rgba(50, 50, 50, 0.9)); color: #ff0; padding-bottom: 6rem; padding-top: 6rem; text-align: center; } .header a { color: #ff0; } .header a:hover { text-decoration: none; color: #ff0; } @keyframes fire { 0%, 50%, 100% { text-shadow: #FFFF00 0px -1px 1px, #FFCC00 1px -3px 2px, #FFFF00 0px -4px 6px, #FFCC00 2px -7px 8px, #FFFF00 1px -9px 9px, #FFCC00 1px -10px 15px; } 20%, 40% { text-shadow: #FFFF00 1px -1px 2px, #FFCC00 2px -3px 3px, #FFFF00 1px -5px 6px, #FFCC00 3px -6px 8px, #FFFF00 3px -8px 9px, #FFCC00 3px -11px 13px; } 30% { text-shadow: #FFFF00 2px -1px 2px, #FFCC00 3px -3px 3px, #FFFF00 2px -6px 7px, #FFCC00 5px -5px 9px, #FFFF00 6px -7px 10px, #FFCC00 5px -12px 15px; } 60% { text-shadow: #FFFF00 -1px -1px 2px, #FFCC00 -0px -3px 3px, #FFFF00 -1px -3px 6px, #FFCC00 -3px -8px 8px, #FFFF00 -3px -10px 9px, #FFCC00 -3px -11px 13px; } 70% { text-shadow: #FFFF00 -2px -1px 2px, #FFCC00 -1px -3px 3px, #FFFF00 -2px -2px 7px, #FFCC00 -5px -9px 9px, #FFFF00 -6px -9px 8px, #FFC00 -5px -12px 11px; } } h1 a:hover { animation: fire .3s infinite ease alternate 1s; -webkit-animation: fire .3s infinite ease-in-out alternate 1s; } /* ---------- Main ---------- */ .main { background-color: #ff0; padding-bottom: 6rem; } .repertory { margin-top: 4rem; } .pagination { margin: 3rem 0 3rem 0; } .pagination a { background-color: #258fd6; border-radius: .3rem; color: #ff0; padding: .9rem .7rem; transition-duration: .2s; } .pagination a:hover { background-color: #3a6c96; color: #ff0; text-decoration: none; } .pagination span:first-letter, .pagination a:first-letter { text-transform: uppercase; } .p_first, .p_prev, .p_current, .p_next, .p_last { display: inline-block; } .article header h2 a { color: #333; } .article header h2 a:hover { color: #444; text-decoration: none; } .article footer small, .article header small, .comment small { color: #666; } .article header span:before, .article header time:before, .article footer span:before { padding-left: 1.5rem; padding-right: .3rem; } .article .written-by:after { content: '|'; padding-left: 0; } .article .art-date:after { content: '|'; } .article .classified-in:after { content: '|'; padding-left: 0; } .article img.art_thumbnail { padding: 15px 0 10px 0; } .page.mode-article .article footer { border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; } .comment { background-image: url('../img/user.png'); background-repeat: no-repeat; margin-bottom: 2.5rem; padding-left: 6rem; } .comment blockquote { margin: 0; font-size: 1.3rem; } .type-admin { background-color: #F0F8FF; padding: .2rem .5rem; } .nbcom { background-color: #258fd6; border-radius: .3rem; color: #ff0; padding: .4rem .6rem; } .nbcom:hover { background-color: #3a6c96; color: #ff0; text-decoration: none; } .level-0 { margin-left: 0; } .level-1 { margin-left: 5rem; } .level-2 { margin-left: 10rem } .level-3 { margin-left: 15rem; } .level-4 { margin-left: 20rem; } .level-5, .level-max { margin-left: 25rem; } @media (max-width: 768px) { .comment { background-image: none; padding-left: 0; } .level-1 { margin-left: 1rem; } .level-2 { margin-left: 2rem; } .level-3 { margin-left: 3rem; } .level-4 { margin-left: 4rem; } .level-5, .level-max { margin-left: 5rem; } } #id_answer { margin-bottom: 1.5rem; padding:1.5rem; border:1px solid #eee; width:100%; background:#fafafa; display:none; } .capcha-letter, .capcha-word { font-weight: bold; } .capcha-word { background-color: #ddd; border-radius: .3rem; letter-spacing: .5rem; padding: .9rem .7rem; transition-duration: .2s; } .capcha-word:hover { background-color: #666; color: #ff0; transition-duration: .2s; } .aside { padding: 0 2rem 0 2rem; } .aside h3 { font-size: 1.5rem; font-weight: bold; margin-top: 5rem; text-transform: uppercase; } .aside ul { margin: 0; } .aside ul.tag-list { list-style-type: none; padding-left: 0; } .aside ul.tag-list li { display: inline-block; margin-right: 1.5rem; } .aside ul.tag-list li.tag-size-1 a { font-size: 1rem; } .aside ul.tag-list li.tag-size-2 a { font-size: 1.2rem; } .aside ul.tag-list li.tag-size-3 a { font-size: 1.4rem; } .aside ul.tag-list li.tag-size-4 a { font-size: 1.6rem; } .aside ul.tag-list li.tag-size-5 a { font-size: 1.8rem; } .aside ul.tag-list li.tag-size-6 a { font-size: 2rem; } .aside ul.tag-list li.tag-size-7 a { font-size: 2.2rem; } .aside ul.tag-list li.tag-size-8 a { font-size: 2.4rem; } .aside ul.tag-list li.tag-size-9 a { font-size: 2.6rem } .aside ul.tag-list li.tag-size-10 a { font-size: 2.8rem; } .aside ul.tag-list li.tag-size-max a { font-size: 3rem; } /* ---------- Footer ---------- */ .footer { background: #ff0; color: #666; padding: 6rem 0; text-align: center; font-size: 1.2rem; } .footer p { margin: 0; } .footer a, .footer li.active a { color: #666; } /* ---------- ---------- */ @media (max-width: 768px) { .header, .footer { padding: 2rem 0; } .aside { padding-left: 1.5rem; } } /* affichage groupe des pages statiques */ /* sous forme de menus déroulants */ @media (max-width: 768px) { .menu > li ul { position: relative !important; } .menu > li ul li:hover { background-color: #ff0; } .menu > li ul li:hover a{ text-decoration: underline; } .responsive-menu ul li.active a, .responsive-menu ul li.active:hover { background-color: #ff0; color: #000; } } .menu > li ul { display: none; position: absolute; padding: 0; line-height: 2.8rem; } .menu > li:hover ul { display: block; } .menu ul li { display: block; margin: 0; padding: 0 1rem; background-color: #ff0; } .static.group.active, .static.menu.active a { color: #46462D; font-weight:bold; } .static.group.noactive, .static.menu.noactive a { color: #46462D; } .menu span::before { content: '\25bc'; } .grid { background-color: rgba(255, 255, 255, 0.3); box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7); } .header img { vertical-align: middle; } a:active, a:hover { color: #444; text-decoration: underline; } a { color: #171717; text-decoration: none; } et <?php $plxShow->pageTitle(); ?> meta('description') ?> meta('keywords') ?> meta('author') ?> templateCss() ?> pluginsCss() ?>

logo du sitemainTitle('link'); ?>

subTitle(); ?>