User Tools

Site Tools


code:personnalisation_pluxml_theme_du_gnu

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
code:personnalisation_pluxml_theme_du_gnu [2017/07/13 20:58]
supergnu [Couleur des titres du menu]
code:personnalisation_pluxml_theme_du_gnu [2017/07/14 20:22]
supergnu [Codes complet]
Line 139: Line 139:
  color: #444;  color: #444;
  text-decoration: none;  text-decoration: none;
 +}
 +</code>
 +
 +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.
 +
 +<code css>
 +.header a:hover {
 + text-decoration: none;
 + color: #ff0;
 } }
 </code> </code>
Line 173: Line 182:
  box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);   box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7); 
 } }
 +</code>
 +==== 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.
 +
 +<code html>
 +<h3>
 + <?php $plxShow->lang('HACKER VAILLANT …'); ?>
 +</h3>
 + <ul class="arch-list unstyled-list">
 + <p>
 + ... rien d'impossible !<br>
 + <a href="http://www.catb.org/hacker-emblem/" target=_blank><img src="<?php $plxShow->template(); ?>/img/140px-Glider.svg_.png" height="100" width="100" ></a><br>
 + Emblème Hacker
 + </p>
 +</ul>
 +<h3>
 + <?php $plxShow->lang('BLOGS FAVORIS'); ?>
 +</h3>
 +
 +<ul class="arch-list unstyled-list">
 + <p>
 + <a href="http://www.cyrille-borne.com" target=_blank>Cyril Borne</a><br>
 + <a href="http://zythom.blogspot.fr" target=_blank>Zythom</a><br>
 + <a href="http://lehollandaisvolant.net" target=_blank>Le Hollandais Volant</a><br>
 + <a href="http://www.warriordudimanche.net" target=_blank>Warrior du dimanche</a><br>
 + <a href="http://www.instructables.com" target=_blank>Instructable</a><br>
 + <a href="http://hackaday.com/" target=_blank>Hackaday</a><br>
 + <a href="http://korben.info/" target=_blank>Korben</a><br>
 + <a href="http://linuxfr.org/" target=_blank>LinuxFr</a><br>
 + <a href="https://www.raspberrypi.org/" target=_blank>Raspberry Pi</a><br>
 + <a href="https://xkcd.com" target=_blank>xkcd</a><br>
 + <a href="http://sebsauvage.net/" target=_blank>sebsauvage (shaarli)</a><br>
 + <a href="http://monorailc.at/cms/" target=_blank>Monorailc.at</a><br>
 + <a href="http://grisebouille.net/" target=_blank>Grise Bouille</a><br>
 + <a href="https://ploum.net/" target=_blank>Ploum</a><br>
 + <a href="https://www.journalduhacker.net/" target=_blank>Journal du Hacker</a><br>
 + </p>
 +</ul>
 +<h3>
 + <?php $plxShow->lang('FIREFOX FOREVER'); ?>
 +</h3>
 +
 +<ul class="arch-list unstyled-list">
 + <p>
 +
 + <a href="https://www.mozilla.org/en-US/firefox/new/" target=_blank><img src="<?php $plxShow->template(); ?>/img/getfirefox.png"></a><br>
 + Utilisez Firefox !
 + </p>
 +</ul>
 +
 +<h3>
 + <?php $plxShow->lang('LICENCE'); ?>
 +</h3>
 +
 +<ul class="arch-list unstyled-list">
 + <p>
 + Tout le contenu de ce site sauf mention particulière est placé sous la Gnu Public Licence (GPLV3) : 
 + <a href="https://www.gnu.org/licenses/gpl.html" target=_blank>https://www.gnu.org/licenses/gpl.html</a>
 + </p>
 +</ul>
 +
 +</code>
 +
 +
 +===== Codes complet =====
 +
 +Pour finir, voici les fichiers complet :
 +<code css theme.css>
 +/*
 +# ------------------ 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;
 +}
 +
 +</code>
 +et 
 +<code html header.php>
 +<?php if (!defined('PLX_ROOT')) exit; ?>
 +<!DOCTYPE html>
 +<html lang="<?php $plxShow->defaultLang() ?>">
 +<head>
 + <meta charset="<?php $plxShow->charset('min'); ?>">
 + <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
 + <title><?php $plxShow->pageTitle(); ?></title>
 + <?php $plxShow->meta('description') ?>
 + <?php $plxShow->meta('keywords') ?>
 + <?php $plxShow->meta('author') ?>
 + <link rel="icon" href="<?php $plxShow->template(); ?>/img/favicon.png" />
 + <link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/plucss.css" media="screen"/>
 + <link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/theme.css" media="screen"/>
 + <?php $plxShow->templateCss() ?>
 + <?php $plxShow->pluginsCss() ?>
 + <link rel="alternate" type="application/rss+xml" title="<?php $plxShow->lang('ARTICLES_RSS_FEEDS') ?>" href="<?php $plxShow->urlRewrite('feed.php?rss') ?>" />
 + <link rel="alternate" type="application/rss+xml" title="<?php $plxShow->lang('COMMENTS_RSS_FEEDS') ?>" href="<?php $plxShow->urlRewrite('feed.php?rss/commentaires') ?>" />
 +</head>
 +
 +<body id="top" class="page mode-<?php $plxShow->mode(true) ?>">
 +
 + <nav class="nav">
 + <div class="container">
 + <div class="responsive-menu">
 + <label for="menu"></label>
 + <input type="checkbox" id="menu">
 + <ul class="menu">
 + <?php $plxShow->staticList($plxShow->getLang('HOME'),'<li class="#static_class #static_status" id="#static_id"><a href="#static_url" title="#static_name">#static_name</a></li>'); ?>
 + <?php $plxShow->pageBlog('<li class="#page_class #page_status" id="#page_id"><a href="#page_url" title="#page_name">#page_name</a></li>'); ?>
 + </ul>
 + </div>
 + </div>
 + </nav>
 +
 + <header class="header">
 + <div class="container">
 + <h1 class="no-margin heading-small"><img src="<?php $plxShow->template(); ?>/img/GNU.png" alt="logo du site" width="100" height="10"  /><?php $plxShow->mainTitle('link'); ?></h1>
 + <h2 class="h5 no-margin"><?php $plxShow->subTitle(); ?></h2>
 + </div>
 + </header>
 +
 +</code>
 +
 +<code html sidebar.php>
 +<?php if(!defined('PLX_ROOT')) exit; ?>
 +
 + <aside class="aside col sml-12 med-4">
 +
 + <h3>
 + <?php $plxShow->lang('CATEGORIES'); ?>
 + </h3>
 +
 + <ul class="cat-list unstyled-list">
 + <?php $plxShow->catList('','<li id="#cat_id"><a class="#cat_status" href="#cat_url" title="#cat_name">#cat_name</a> (#art_nb)</li>'); ?>
 + </ul>
 +
 + <h3>
 + <?php $plxShow->lang('LATEST_ARTICLES'); ?>
 + </h3>
 +
 + <ul class="lastart-list unstyled-list">
 + <?php $plxShow->lastArtList('<li><a class="#art_status" href="#art_url" title="#art_title">#art_title</a></li>'); ?>
 + </ul>
 +
 + <h3>
 + <?php $plxShow->lang('TAGS'); ?>
 + </h3>
 +
 + <ul class="tag-list">
 + <?php $plxShow->tagList('<li class="tag #tag_size"><a class="#tag_status" href="#tag_url" title="#tag_name">#tag_name</a></li>'); ?>
 + </ul>
 +
 + <h3>
 + <?php $plxShow->lang('LATEST_COMMENTS'); ?>
 + </h3>
 +
 + <ul class="lastcom-list unstyled-list">
 + <?php $plxShow->lastComList('<li><a href="#com_url">#com_author '.$plxShow->getLang('SAID').' : #com_content(34)</a></li>'); ?>
 + </ul>
 +
 + <h3>
 + <?php $plxShow->lang('ARCHIVES'); ?>
 + </h3>
 +
 + <ul class="arch-list unstyled-list">
 + <?php $plxShow->archList('<li id="#archives_id"><a class="#archives_status" href="#archives_url" title="#archives_name">#archives_name</a> (#archives_nbart)</li>'); ?>
 + </ul>
 +
 + <h3>
 + <?php $plxShow->lang('HACKER VAILLANT …'); ?>
 + </h3>
 +
 + <ul class="arch-list unstyled-list">
 + <p>
 + ... rien d'impossible !<br>
 + <a href="http://www.catb.org/hacker-emblem/" target=_blank><img src="<?php $plxShow->template(); ?>/img/140px-Glider.svg_.png" height="100" width="100" ></a><br>
 + Emblème Hacker
 + </p>
 + </ul>
 +
 + <h3>
 + <?php $plxShow->lang('BLOGS FAVORIS'); ?>
 + </h3>
 +
 + <ul class="arch-list unstyled-list">
 + <p>
 + <a href="http://www.cyrille-borne.com" target=_blank>Cyril Borne</a><br>
 + <a href="http://zythom.blogspot.fr" target=_blank>Zythom</a><br>
 + <a href="http://lehollandaisvolant.net" target=_blank>Le Hollandais Volant</a><br>
 + <a href="http://www.warriordudimanche.net" target=_blank>Warrior du dimanche</a><br>
 + <a href="http://www.instructables.com" target=_blank>Instructable</a><br>
 + <a href="http://hackaday.com/" target=_blank>Hackaday</a><br>
 + <a href="http://korben.info/" target=_blank>Korben</a><br>
 + <a href="http://linuxfr.org/" target=_blank>LinuxFr</a><br>
 + <a href="https://www.raspberrypi.org/" target=_blank>Raspberry Pi</a><br>
 + <a href="https://xkcd.com" target=_blank>xkcd</a><br>
 + <a href="http://sebsauvage.net/" target=_blank>sebsauvage (shaarli)</a><br>
 + <a href="http://monorailc.at/cms/" target=_blank>Monorailc.at</a><br>
 + <a href="http://grisebouille.net/" target=_blank>Grise Bouille</a><br>
 + <a href="https://ploum.net/" target=_blank>Ploum</a><br>
 + <a href="https://www.journalduhacker.net/" target=_blank>Journal du Hacker</a><br>
 + </p>
 + </ul>
 +
 + <h3>
 + <?php $plxShow->lang('FIREFOX FOREVER'); ?>
 + </h3>
 +
 + <ul class="arch-list unstyled-list">
 + <p>
 +
 + <a href="https://www.mozilla.org/en-US/firefox/new/" target=_blank><img src="<?php $plxShow->template(); ?>/img/getfirefox.png"></a><br>
 + Utilisez Firefox !
 + </p>
 + </ul>
 +
 + <h3>
 + <?php $plxShow->lang('LICENCE'); ?>
 + </h3>
 +
 + <ul class="arch-list unstyled-list">
 + <p>
 + Tout le contenu de ce site sauf mention particulière est placé sous la Gnu Public Licence (GPLV3) : 
 + <a href="https://www.gnu.org/licenses/gpl.html" target=_blank>https://www.gnu.org/licenses/gpl.html</a>
 + </p>
 + </ul>
 +
 + </aside>
 +
 </code> </code>
code/personnalisation_pluxml_theme_du_gnu.txt · Last modified: 2017/07/14 20:22 by supergnu