This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Last revision Both sides next revision | ||
code:personnalisation_pluxml_theme_du_gnu [2017/07/12 22:23] supergnu |
code:personnalisation_pluxml_theme_du_gnu [2017/07/14 20:21] supergnu [Sidebar] |
||
---|---|---|---|
Line 1: | Line 1: | ||
====== Personnalisation du thème PluXML pour Le Site du Gnu-Bricoleur ====== | ====== Personnalisation du thème PluXML pour Le Site du Gnu-Bricoleur ====== | ||
- | Ici sont regroupées l’ensemble des modifications que j' | + | Ici sont regroupées l’ensemble des modifications que j' |
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 " | 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 " | ||
Line 14: | Line 14: | ||
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 !) | 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 | + | Attention à la couleur du texte du titre (dans le sélecteur .header) et à la couleur |
==== Couleur du bandeau de titre ==== | ==== Couleur du bandeau de titre ==== | ||
Line 79: | Line 79: | ||
-webkit-animation: | -webkit-animation: | ||
} | } | ||
+ | </ | ||
+ | |||
+ | ==== Couleur des titres du menu ==== | ||
+ | La couleur des titres du menu est déterminée par le CSS suivant : | ||
+ | <code css> | ||
+ | .static.group.active, | ||
+ | .static.menu.active a | ||
+ | { | ||
+ | color: #e42929; | ||
+ | } | ||
+ | </ | ||
+ | et, | ||
+ | <code css> | ||
+ | .static.group.noactive, | ||
+ | .static.menu.noactive a | ||
+ | { | ||
+ | color: #258fd6; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | Pour avoir quelque chose de moins flashy que du bleu et rouge, on modifie ainsi : | ||
+ | <code css> | ||
+ | .static.group.active, | ||
+ | .static.menu.active a | ||
+ | { | ||
+ | color: #46462D; | ||
+ | font-weight: | ||
+ | } | ||
+ | |||
+ | .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 : | ||
+ | <code css> | ||
+ | a:active, a:hover { | ||
+ | color: #444; | ||
+ | text-decoration: | ||
+ | } | ||
+ | |||
+ | a { | ||
+ | color: #171717; | ||
+ | text-decoration: | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | Bizarrement, | ||
+ | On les édite ainsi. | ||
+ | <code css> | ||
+ | .article header h2 a { | ||
+ | color: #333; | ||
+ | } | ||
+ | .article header h2 a:hover { | ||
+ | color: #444; | ||
+ | text-decoration: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Comme le titre du site est aussi un lien, il faut l’empêcher de devenir gris quand quelqu' | ||
+ | |||
+ | <code css> | ||
+ | .header a:hover { | ||
+ | text-decoration: | ||
+ | color: #ff0; | ||
+ | } | ||
+ | </ | ||
+ | ===== Modifications structurelles ===== | ||
+ | |||
+ | J'aime assez le thème par défaut donc je n'ai pas changé grand chose mais j' | ||
+ | |||
+ | ==== 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 : | ||
+ | |||
+ | <code html> | ||
+ | <header class=" | ||
+ | <div class=" | ||
+ | <h1 class=" | ||
+ | <h2 class=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | 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), | ||
+ | Néanmoins, avec cette syntaxe, le bas de l' | ||
+ | <code css> | ||
+ | .header img | ||
+ | { | ||
+ | vertical-align: | ||
+ | } | ||
+ | </ | ||
+ | ==== Zone de texte un peu plus visible ==== | ||
+ | |||
+ | Pour l' | ||
+ | <code css> | ||
+ | .grid | ||
+ | { | ||
+ | background-color: | ||
+ | box-shadow: | ||
+ | } | ||
+ | </ | ||
+ | ==== Favicon ==== | ||
+ | Rien de compliqué, il suffit de modifier l' | ||
+ | |||
+ | ==== Sidebar ==== | ||
+ | | ||
+ | Ces lignes ajoutent des liens vers des sites que je fréquente souvent, des images et précisent la licence. | ||
+ | |||
+ | <code html> | ||
+ | <h3> | ||
+ | <?php $plxShow-> | ||
+ | </h3> | ||
+ | <ul class=" | ||
+ | <p> | ||
+ | ... rien d' | ||
+ | <a href=" | ||
+ | Emblème Hacker | ||
+ | </p> | ||
+ | </ul> | ||
+ | <h3> | ||
+ | <?php $plxShow-> | ||
+ | </h3> | ||
+ | |||
+ | <ul class=" | ||
+ | <p> | ||
+ | <a href=" | ||
+ | <a href=" | ||
+ | <a href=" | ||
+ | <a href=" | ||
+ | <a href=" | ||
+ | <a href=" | ||
+ | <a href=" | ||
+ | <a href=" | ||
+ | <a href=" | ||
+ | <a href=" | ||
+ | <a href=" | ||
+ | <a href=" | ||
+ | <a href=" | ||
+ | <a href=" | ||
+ | <a href=" | ||
+ | </p> | ||
+ | </ul> | ||
+ | <h3> | ||
+ | <?php $plxShow-> | ||
+ | </h3> | ||
+ | |||
+ | <ul class=" | ||
+ | <p> | ||
+ | |||
+ | <a href=" | ||
+ | Utilisez Firefox ! | ||
+ | </p> | ||
+ | </ul> | ||
+ | |||
+ | <h3> | ||
+ | <?php $plxShow-> | ||
+ | </h3> | ||
+ | |||
+ | <ul class=" | ||
+ | <p> | ||
+ | Tout le contenu de ce site sauf mention particulière est placé sous la Gnu Public Licence (GPLV3) : | ||
+ | <a href=" | ||
+ | </p> | ||
+ | </ul> | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Codes complet ===== | ||
+ | |||
+ | Pour finir, voici les fichiers complet : | ||
+ | <code css theme.css> | ||
+ | /* | ||
+ | # ------------------ BEGIN LICENSE BLOCK ------------------ | ||
+ | # | ||
+ | # This file is part of PluXml : http:// | ||
+ | # | ||
+ | # Package: | ||
+ | # Copyright (c) 2017 PluXml | ||
+ | # Authors Jos, | ||
+ | # Licensed under the GPL license. | ||
+ | # See http:// | ||
+ | # | ||
+ | # ------------------- END LICENSE BLOCK ------------------- | ||
+ | */ | ||
+ | |||
+ | /* ----- Menu ----- */ | ||
+ | |||
+ | .nav { | ||
+ | background-color: | ||
+ | height: 4rem; | ||
+ | text-align: | ||
+ | margin-top: | ||
+ | } | ||
+ | .nav ul { | ||
+ | line-height: | ||
+ | } | ||
+ | @media (max-width: 767px) { | ||
+ | .nav { | ||
+ | height: auto; | ||
+ | max-height: | ||
+ | overflow-y: | ||
+ | text-align: | ||
+ | margin-top: | ||
+ | } | ||
+ | .nav> | ||
+ | padding: 0; | ||
+ | } | ||
+ | .responsive-menu label { | ||
+ | background-color: | ||
+ | color: #333; | ||
+ | font-size: | ||
+ | margin: .75rem; | ||
+ | text-align: | ||
+ | } | ||
+ | .responsive-menu label: | ||
+ | content: ' | ||
+ | } | ||
+ | } | ||
+ | |||
+ | li a.active { | ||
+ | color: #e42929; | ||
+ | } | ||
+ | |||
+ | /* ---------- Header ---------- */ | ||
+ | |||
+ | body { | ||
+ | background-color: | ||
+ | font-size: 1.6rem; | ||
+ | } | ||
+ | |||
+ | @media (min-width: 64rem) { | ||
+ | .container { | ||
+ | padding-left: | ||
+ | padding-right: | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .header { | ||
+ | background: | ||
+ | color: #ff0; | ||
+ | padding-bottom: | ||
+ | padding-top: | ||
+ | text-align: | ||
+ | } | ||
+ | .header a { | ||
+ | color: #ff0; | ||
+ | } | ||
+ | .header a:hover { | ||
+ | text-decoration: | ||
+ | color: #ff0; | ||
+ | } | ||
+ | |||
+ | @keyframes fire { | ||
+ | 0%, | ||
+ | 50%, | ||
+ | 100% { text-shadow: | ||
+ | 20%, | ||
+ | 40% { text-shadow: | ||
+ | 30% { text-shadow: | ||
+ | 60% { text-shadow: | ||
+ | 70% { text-shadow: | ||
+ | } | ||
+ | |||
+ | h1 a:hover { | ||
+ | animation: fire .3s infinite ease alternate 1s; | ||
+ | -webkit-animation: | ||
+ | } | ||
+ | |||
+ | |||
+ | /* ---------- Main ---------- */ | ||
+ | |||
+ | .main { | ||
+ | background-color: | ||
+ | padding-bottom: | ||
+ | } | ||
+ | .repertory { | ||
+ | margin-top: | ||
+ | } | ||
+ | .pagination { | ||
+ | margin: 3rem 0 3rem 0; | ||
+ | } | ||
+ | .pagination a { | ||
+ | background-color: | ||
+ | border-radius: | ||
+ | color: #ff0; | ||
+ | padding: .9rem .7rem; | ||
+ | transition-duration: | ||
+ | } | ||
+ | .pagination a:hover { | ||
+ | background-color: | ||
+ | color: #ff0; | ||
+ | text-decoration: | ||
+ | } | ||
+ | .pagination span: | ||
+ | .pagination a: | ||
+ | text-transform: | ||
+ | } | ||
+ | .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: | ||
+ | } | ||
+ | .article footer small, | ||
+ | .article header small, | ||
+ | .comment small { | ||
+ | color: #666; | ||
+ | } | ||
+ | .article header span: | ||
+ | .article header time: | ||
+ | .article footer span:before { | ||
+ | padding-left: | ||
+ | padding-right: | ||
+ | } | ||
+ | .article .written-by: | ||
+ | content: ' | ||
+ | padding-left: | ||
+ | } | ||
+ | .article .art-date: | ||
+ | content: ' | ||
+ | } | ||
+ | .article .classified-in: | ||
+ | content: ' | ||
+ | padding-left: | ||
+ | } | ||
+ | .article img.art_thumbnail { | ||
+ | padding: 15px 0 10px 0; | ||
+ | } | ||
+ | .page.mode-article .article footer { | ||
+ | border-top: | ||
+ | border-bottom: | ||
+ | } | ||
+ | .comment { | ||
+ | background-image: | ||
+ | background-repeat: | ||
+ | margin-bottom: | ||
+ | padding-left: | ||
+ | } | ||
+ | .comment blockquote { | ||
+ | margin: 0; | ||
+ | font-size: 1.3rem; | ||
+ | } | ||
+ | .type-admin { | ||
+ | background-color: | ||
+ | padding: .2rem .5rem; | ||
+ | } | ||
+ | .nbcom { | ||
+ | background-color: | ||
+ | border-radius: | ||
+ | color: #ff0; | ||
+ | padding: .4rem .6rem; | ||
+ | } | ||
+ | .nbcom: | ||
+ | background-color: | ||
+ | color: #ff0; | ||
+ | text-decoration: | ||
+ | } | ||
+ | .level-0 { | ||
+ | margin-left: | ||
+ | } | ||
+ | .level-1 { | ||
+ | margin-left: | ||
+ | } | ||
+ | .level-2 { | ||
+ | margin-left: | ||
+ | } | ||
+ | .level-3 { | ||
+ | margin-left: | ||
+ | } | ||
+ | .level-4 { | ||
+ | margin-left: | ||
+ | } | ||
+ | .level-5, | ||
+ | .level-max { | ||
+ | margin-left: | ||
+ | } | ||
+ | @media (max-width: 768px) { | ||
+ | .comment { background-image: | ||
+ | .level-1 { margin-left: | ||
+ | .level-2 { margin-left: | ||
+ | .level-3 { margin-left: | ||
+ | .level-4 { margin-left: | ||
+ | .level-5, .level-max { margin-left: | ||
+ | } | ||
+ | #id_answer { | ||
+ | margin-bottom: | ||
+ | padding: | ||
+ | border:1px solid #eee; | ||
+ | width: | ||
+ | background:# | ||
+ | display: | ||
+ | } | ||
+ | .capcha-letter, | ||
+ | .capcha-word { | ||
+ | font-weight: | ||
+ | } | ||
+ | .capcha-word { | ||
+ | background-color: | ||
+ | border-radius: | ||
+ | letter-spacing: | ||
+ | padding: .9rem .7rem; | ||
+ | transition-duration: | ||
+ | } | ||
+ | .capcha-word: | ||
+ | background-color: | ||
+ | color: #ff0; | ||
+ | transition-duration: | ||
+ | } | ||
+ | .aside { | ||
+ | padding: 0 2rem 0 2rem; | ||
+ | } | ||
+ | .aside h3 { | ||
+ | font-size: 1.5rem; | ||
+ | font-weight: | ||
+ | margin-top: | ||
+ | text-transform: | ||
+ | } | ||
+ | .aside ul { | ||
+ | margin: 0; | ||
+ | } | ||
+ | .aside ul.tag-list { | ||
+ | list-style-type: | ||
+ | padding-left: | ||
+ | } | ||
+ | .aside ul.tag-list li { | ||
+ | display: inline-block; | ||
+ | margin-right: | ||
+ | } | ||
+ | .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: | ||
+ | color: #666; | ||
+ | padding: 6rem 0; | ||
+ | text-align: | ||
+ | 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: | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* 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: | ||
+ | } | ||
+ | .menu > li ul li:hover a{ | ||
+ | text-decoration: | ||
+ | } | ||
+ | .responsive-menu ul li.active a, | ||
+ | .responsive-menu ul li.active: | ||
+ | background-color: | ||
+ | color: #000; | ||
+ | } | ||
+ | } | ||
+ | .menu > li ul { | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | padding: 0; | ||
+ | line-height: | ||
+ | } | ||
+ | .menu > li:hover ul { | ||
+ | display: block; | ||
+ | } | ||
+ | .menu ul li { | ||
+ | display: block; | ||
+ | margin: 0; | ||
+ | padding: 0 1rem; | ||
+ | background-color: | ||
+ | } | ||
+ | .static.group.active, | ||
+ | .static.menu.active a { | ||
+ | color: #46462D; | ||
+ | font-weight: | ||
+ | } | ||
+ | .static.group.noactive, | ||
+ | .static.menu.noactive a { | ||
+ | color: #46462D; | ||
+ | } | ||
+ | .menu span:: | ||
+ | content: ' | ||
+ | } | ||
+ | |||
+ | .grid | ||
+ | { | ||
+ | background-color: | ||
+ | box-shadow: | ||
+ | } | ||
+ | |||
+ | .header img | ||
+ | { | ||
+ | vertical-align: | ||
+ | } | ||
+ | |||
+ | a:active, a:hover { | ||
+ | color: #444; | ||
+ | text-decoration: | ||
+ | } | ||
+ | |||
+ | a { | ||
+ | color: #171717; | ||
+ | text-decoration: | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | et | ||
+ | <code html header.php> | ||
+ | <?php if (!defined(' | ||
+ | < | ||
+ | <html lang="<? | ||
+ | < | ||
+ | <meta charset="<? | ||
+ | <meta name=" | ||
+ | < | ||
+ | <?php $plxShow-> | ||
+ | <?php $plxShow-> | ||
+ | <?php $plxShow-> | ||
+ | <link rel=" | ||
+ | <link rel=" | ||
+ | <link rel=" | ||
+ | <?php $plxShow-> | ||
+ | <?php $plxShow-> | ||
+ | <link rel=" | ||
+ | <link rel=" | ||
+ | </ | ||
+ | |||
+ | <body id=" | ||
+ | |||
+ | <nav class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | < | ||
+ | < | ||
+ | <ul class=" | ||
+ | <? | ||
+ | <? | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <header class=" | ||
+ | <div class=" | ||
+ | <h1 class=" | ||
+ | <h2 class=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
</ | </ | ||