Share
Souvent dans ma carrière de ninja du Web, on m'a demandé de personnaliser des projets open source afin de les aligner sur la marque de mes clients. En fonction du projet, cela peut être plus ou moins frustrant (je vous regarde, Magento), mais MediaWiki est l’un des projets les plus faciles à travailler en raison du nombre limité de fichiers et de choses à ajuster. Dans ce tutoriel, nous allons passer en revue le processus de thématisation que j'avais utilisé pour styliser le prochain wiki PSDTUTS, mais le processus, en particulier en utilisant Firebug, pourrait s'appliquer à pratiquement tous les CMS..
Theming un ensemble de code existant, même si il a été conçu pour être facile à thème peut être une tâche ardue. Ici, je vais expliquer comment faire cela le plus rapidement possible, avec le code le plus propre qui soit pragmatique. Voici les étapes à suivre:
Donc, un mot rapide sur le projet. Collis d’Eden m’a embauché comme thème d’une installation MediaWiki pour le prochain wiki PSDTUTS sur lequel ils travaillent. Voici le design qui m'a été donné:
La première chose à faire lorsque vous thématisez un projet tiers est d'évaluer la quantité de travail nécessaire en consultant la structure des répertoires. Dans notre cas avec MediaWiki, toutes les modifications seront effectuées sur deux fichiers dans le fichier / skins (MonoBook.php et monobook / main.css), ainsi que sur le téléchargement de quelques images. L'un des points positifs de MediaWiki est que, comme nous ne traitons que deux fichiers, nous pouvons consacrer la majeure partie de notre temps à peaufiner la conception pour qu'elle soit conforme aux spécifications de nos clients, sans chercher à apporter des modifications..
Une fois que vous avez trié les fichiers que vous allez éditer, il est important d’évaluer s’il s’agit d’une réécriture de fond ou si vous ne faites que retoucher les couleurs et le style d’un dessin existant. Mon client m'a seulement demandé de régler le thème MediaWiki par défaut. Comme nous n’avons pas à réécrire complètement le thème, je copie généralement les fichiers que nous allons modifier en tant que sauvegardes sur le serveur (dans ce cas, monoBook.php.backup et main.css.backup) et je commence à éditer l’original. fichiers pour minimiser le temps que je vais devoir passer.
Je ne vais pas entrer dans tout le processus de conversion d'une maquette de site Web en un site Web vivant et vivant; mais nous allons nous concentrer sur la recherche des éléments que vous souhaitez modifier et leur priorité sur ceux de nos fichiers modèles..
L’un des aspects les plus étonnants du développement et de la conception Web à la suite du mouvement des normes Web est l’utilisation cohérente de CSS styliser des sites Web et des logiciels Web comme MediaWiKi. Grâce au travail de nos pères Web (et de nos mères!), Nous pouvons être assurés que tout projet auquel nous nous attaquons utilisera généralement ces technologies de pointe. Voyons comment nous pouvons tirer parti de cela pour styler un thème existant.
Les feuilles de style en cascade sont appelées ainsi en raison d'une cascade ou de règles d'héritage qu'elles suivent. Si vous avez une feuille de style externe qui définit cette règle:
corps
fond: bleu;
Mais ensuite, plus tard dans cette même feuille de style, il y a une deuxième définition comme suit:
corps
fond: rouge;
Les documents avec lesquels vous traitez auront en fait un fond rouge car il s’agissait de la dernière déclaration faite. De la même manière, CSS obéira à toutes les règles plus spécifiques, par exemple, si vous avez défini un style sur tous les styles.
ul margin-left: 100px;
Mais redéfinissez ensuite cette règle pour les listes avec une certaine classe telle que;
ul.monkey margin-left: 0px;
En raison des règles de spécificité, toutes les listes dont la classe est définie sur singe n'auront aucune marge à gauche, tandis que la plupart des éléments de liste non ordonnés auront la marge à gauche de 100 pixels. Ceci est incroyablement utile et efficace car vous pouvez simplement redéfinir les styles à la fin de votre feuille de style pour votre projet afin d’apporter des corrections au style et d’aligner davantage votre nouveau site! (voir comment j'ai fait cela pour ce projet à la fin de la feuille de style)
Nous avons un peu exploré la façon de corriger le style et de le mettre en forme pour votre nouveau thème, mais soyons prudents et commençons à écrire du code. Le thème que Collis a proposé est fondamentalement un remaniement du thème MediaWiKi "par défaut" actuel dans les couleurs et la convivialité de PSDTUTS. Je savais donc que l'arrière-plan serait de cette couleur:
Facilement fait! Je viens d'ouvrir le fichier "main.css" dont nous avons parlé précédemment dans le répertoire / skins / monobook / et d'insérer le code suivant:
/ * Ajouts pour que cela ressemble à PSDTUTS! * / Body background: # 2b241e;
La première ligne s'appelle un commentaire. Si vous écrivez déjà beaucoup de code (Css, Xhtml, Php ou C ++!), Vous connaissez probablement les commentaires. Les commentaires nous permettent de laisser des informations stockées dans nos documents qui n'apparaîtront pas sur le site Web final, mais nous permettent de nous rappeler ce que nous pensions lors de la session de codage de fin de nuit terminant votre projet tardif..
La déclaration suivante est très claire: elle réinitialise simplement la couleur d'arrière-plan de l'élément body. En raison des règles d'héritage CSS dont nous avons déjà parlé, cette couleur d'arrière-plan surpasse la couleur d'arrière-plan définie précédemment, car elle est définie ultérieurement dans le document. Salut à tous les CSS!
Nous nous dirigeons maintenant dans la bonne voie pour rendre notre thème fonctionnel et beau, mais tous les éléments css de votre nouveau thème ne seront pas aussi faciles à trouver et à corriger que le plus évident.
étiquette. En fait, cela a toujours été un obstacle majeur à la thématisation de toutes sortes de produits CMS.Un moyen vraiment fantastique de retrouver cette div et cette division aléatoires consiste à utiliser un plugin extrêmement précieux pour Firefox appelé Firebug..
Si vous ne les avez pas déjà installés, veuillez installer Firefox ainsi que Firebug. Firebug est un plugin Firefox qui facilitera votre flux de travail de développement Web! Je vous laisse le soin d'explorer leur site pour trouver toutes les choses étonnantes que Firebug vous facilitera. Nous allons l'utiliser simplement pour identifier des éléments de notre thème et pour savoir comment identifier les sélecteurs à utiliser. votre fichier css pour les changer.
Plus facile à dire qu'à faire hein? Voyons une vidéo rapide:
Espérons que vous comprenez mieux maintenant comment commencer à thématiser un wiki ou tout autre CMS en fait..
Afin de vous donner une idée de mon processus, je l'ai enregistré pendant que je travaillais sur le wiki. Si vous avez des idées pour "accélérer" ce processus, ou si vous avez une manière différente de faire les choses, faites-le-moi savoir dans les commentaires.!
(Musique courtoisie de JustWaitSee)
Vous pouvez voir le projet terminé sur le site Wiki de PSDTUTS Photoshop, bien que le projet ne soit pas encore officiellement lancé. Ne vous attendez donc pas à en voir trop.!
Accentsconagua