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

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 (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 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 :

<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>

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.

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.

<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>

Codes complet

Pour finir, voici les fichiers complet :

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;
}

et

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>

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>

Wiki du Gnu

Sidebar

Pinephone

Code

Astuces

Lasercutting

Table of Contents

Personnalisation du thème PluXML pour Le Site du Gnu-Bricoleur

Modifier les couleurs

Couleurs de fond

Couleur du bandeau de titre

Petit bonus

Couleur des titres du menu

Couleur des liens

Modifications structurelles

Logo à coté du titre

Zone de texte un peu plus visible

Favicon

Sidebar

Codes complet

Wiki du Gnu

User Tools

Site Tools

Sidebar

Pinephone

Code

Astuces

Lasercutting

Table of Contents

Personnalisation du thème PluXML pour Le Site du Gnu-Bricoleur

Modifier les couleurs

Couleurs de fond

Couleur du bandeau de titre

Petit bonus

Couleur des titres du menu

Couleur des liens

Modifications structurelles

Logo à coté du titre

Zone de texte un peu plus visible

Favicon

Sidebar

Codes complet

Page Tools