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é :

Je vais principalement parler des thèmes sur EklaBlog, parce que 90% des visiteurs sont inscrits sur cette plateforme. Mais cela s'applique à tout site internet.

Pardonnez moi cette intro un peu niaise, mais qui n'a jamais hurlé en voyant un blog avec des gif animés de partout, des images plus grandes que l'écran, des couleurs vives de tout les côtés, du texte énorme à toute les sauces... Et j'en passe. Voici donc un petit récapitulatif des choses à faire et à éviter lors de la mise en place de votre thème.

-> La lecture sur un écran n'est pas forcément agréable. Alors mettez vous à la place de potentiels lecteur qui essaie de s'intéressés à vos articles, mais dont le regard est sans cesse attiré par de nouvelles animation.
Impossible de se concentrer sur quoi que se soit, et ça fini par donner mal à la tête.

De plus, on a rapidement une impression de "trop chargé", ce qui est assez désagréable, car on ne sais plus ou regarder. Je pense nottemment à ceux qui mettent des fonds à paillette animés : Le fond bouge, donc on regarde le fond, et on n'arrive pas à se concentrer sur les articles qui sont peut être très intéressant. Résultat, au bout de quelques secondes, voir de quelques minutes pour les plus patient, on clique sur la petit croix rouge qui nous délivre de ce cauchemar épileptique.

Je ne dis pas qu'il est interdit de mettre des gif, mais si vous n'êtes pas capable de définir quand ils sont utiles (et pas seulement décoratif) évitez, vous garderez des visiteurs. Car l'animation attire le regard. Vous pouvez donc les utilier dans vos article, pour mettre en valeur certaines parties.

Alors, les couleus, c'est super. Même sans aucune image, elles permettent de définir l'ambiance de votre blog. Et c'est justement pour cela qu'il faut savoir les utiliser correctement, et ne pas faire comme un peintre débuttant qui vide tous ses tubes sur une toile, juste pour la colorer. La couleur doit servir à donner un thème, expliquer implicitement de quoi traite votre blog, donner l'ambiance qui vous permettra de garder le type de visiteur voulu.

Tout comme les gif, les couleurs vives attirent le regard et rendent la lecture pénible, voir impossible. De ce fait, il ne faut jamais les utiliser comme fond de page. Vous pouvez donc bannir immédiatement les couleurs suivantes de vos idées de design :

J'insiste. Ces couleurs sont très jolies, alors n'écrivez pas dessus, ni en noir, ni en blanc, et encore moins avec autre chose.
Parlons d'écriture justement. Tout un texte écrit uniquement avec l'une des couleurs ci-dessus est illisible. Les couleurs saturées sont à utiliser avec parcimonie, pour mettre en valeur un élément par exemple. Une phrase ou quelques mots d'un texte écrits avec une couleur vive attirons l'attention du lecteur ;)

Pour vos fond d'articles, vous pouvez par exemple utiliser des couleurs claires ou désaturées :

Vous pouvez également utiliser des couleurs sombres, mais pensez bien à l'ambiance que vous voulez donner à votre site. En revanche, elles sont souvent très bien en fond de page :

Pensez aux petits écrans, ne dépassez jamais 1000px de largeur de page. Il n'est jamais agréable de devoir scroller horizontalement sur une page web.
Toutefois, vous pouvez indiquer la largeur de votre page en % ou en em, ce qui lui permettra de s'adapter à tous les écrans. Notez cependant que si vous choisissez cette unité, vous devrez penser tout le reste de votre design en % pour qu'il ne change pas radicalement d'un écran à l'autre.

Je radote, mais un blog lisible aura plus de chance de garder ses visiteurs. Si l'on ne peut pas différencier vos articles de vos menus, si l'écriture est toute serrée, on ne s'y retrouve plus. Alors aérez.

La première chose à faire est d'espacer vos éléments des bords de l'écran. Que vous définissiez ensuite deux fond différents pour votre fond de page, et votre contenu, c'est votre choix de design, mais laissez au moins 50px, si ce n'est plus, entre vos articles ou vos menus, et les bords droit et gauche de l'écran.
De manière général, laissez au moins 10px d'écart entre deux éléments bien distincts. Cela dégagera des blocs et rendra la lecture plus agréable.

Vous pouvez accentuer cette démarcation grâce à des bordures, mais attention à ne pas en mettre partout, au risque de surcharger le design.

ATTENTION : Si vous utilisez des bordures, vous êtes obligez d'utiliser des marges internes pour "décoler" votre contenu des bordures.

De nombreuses personnes écoutent de la musique en surfant sur le web. Et vous savez tous qu'il n'y a rien de plus pénible que de se faire soudainement agresser par une page de publicité sonore qui se cache parmis vos nombreuses pages internet...
La musique qui démarre automatiquement sur les pages de votre site est traitée de la même façon qu'une publicité : on ferme la page.
Les playlistes automatiques sont donc à proscrire, si vous choisissez de mettre de la musique sur votre site, laissez toujours à votre visiteur le choix de l'activer.

La propriété filter en CSS3 permet de modifier de façon assez sympathique les couleurs d'un élément. Survoler les images pour voir l'effet

Blur permet de flouter un élément. Remplacez X par une valeur en px, indiquant l'étendu du flou. 0px laisse l'élément normal.

Grayscale permet de passer un élément de couleur en nuance de gris, 0 n'a aucun effet, et 1 passe l'élément en noir et blanc. Vous pouvez utiliser les décimaux de 0 à 1 (0.3 ; 0.4 ; etc...)

Le même fonctionnement que grayscale, en mettant l'élément en sepia. Utilisez les valeurs de 0 à 1.

Brightness vous permet d'augmenter la luminosité d'un élément.
0 represente le noir
1 l'élément normal
Vous pouvez ensuite aller jusqu'à 10 pour augmenter la luminosité

Même fonctionnement que brightness, Contrast permet d'augmenter le contraste entre les couleur.
0 n'a aucun contraste, ce qui affiche un élément gris
1 ne modifie rien
Vous pouvez ensuite aller jusqu'à 10 pour augmenter le contraste.

Hue-Rotate fait "tourner" la teinte des couleurs. En tournant de 180° vous inversez les teintes.
Je parle bien de teinte et non de couleur. Cette propriété n'a aucun effet sur les éléments en nuance de gris.

Invert inverse les couleurs d'un élément.
0 ne modifie rien
0.5 rend l'élément d'un gris uni
1 inverse totalement les couleurs

Saturate permet de modifer la saturation des couleurs.
0 met l'élément en nuance de gris
1 ne modifie rien
10 sature au maximum