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/14 08:47]
supergnu [Couleur des liens]
code:personnalisation_pluxml_theme_du_gnu [2017/07/14 20:22]
supergnu [Codes complet]
Line 182: 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