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/13 20:46] supergnu [Logo à coté du titre] |
code:personnalisation_pluxml_theme_du_gnu [2017/07/14 20:21] supergnu [Sidebar] |
||
---|---|---|---|
Line 116: | Line 116: | ||
</ | </ | ||
+ | ==== 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 ===== | ===== Modifications structurelles ===== | ||
Line 149: | Line 183: | ||
} | } | ||
</ | </ | ||
+ | ==== 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=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ |