Differences

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

--- code:personnalisation_pluxml_theme_du_gnu [2017/07/13 14:59]
supergnu
+++ code:personnalisation_pluxml_theme_du_gnu [2017/07/14 20:22] (current)
supergnu [Codes complet]
@@ Line 116: / Line 116: @@
 </code>
+==== 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: underline;
+}
+a {
+    color: #171717;
+    text-decoration: none;
+}
+</code>
+Bizarrement, les règles pour les titres d'articles (qui sont aussi des liens) sont dans theme.css.
+On les édite ainsi.
+<code css>
+.article header h2 a {
+	color: #333;
+}
+.article header h2 a:hover {
+	color: #444;
+	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>
 ===== Modifications structurelles =====
@@ Line 123: / Line 157: @@
 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 php>
+<code html>
+<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>
+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 :
+<code css>
+.header img
+{
+	vertical-align: middle;
+}
+</code>
+==== 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 :
+<code css>
+.grid
+{
+	background-color: rgba(255, 255, 255, 0.3);
+	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 {
+%,
+%,
+% { 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; }
+%,
+% { 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; }
+% { 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; }
+% { 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; }
+% { 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"  /><?php $plxShow->mainTitle('link'); ?></h1>
+			<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>
@@ Line 134: / Line 696: @@
 </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>

Wiki du Gnu

User Tools

Site Tools

Differences

Page Tools