Thème Complet [ Avancé ]

Voici le tuto de niveau avancé pour faire un thème sur EklaBlog de A à Z.
Le but de ce tutoriel est de vous montrer comment réaliser un thème pour EklaBlog sans être bloqué par la structure de base "un menu à gauche, un menu à droite et les articles au milieu". L'idée est donc de laisser aller son imagination et d'avisez ensuite avec les contraintes du CSS, au lieu de faire l'inverse en se disant qu'il faut un header de la largeur de la page, un menu de 200px à gauche des articles...
Pour illustrer ce tuto, j'ai choisi de faire un thème à l'apparence assez déstructurée :

Si vous disposez de tout cela, on peu commencer.

Dans votre logiciel, ouvrez un nouveau document 2000*1000px. Commencez par placer des rectangles pour shématiser la future apparence de votre thème. Ne bridez pas votre imagination pour le moment, on s'occupera plus tard des contraintes techniques.

Ouvrez un nouveau document pour votre bannière. J'ai personnellement choisi 1400*400px


Commencez maintenant à découper cette bannière celon votre croquis. Ma page faisant 1000px, je veux faire dépasser 200px de chaque côté.



J'ai également choisi de placer un menu de 180px à gauche.

 

Une fois que vos découpages sont terminés, placez votre render et réservez vous une petite place pour un titre quelconque.



Vous pouvez maintenant faire votre bannière. J'ai personnellement fait très simple, mais laissez aller votre imagination.



Une fois cela fait, découpez la (ou non) ajoutez votre cadre, votre typo... Faites les finitions ;)

Vous n'avez plus qu'à intégrer cette bannière dans le squelette de votre page.

Réutilisez votre render, les textures ou un découpage particulier de votre bannière pour faire les autres éléments.
Mon idée ici était de rester dans les tons du render, beaucoup de gris et quelques éléments rouges. J'ai donc récupéré la texture créée précédemment ainsi que le chat découpé du render pour le premier titre des articles. J'ai également utilisé le kunai ensanglanté pour marquer la fin des articles. Enfin, j'ai repris l'idée des notes explosives pour les menus.

/!\ Mettez bien tous vos éléments sur des calques différents !

Une fois que vous êtes satisfait de l'apparence général de votre page, il faut réfléchir à comment placer tout ça en CSS. Commencez par définir où vont se placer les éléments suivant :
• #background
• #header
• #content
• #menu1
• #menu2
Oui, à ce stade, vous êtes obligés de savoir les sélecteurs d'EklaBlog pour connaître vos possibilités.
Si vous arrivez à placer tout cela correctement, vous êtes tranquille pour la suite, car se sont les principaux conteneur.

Si vous ne savez pas par où commencer, voici quelques pistes. Evidemment, tout va dépendre de votre design, je ne peux pas tout expliquer au cas par cas ;)

Si vous choisissez de travailler en px :

• Si un/vos #menu1(2) ou votre #content se trouve en haut de la page, votre #background doit prendre toute la hauteur de la page.
• Si vous voulez pouvoir afficher un titre/slogan ou revenir à l'accueil en cliquant sur la bannière, pensez à laisser une place pour #header, quitte à ce qu'il soit invisible, cela vous permettra d'utiliser #titre_header a
• Sachez que vos articles et leurs titres se trouvent dans le #content

Si vous travaillez en % ou em :

• Tous les éléments peuvent être positionné de manière totalement indépendante grâce à la proprité position: absolute; vous n'aurez donc pas de problème pour les placer avec les marges.
• Votre principal problème sera d'arriver à les positionner de la même façon sur tous les écrans ( il faudra pour cela que toutes vos valeurs de positionnement ai la même unité, et que vos éléments aient des tailles dynamiques)

Pour ma part, j'ai choisi de travaillé en px. J'en arrive au découpage suivant :



Maintenant que vous savez exactement seront placés vos éléments, il faut que vous réfléchissiez comment intégrer les images à votre page. Vous ne pourrez bien souvent pas les placer directement en temps qu'arrière plan de votre élément, il va falloir faire un petit peu de gymnastique ;)

Encore une fois, je ne peux pas tout traiter au cas par cas, ça vient avec l'entrainement. Voici néanmoins quelques conseils :

/!\ Ne mélangeons pas le vocabulaire.
- Ce que j'appelle la fenêtre correspond à #body
- La page correspond à #background

• Un arrière plan ne pourra jamais dépasser la taille de l'élément auquel il est attaché. Si votre image est plus grande que votre élément, vous êtes donc obligé de la placer en arrière plan de l'élément du dessous.
=> Dans mon exemple, ma bannière est plus large que ma page, je suis donc obligé de la mettre en fond de fenêtre.
• Si votre image doit se répéter en mosaïque, horizontalement ou verticalement, vérifiez qu'elle peut le faire sans coupure, et que l'élément auquel vous voulez l'attacher s'y prête.
• Faites attention à l'ordre dans lequel s'affiche les éléments : #body -> #background -> #header, #content, #menu1(2), #footer -> .module_contenu_block ...
=> Mon image de fond de page à la même largeur que ma page. Seulement, je veux qu'elle apparaisse derrière ma bannière, qui se trouve dans #body. Je dois donc également mettre cette image dans #body.

Vous pouvez maintenant enregistrer toutes vos images séparément, et passer à la feuille de style de votre blog. Il faut à présent reproduire ce que vous avez sur votre logiciel grâce au CSS.

Armez vous de patience pour cette partie. Il est rare que tout fonctionne parfaitement du premier coup. Lorsque vous avez un problème d'affichage, dites vous bien que le CSS fonctionne de façon parfaitement logique, revoyez votre résonnement. N'hésitez pas à mettre des bouts de code en commentaire.
Votre navigateur ne les lira pas, et cela vous permettra de voir quelle partie ne marche pas.

Pour rappel, un commentaire s'écrit de la façon suivant en CSS :

Lorsque vous placez vos différents éléments, entourez-les de bordures provisoires. Cela vous permettra de bien vous rendre compte de la taille et de la position de ces éléments :

Pour ceux qui ne sauraient pas par où commencer, voici comment je procède :

1- Placez correctement toutes les images de #body
2- Définissez la largeur de votre page, et placez les images dans #background
3- Définissez la taille et les images de #header
4- Placez le(s) #menu1(2) sans pour l'instant vous occuper de leur contenu (module et titre)
5- Placez et définissez la taille et les images éventuelles de #content

Une fois que tous ces éléments sont correctement positionné, occupez vous de tous les petites éléments restant, les articles, les modules, les titres...

Après quelques heures (et oui, je n'ai jamais dit que ça serait rapide), voici mon thème installé :