v2.qrcode.chapril.org
Table des matières
Service qrcode.chapril.org
Installation
Pré-requis
Installation des pré-requis :
apt install php7.4-gd php7.4-mbstring php7.4-iconv
L'application
Choix de l'installation via un fichier zip :
cd /var/www/ wget https://code.antopie.org/miraty/libreqr/archive/2.0.0.zip unzip 2.0.0.zip rm 2.0.0.zip mv libreqr/ v2.qrcode.chapril.org/
Personnalisation
Création du thème personnalisé chapril : config.inc.php :
-define("THEME", "libreqr"); +define("THEME", "chapril"); -define("DEFAULT_LOCALE", "en"); +define("DEFAULT_LOCALE", "fr"); -define("CUSTOM_TEXT_ENABLED", false); -define("CUSTOM_TEXT", "This LibreQR instance is hosted by <a href='https://foo.example/'>foo</a>."); +define("CUSTOM_TEXT_ENABLED", true); +define("CUSTOM_TEXT", "Ce service est fourni par l'association Chapril.");
index.php :
+ <link rel="stylesheet" type="text/css" href="resources/chapril-banner.css"> - <h1>LibreQR</h1> - <h2><?= $loc['subtitle'] ?></h2> + <h1>QrcodeChaprilOrg</h1> + <h2>Générateur de codes QR</h2> +<nav class="chapril-banniere-Nav"> + <div class="chapril-banniere-Logo" aria-hidden="true"> + <a href="https://www.chapril.org"><img alt="" src="resources/chapril-banner-logo.png"></a> + </div> + <div class="chapril-banniere-Menu" aria-hidden="true"> + <details> + <summary> + <span></span> + <span></span> + <span></span> + </summary> + <div><a href="https://www.chapril.org/">Accueil Chapril</a></div> + <div><a href="https://www.chapril.org/services.html">Services libres</a></div> + <div><a href="https://pouet.april.org/@aprilorg">Nous suivre</a></div> + <div><a href="https://www.chapril.org/cgu.html">CGU</a></div> + <div><a href="https://www.chapril.org/a-propos.html">Mentions légales</a></div> + <div><a href="https://www.chapril.org/contact.html">Nous contacter</a></div> + </details> + </div> + <div class="chapril-banniere-Entree"><a href="https://www.chapril.org/">Accueil Chapril</a></div> + <div class="chapril-banniere-Entree"><a href="https://www.chapril.org/services.html">Services libres</a></div> + <div class="chapril-banniere-Entree"><a href="https://pouet.april.org/@aprilorg">Nous suivre</a></div> + <div class="chapril-banniere-Entree"><a href="https://www.chapril.org/cgu.html">CGU</a></div> + <div class="chapril-banniere-Entree"><a href="https://www.chapril.org/a-propos.html">Mentions légales</a></div> + <div class="chapril-banniere-Entree"><a href="https://www.chapril.org/contact.html">Nous contacter</a></div> + </nav>
Feuilles de style
Création d'un dossier resources pour la favicon et la feuille de style de la bannière :
mkdir resources
Ajout d'un fichier chapril-banner.css dans le dossier resources/ :
/* ____ _ _ _ _ ____ ____ ____ / ___| |__ __ _ _ __ _ __(_) | | |__ __ _ _ __ _ __ ___ _ __ / ___/ ___/ ___| | | | '_ \ / _` | '_ \| '__| | | | '_ \ / _` | '_ \| '_ \ / _ \ '__| | | \___ \___ \ | |___| | | | (_| | |_) | | | | | | |_) | (_| | | | | | | | __/ | | |___ ___) |__) | \____|_| |_|\__,_| .__/|_| |_|_| |_.__/ \__,_|_| |_|_| |_|\___|_| \____|____/____/ |_| */ /******************************** * Ajustement global *******************************/ body { margin-top: 0; padding-top: 42px !important; } /******************************** * Classes .chapril-banniere- *******************************/ .chapril-banniere-Entree { font-family: sans-serif; text-transform: uppercase; font-size: small; } .chapril-banniere-Logo { display: flex; } .chapril-banniere-Logo a { padding-bottom: 4px; } .chapril-banniere-Logo img { display: block; width: auto; height: 28px; } .chapril-banniere-Menu { display: none; } .chapril-banniere-Nav { position: fixed; top: 0; left: 0; right: 0; min-height: 42px; background-color: #005184; display: flex; justify-content: space-around; align-items: center; z-index: 1001; } .chapril-banniere-Nav a, .chapril-banniere-Nav a:visited { color: #fff; text-decoration: none; } .chapril-banniere-Nav a:hover { color: #ff9759; } @media screen and (max-width: 800px) { .chapril-banniere-Entree { display: none; } .chapril-banniere-Logo { padding-left: 12px; } .chapril-banniere-Logo a { padding-top: 5px; } .chapril-banniere-Menu { display: block; } .chapril-banniere-Menu summary { height: 26px; width: 30px; display: block; position: absolute; top: 8px; right: 12px; border-radius: 2px; border-style: solid; border-width: 1px; box-sizing: border-box; border-color: #fff; padding-left: 4px; padding-top: 1px; } .chapril-banniere-Menu summary { list-style: none; } .chapril-banniere-Menu summary::-webkit-details-marker { display: none; } .chapril-banniere-Menu summary span { display: block; margin-top: 4px; width: 20px; height: 2px; border-radius: 2px; background-color: #fff; } .chapril-banniere-Menu summary:hover { border-color: #ff9759; cursor:pointer; } .chapril-banniere-Menu summary:hover span { background-color: #ff9759; } .chapril-banniere-Menu div { padding-top: 8px; padding-bottom: 8px; text-align: center; background-color: #153a6a; border-top: 1px solid #005184; font-family: sans-serif; text-transform: uppercase; font-size: small; } .chapril-banniere-Nav { display: block; } } /************************************ * Adaptation pour certains services ************************************ /* Dokuwiki. */ #dokuwiki__usertools { top: 43px !important; } /* PAD. */ #editorcontainerbox { top: 43px !important; }
Modifications dans styless :
font-family: system-ui, sans-serif; scrollbar-width: auto; - - @media @light { - scrollbar-color: @text-light @bg-light; - } - - @media @dark { - scrollbar-color: @text-dark @bg-dark; - } } body { font-size: 20px; @media @light { - color: @text-light; - background-color: @bg-light; + color: white; + background-color: #67a3f2; } @media @dark { - color: @text-dark; - background-color: @bg-dark; + color: white; + background-color: #67a3f2; } } a { text-decoration: underline; @media @light { - color: @text-light; + color: white; } @media @dark { - color: @text-dark; + color: white; } &:hover { code { text-align: left; @media @light { - background-color: @bgHelp-light; - border-color: @borderHelp-light; + background-color: #2e5281; + border-color: #005184; } & p { @@ -235,13 +227,13 @@ h2 { ::selection { @media @light { - color: @bg-light; - background-color: @text-light; + color: #67a3f2; + background-color: white; } @media @dark { - color: @bg-dark; - background-color: @text-dark; + color: #67a3f2; + background-color: white; } } label[for=txt] summary { .metaText { padding: 6px; @media @light { - color: @text-light; + color: white; } @media @dark { - color: @text-dark; + color: white; } & a, a:visited { text-decoration: underline; @media @light { - color: @text-light; + color: white; } @media @dark { - color: @text-dark; + color: white; } } small { margin: 6px; @media @light { - color: @text-light; - background-color: @bgField-light; - border-color: @border-light; + color: white; + background-color: #2e5281; + border-color: #2e5281; } @media @dark { - color: @text-dark; - background-color: @bgField-dark; - border-color: @border-dark; + color: white; + background-color: #2e5281; + border-color: #2e5281; } &:hover { @@ -340,11 +332,11 @@ small { border-style: solid; @media @light { - border-color: @borderHover-light; + border-color: #67a3f2; } @media @dark { - border-color: @borderHover-dark; + border-color: #67a3f2; } } small { outline: none; @media @light { - border-color: @borderFocus-light; + border-color: #67a3f2; } @media @dark { - border-color: @borderFocus-dark; + border-color: #67a3f2; } } } input[type=color] { #redundancy, #size, #margin { @media @light { - background-color: @bgField-light; + background-color: #2e5281; } @media @dark { - background-color: @bgField-dark; + background-color: #2e5281; } } input[type=color] { scrollbar-width: auto; @media @light { - background-color: @bgTextarea-light; - color: @textareaText-light; - scrollbar-color: @textareaText-light @bgTextarea-light; + background-color: white; + color: black; } @media @dark { - background-color: @bgTextarea-dark; - color: @textareaText-dark; - scrollbar-color: @textareaText-dark @bgTextarea-dark; + background-color: white; + color: black; } } @@ -459,3 +449,7 @@ a[download]::before { drop-shadow(-1px 1px 1px white) drop-shadow(1px -1px 1px white); } +#logo { + width: 64px; + height: 64px; +}
Icônes
Modifications des icônes dans themes/chapril/icons et ajout du logo chapril dans le dossier resources, avec le nom logo.png .
v2.qrcode.chapril.org.txt · Dernière modification : 2022/07/09 08:20 de pitchum