Les skins pour MediaWiki

De Wiki Amis SH
Aller à la navigation Aller à la recherche



Le wiki : Accueil - Administrateur - Bureautique - Développeur - Intégrateur - Marketing - Multimédia - Objets numériques - Jeux - We make Hack


Les skins pour MediaWiki

Modifier les skins de Mediawiki

La page MediaWiki:Common.css permet de modifier les css appliquées à mediawiki.
Aller sur la page avec l’adresse suivante : https://wiki.visionduweb.fr/index.php?title=MediaWiki:Common.css

Modifier l'emplacement du logo et du menu de Mediawiki sur son template

<div id="mw-panel" style="top:120px!important;width: 13em!important;padding-left: 1em!important;">
  <!-- Le logo de Mediawiki -->
  <div id="p-logo" role="banner"><a class="mw-wiki-logo" href="<?php
  echo htmlspecialchars( $this->data['nav_urls']['mainpage']['href'] )
  ?>" <?php
  echo Xml::expandAttributes( Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) )
  ?>></a></div>

  <!-- Le menu de Mediawiki -->
  <?php $this->renderPortals( $this->data['sidebar'] ); ?>
 </div>

Skins par défaut

Source : https://www.mediawiki.org/wiki/Help:Skins/fr

Skin Monobook

Élargir le menu de gauche

L'exemple suivant concerne le style monobook et n'a pas été testé.

Modifier le fichier skins/monobook/main.css :

colum-content (changer margin)

skins/monobook/main.css
#column-content {
       width: 100%;
       float: right;
       /*margin: 0 0 .6em -12.2em;*/
       margin: 0 0 .6em -14.2em;
       padding: 0;
}

content (changer margin)

skins/monobook/main.css
#content {
       /*margin: 2.8em 0 0 12.2em;*/
       margin: 2.8em 0 0 14.2em;

   .portlet (style du menu de gauche - changer width)

skins/monobook/main.css
.portlet {
       border: none;
       margin: 0 0 .5em;
       padding: 0;
       float: none;
       /*width: 11.6em;*/
       width: 14em;
       overflow: hidden;
}

Autres personnalisations avec Monobook

Source : https://fr.wikipedia.org/wiki/Aide:Personnaliser_l%27interface/Exemples

Skin Vector

Utiliser la CSS Vector-DarkCSS

# Les pages MediaWiki:Common.css et MediaWiki:Vector.css sont toujours prioritaires sur les styles CSS par défaut. 

# Modifier la CSS de Mediawiki pour tous les habillages :
index.php?title=MediaWiki:Common.css
index.php?title=MediaWiki:Common.css -> https://pastebin.com/SAcx7rkP

# Modifier la CSS de Mediawiki pour l'habillage Vector :
index.php?title=MediaWiki:Vector.css
index.php?title=MediaWiki:Vector.css -> https://pastebin.com/11DUXa3K

# La css originale proposée pour Vector-DarkCSS depuis le site de Mediawiki : https://www.mediawiki.org/wiki/Skin:Vector-DarkCSS
# La css modifiée par Visionduweb, des corrections ont été apportées, notamment, sur certains liens brisés utilisés pour afficher des icônes :

# Correctifs complémentaires apportés pour le wiki de Visionduweb :
/* Supprimer l'image bordure de sous titre */
div#mw-panel div.portal div.body{background-image:none!important;}

/* Rendre les images de Yuml responsives. */
img{max-width:100%!important;height:auto!important;}

# Noter que la page de connexion est toujours affichée par défaut.
# Utiliser cette ligne dans le fichier LocalSettings.php :
# Activer les CSS partout.
$wgAllowSiteCSSOnRestrictedPages ="Spécial:Connexion";

# Pour que le CSS du site fonctionne sur les pages de connexion et de préférences de l'utilisateur, vous pouvez activer $wgAllowSiteCSSOnRestrictedPages.
# Noter que cela n'est pas recommandé, pour des raisons de sécurité (voir l’entrée manuelle liée pour les raisons).
# D'après : https://www.mediawiki.org/wiki/Manual:$wgUseSiteCss
# Par défaut, les personnalisations CSS du site (par exemple, MediaWiki: Common.css) ne prennent pas effet sur les pages de connexion et de préférences.
# Cela permet de préserver la sécurité du processus de connexion et de permettre aux utilisateurs de supprimer toute personnalisation indésirable sans être dérangé.
# Si les risques de sécurité ne vous préoccupent pas, vous pouvez utiliser le paramètre de configuration $wgAllowSiteCSSOnRestrictedPages pour permettre à CSS personnalisé de fonctionner sur ces pages.
Source : https://www.mediawiki.org/wiki/Manual:CSS

# Verrouiller les deux pages de CSS devrait suffire pour protéger la page de connexion.

Mettre en place une CSS Mediawiki pour les versions mobiles

# Il est possible de mettre en place une CSS pour les versions mobiles : https://www.mediawiki.org/wiki/Mobile_Gateway/Mobile_homepage_formatting/fr
https://wiki.visionduweb.fr/index.php?title=MediaWiki:Mobile.css

Mettre en place une CSS Mediawiki pour chaque utilisateur

# Ajouter dans LocalSettings.php :
$wgAllowUserCss = true;

# Créer la page CSS :
User:Username/skinname.css
# Ce qui devrait donner :
User:Zer00CooL/Vector.css
# Une alerte signifie que le nom de la css ne doit pas contenir de majuscules :
Utilisateur:Zer00CooL/vector.css

# A suivre.

Source : https://www.mediawiki.org/wiki/Manual:$wgAllowUserCss

Rediriger les utilisateurs vers leur page personnalisée

# Une fois connectés, rediriger les utilisateurs vers leur propre page personnalisée : https://www.mediawiki.org/wiki/Manual:$wgRedirectOnLogin

Templates à ajouter de façon simple dans le dossier skins

Le skin Timeless

La page officielle : https://www.mediawiki.org/wiki/Skin:Timeless
Télécharger : https://github.com/wikimedia/mediawiki-skins-Timeless
Ajouter le contenu dans le dossier skins/Timeless.

Activer le skin depuis le fichier LocalSettings.php
wfLoadSkin( 'Timeless' );
$wgDefaultSkin = 'timeless';

Un très beau skin fonctionnel également en responsive pour les applications mobiles.

Le skin Dgraph

Site officiel : https://open.dgraph.io
Wiki : https://wiki.dgraph.io
Github : https://github.com/dgraph-io/dgraph
Discuss : https://discuss.dgraph.io
Slack : https://slack.dgraph.io

Page Mediawiki : https://www.mediawiki.org/wiki/Skin:Dgraph
Télécharger Dgraph : https://github.com/dgraph-io/mediawiki-dgraph-skin

Télécharger les sources depuis Github, décompresser le dossier.zip, et, récupérer le dossier Dgraph.
Déplacer ce dossier Dgraph dans wiki/skins/

Depuis le fichiers LocalSettings.php : 
# Appliquer le skin dgraph comme skin par défaut :
$wgDefaultSkin = "dgraph";
# Charger le skin dgraph :
wfLoadSkin( 'Dgraph' );

Bogues remonté sur Github :
Le menu par défaut de Mediawiki n'est pas affiché.
L'image de fond d'écran n'est pas responsive.

Le skin pivot

Page Mediawiki : https://www.mediawiki.org/wiki/Skin:Pivot
Télécharger pivot : https://github.com/Hutchy68/pivot/

Télécharger les sources depuis Github, décompresser le dossier.zip, et, renommer le dossier pivot-master en pivot.
Déplacer ce dossier pivot dans wiki/skins/

Depuis le fichiers LocalSettings.php : 
# Appliquer le skin pivot comme skin par défaut :
$wgDefaultSkin = "pivot";
# Charger le skin pivot :
wfLoadSkin( 'pivot' );

On peut trouver plus esthétique.

Skins alternatifs

Le skin bootstrap-mediawiki

Le skin suivant est t'il obsolète ? Source sur GitHub : https://github.com/borkweb/bootstrap-mediawiki
Créer la page : "Bootstrap:TitleBar" pour obtenir le menu de navigation horizontal. Ce menu remplace le menu de navigation à gauche.
Fond sombre et police sombre.

Utilise le fichier /wiki/skins/bootstrap-mediawiki/font-awesome/css/font-awesome.min.css pour patcher l'éditeur de texte css :
#wpTextbox1 {color:grey!important;}

Noter que la langue de Home, de Tools, et, de Search, n'est pas en français.

Le problème majeur rencontré, la connexion ne fonctionne plus normalement avec l'utilisation d'un Bridge de connexion Joomla / Mediawiki.

Le skin bootstrap-mediawiki est désinstallé pour revenir au skin par défaut de MediaWiki, sur lequel une css personnalisée a été appliquée.

BlueSpice

Site officiel : https://en.help.bluespice.com/wiki/Main_Page
Système nécessaire : https://en.help.bluespice.com/wiki/Setup:System_requirements

La page concernant la version gratuite de BlueSpice : https://en.help.bluespice.com/wiki/BlueSpice_free
Manuel d'installation : https://en.help.bluespice.com/wiki/Setup:Installation_Manual

Télécharger : https://sourceforge.net/projects/bluespice/files/
BlueSpice free : https://bluespice.com/download-bluespice/

Le wiki : https://en.wiki.bluespice.com/wiki/Setup:Portal
Installation automatique avec l'installeur : https://en.wiki.bluespice.com/wiki/Setup:Portal

Semble très beau et intéressant mais je n'ai pas aboutis cette installation.
Je cherche encore comment installer uniquement ce template sur un Mediawiki déjà installé.
Je ne souhaite pas surcharger la base de données native ou les scripts natifs durant une mise à jour qui ne permet pas de savoir ce qui est réellement modifié.

Skins complémentaires

Tous les skins : https://www.mediawiki.org/wiki/Category:All_skins

Autres skins : https://www.mediawiki.org/wiki/Manual:Gallery_of_user_styles

http://www.topdesignmag.com/mediawiki-info-and-useful-free-templates/

Extension BoilerPlate

Affiche un template vide par défaut :
https://www.mediawiki.org/wiki/Extension:BoilerPlate

Bibliographie

https://www.mediawiki.org/wiki/Manual:Skin_configuration

NAVIGATION

PARTICIPER ET PARTAGER

Bienvenue sur le wiki de Amis SH.
De nombreuses pages sont partagées sur ce wiki.
Créer un compte utilisateur pour participer sur le wiki.
Les pages présentées sur le wiki évoluent tous les jours.
Certaines recherches sont peu abouties et incluent des erreurs.
Utiliser la recherche interne du wiki pour trouver votre contenu.
La page de discussion de Amis SH vous permet de poser vos questions.
Consulter le site amis-sh.fr pour installer votre propre serveur web.
Améliorer le contenu des pages avec vos retours depuis l'onglet discussion.
Ce contenu ne doit pas servir à nuire à autrui ou à un système informatique.
Protéger votre système Linux ou Windows avec cette page dédiée à la sécurité.

SOUTENIR CE WIKI

Soutenir le wiki avec un don en monnaie numérique :
AEON - Bitcoins - Bitcoins Cash - Bitcoins Gold - Bitcore - Blackcoins - Basic Attention Token - Bytecoins - Clams - Dash - Monero - Dogecoins - Ğ1 - Ethereum - Ethereum Classique - Litecoins - Potcoins - Solarcoins - Zcash

OBTENIR DE LA MONNAIE NUMERIQUE

Obtenir gratuitement de la monnaie numérique :
Miner de la cryptomonnaie.
Récupérée de « https://wiki.amis-sh.fr/index.php?title=Les_skins_pour_MediaWiki&oldid=445 »