Tutoriel en cours de création

Introduction

Ce tutoriel va vous expliquer comment modifier facilement et sans avoir de grande connaissance en développement l'aspect de votre site Web en général et de Phpboost en particulier.

Le module de Mozilla Firefox: Web Developer vous y aidera.

Tout d'abord je vous invite à consulter les tutoriels expliquant comment créer un thème ici et expliquant les différents fichiers CSS de Phpboost :

• content.css : Classes propres au contenu du site (messages, modules).
• design.css : Eléments du design (conteneurs).
• global.css : Classes utilisées sur l'ensemble du site, aussi bien dans l'administration que dans les modules.
• admin.css : Feuille de style gérant le panneau d'administration.
  

Les deux fichiers suivants sont en principe indépendant des thèmes, ils ne contiennent aucune information de couleur mais simplement du positionnement et autres propriétés indépendamment de la gestion des couleurs.

• bbcode.css : L'ensemble des styles générés par les balises BBCode.
• generic.css : Style générique, normalement compatible avec tous les thèmes.
  

Il faut aussi savoir que la plupart des modules possèdent eux aussi un fichier CSS contenu dans le répertoire "template" du module (exemple : ./forum/template/forum.css).

Web Developer

Installation Web Developer

Commençons par ouvrir Mozilla Firefox. Dans le menu cliquer sur "Outils et Modules complémentaires".

Cliquer sur "installer maintenant", redémarrer firefox, le module Web Developer est désormais installé.

Présentation du menu du module

• 1 - Disable : permet la désactivation de java, du Javascript, du cache, etc,
• 2 - Cookies : permet la gestion des cookies,
• 3 - CSS : permet d'éditer le CSS, faire des tests ou d'importer un CSS pour le tester,
• 4 - Forms: permet de travailler sur les "forms" et les méthodes POST et GET,
• 5 - Images : Donne les informations et permets la manipulation des images du site,
• 6 - Information : permet d'obtenir diverses informations sur sont site web,
• 7 - Miscellaneous (divers) : affichage des commentaires, d'une règle, affichage du HTML, etc,
• 8 - Outline (contour): contour des éléments,
• 9 - Resize : permet de redimensionner la page du navigateur et dons de tester son site avec diverses résolutions
• 10 - Tools : permet de tester la validation de son site avec les normes (W3C, WAI, etc),
• 11 - View Source : édition de la source du site (code HTML),
• 12 - Options : options de Web Developer.
  

Les fonctions de Web Developer

Dans cette partie nous allons découvrir les principales fonctions de Web Developer.

Menu "CSS"

Edit CSS

Comme nous l'avons vu plus haut le CMS Phpboost utilise plusieurs fichiers CSS pour sa mise en forme.
L'option "Edit CSS" permet d'afficher le contenu des fichiers CSS utilisé par le site.

Exemple pour le site informaddict.net :
Caché:

Les atouts de cette fonctionnalité sont d'une part, de visualier les fichiers CSS utilisés par la page consultée et d'autre part de pouvoir faire des tests directement interprétés par votre navigateur : Mozilla Firefox en l'occurrence.

Exemple d'utilisation en vidéo :

Menu "Informations"

Display Element Information

Cette fonctionnalité permet d'avoir diverses informations sur les éléments de votre site (hauteur, largeur, classe, etc, pour chaque élément). Cela vous permettra de savoir quelle classe modifier et ainsi pouvoir changer l'aspect d'un objet de votre site.

exemple d'utilisation :

Menu "Miscellaneous"

Menu "Resize"

Menu "Tools"