Joli Fablabo : Différence entre versions

De fablabo
Aller à : navigation, rechercher
(trucs à intégrer dans le cahier des charges)
 
(12 révisions intermédiaires par 3 utilisateurs non affichées)
Ligne 3 : Ligne 3 :
 
|image=accueil maquette.png
 
|image=accueil maquette.png
 
|description=faire ce site plus joli
 
|description=faire ce site plus joli
|contributeurs=Cedric,MOna
+
|license=CC-by-sa-3.0
 +
|contributeurs=Cedric, MOna, Divag,
 
|inspiration=http://wiki.labomedia.net
 
|inspiration=http://wiki.labomedia.net
 +
|source=http://fablabo.net/wiki/Fichier:Vectorfablabo.skin.zip
 
}}
 
}}
 
+
[[:File:vectorfablabo.skin.zip]]
  
 
==la maquette du nouveau style==
 
==la maquette du nouveau style==
Ligne 89 : Ligne 91 :
 
http://fablabo.net/mediawiki/index.php?title=Accueil&useskin=vector
 
http://fablabo.net/mediawiki/index.php?title=Accueil&useskin=vector
  
==rucs à intégrer dans le cahier des charges==
+
==Trucs à intégrer dans le cahier des charges==
  
  
Ligne 107 : Ligne 109 :
 
==Notes pour Gaetan==
 
==Notes pour Gaetan==
  
NB : Skin de base "vector"
 
Typo utilisée : Arial
 
Typo pour les titres + page d'accueil : typo crayonnée ou Vag rounded -> à trancher par ping
 
  
Faire un border image avec CSS http://www.pompage.net/traduction/la-propriete-border-image-en-css3
+
''Faire un border image avec CSS http://www.pompage.net/traduction/la-propriete-border-image-en-css3''
 +
 
  
 
Voici le dossier contenant les éléments actuels de la maquette (page accueil et page projet modifiées, typo, etc)
 
Voici le dossier contenant les éléments actuels de la maquette (page accueil et page projet modifiées, typo, etc)
 
[[Fichier:Maquette_elements.zip]]
 
[[Fichier:Maquette_elements.zip]]
  
 +
Version de travail de mise en place du nouveau style :
 +
http://fablabo.net/wiki/Utilisateur:Divag/vector.css
 +
 +
===Pour le site en général :===
 +
 +
tout est dans [[MediaWiki:Common.css]]
  
Pour la page en général :
+
- Se baser sur la skin vector
  
- lignes en pointillés en svg pour les niveaux 1 et 2  
+
- Lignes en pointillés en svg pour les niveaux 1 et 2  
  
- grand cadre page = traits crayonnés  
+
- Grand cadre page = traits crayonnés  
  
- background blanc  
+
- Background blanc  
  
 
- Logo rafraichi, 150x150px  -> à fournir par ping
 
- Logo rafraichi, 150x150px  -> à fournir par ping
 +
 +
- Puces : on part sur les flèches vers le côté et vers le bas, c'est la solution la plus claire
 +
 +
- Typo général : Arial / Typo titre à trancher par PiNG
  
 
- Couleurs :
 
- Couleurs :
Ligne 132 : Ligne 142 :
 
     liens #b46508
 
     liens #b46508
 
     liens suivis  #fe8b04
 
     liens suivis  #fe8b04
     liens cassés #c20000
+
     liens cassés #c20000
  
Menu top :  
+
===Menu top : ===
  
 
- barres séparations verticales des boutons édition : trait estompé  
 
- barres séparations verticales des boutons édition : trait estompé  
Ligne 143 : Ligne 153 :
  
  
Sidebar :  
+
===Sidebar : ===
  
 
- séparation sidebar : garder les traits horizontés estompés de la skin vector  
 
- séparation sidebar : garder les traits horizontés estompés de la skin vector  
  
  
Page projet  :
+
===Page projet  :===
  
 
- pour le statut : tampon à cheval sur le cartouche // à revoir
 
- pour le statut : tampon à cheval sur le cartouche // à revoir
  
==ressources==
+
==Ressources==
  
 
[ http://charlesmartinreid.com/wiki/Skinning_MediaWiki ]
 
[ http://charlesmartinreid.com/wiki/Skinning_MediaWiki ]

Version actuelle en date du 18 février 2015 à 15:57


faire ce site plus joli



File:vectorfablabo.skin.zip

la maquette du nouveau style

sobre et classieux


Pages exemples contenant toutes les sortes d'éléments

à checker avec la nouvelle skin

les pages DataFab :

Les pages suivantes font partie d'un jeu de templates qui sont appelés à être redistribués sous forme de jeu de pages exportable.

il faut transplanter les css dans ...une page?

ou direct dans le texte :

{{#css: body { background: yellow; font-size: 20pt; color: red; }}}

en utilisant https://www.mediawiki.org/wiki/Extension:CSS ? ou une autre solution

page projet

particularité : dans le Modèle:Projet l'apparence du cartouche est dépendante du statut du projet

Pour l'instant ça pilote la couleur, mais on peut juste mettre un tampon

bug relevé : le premier titre du texte libre n'apparait pas

page machine

le cartouche pour l'instant à droite est très laid

exemple :Laser_Smoothignstech

Page usager

je suis Cobaille

sera amené à évoluer...

Page Tache

exemple : Récupération_d'impression3D_stoppée_en_cours_de_route


Liste des projets

elle est là Accueil#Projets et est mise en forme avec Modèle:ListeProjets

ça chie avec vector skin

Liste des machines et des outils

à refaire (dans la page d'Accueil)

page logiciel

exemple : Ibniz

rien de spécial si ce n'est un tableau

un autre tableau est visible sur Laser_Smoothignstech/Modedemploi#Vitesses_de_travail


formatages divers

visibles dans Aide:Syntaxe

skins de bases

ici des pistes pour les skins de base

http://fablabo.net/mediawiki/index.php?title=Accueil&useskin=vector

Trucs à intégrer dans le cahier des charges

À faire pour Mona et Cedric

  • cliner les menus
  • refaire la page d'accueil
  • rajouter en pied de page "Un site animé par l'association PiNG" + logo
  • un bouton(s) "partager" sur twitter, identica et diaspora
  • une page "trucs à faire et coups de main à donner"

À faire pour Maelle

Fablabo:Actualités

Notes pour Gaetan

Faire un border image avec CSS http://www.pompage.net/traduction/la-propriete-border-image-en-css3


Voici le dossier contenant les éléments actuels de la maquette (page accueil et page projet modifiées, typo, etc) Fichier:Maquette elements.zip

Version de travail de mise en place du nouveau style : http://fablabo.net/wiki/Utilisateur:Divag/vector.css

Pour le site en général :

tout est dans MediaWiki:Common.css

- Se baser sur la skin vector

- Lignes en pointillés en svg pour les niveaux 1 et 2

- Grand cadre page = traits crayonnés

- Background blanc

- Logo rafraichi, 150x150px -> à fournir par ping

- Puces : on part sur les flèches vers le côté et vers le bas, c'est la solution la plus claire

- Typo général : Arial / Typo titre à trancher par PiNG

- Couleurs :

   texte  #4d4d4d
   liens #b46508
   liens suivis   #fe8b04
   liens cassés #c20000

Menu top :

- barres séparations verticales des boutons édition : trait estompé

- garder menu déroulant de la skin vector

- bouton recherche : pas de fond grisé du bouton, faire propositions d'un look plus léger (meme typo que le logo)


Sidebar :

- séparation sidebar : garder les traits horizontés estompés de la skin vector


Page projet  :

- pour le statut : tampon à cheval sur le cartouche // à revoir

Ressources

[ http://charlesmartinreid.com/wiki/Skinning_MediaWiki ]

Typos

http://www.fontsquirrel.com

http://openfontlibrary.org

http://velvetyne.fr/