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
