• Thème Complet [ Avancé ]

    Un tutoreil plus simple sera disponible dans le courant de la semaine. Si vous n'êtes pas très à l'aise avec le CSS, je vous déconseille de suivre ce tuto.

     

    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 :

    Hiver

    Pour suivre ce tuto, vous aurez besoin :

    • D'un logiciel de graphisme où vous pouvez utiliser les calques ( photofiltre studio, gimp, photoshop...)
    • De maitriser maitriser ce logiciel
    • De bonnes connaissances dans la structure HTML d'une page EklaBlog
    • De maitriser le CSS
    • D'un peu d'imagination
    • Et de beaucoup de patience

    Si vous disposez de tout cela, on peu commencer.

    Step 1 : Croquis

    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.

    Thème de A à Z

    Step 2 : Bannière

    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.

    Step 3 : Autres éléments graphiques

    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 !

    Thème de A à Z

    Step 4 : Découpage CSS

    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 :

    Thème de A à Z

    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 ;)

    Vous allez donc utiliser la propriété background, un petit rappel ne peut pas faire de mal :

    sélecteur { background: valeur; }

    On peut découper cette propriété général en plusieurs sous-propriété : background-color, background-image, background-position... Heureusement, il est possible de tout ecrire d'un coup. Faites bien attention à l'ordre ! Si vous ne souhaitez pas préciser la couleur, l'image, la position... Laissez simplement le champ de cette valeur vide.

    background : #COLOR url(IMAGE) repeat fixed Xpx Ypx;

    Mais la grande force de cette propriété est qu'elle permet de définir plusieurs images d'arrière plan, en définissant séparément leurs position, si elles se répètent, si elles sont fixes... L'ordre à bien évidemment son importance, la première image sera l'image de premier plan, la dernière celle d'arrière plan.

    background : url( 1er plan ), url( 2eme plan), url( 3eme plan ) ;

     


    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.

    Thème de A à Z

    Step 5: Placement CSS

    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 :

    /**COMMENTAIRE**/


    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 :

    border: 2px solid red;



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

    Thème de A à Z

     

    J'espère que ce tutoriel vous aura été utile :)

  • Commentaires

    1
    Mardi 17 Décembre 2013 à 16:18

    Oh merci de ce tutoriel !

    2
    Mercredi 18 Décembre 2013 à 13:52

    Perfect o/

    Je met toujours des heures à faire mes thèmes, mais j'ai pas vraiment de plan, je fais tout au feeling xD

    Ce tuto va bien m'aider ;')

    3
    Vendredi 20 Décembre 2013 à 12:37

    Merci beaucoup Nagalia, je te pique cette idée, mais la prochaine fois je promets que je fais un truc toute seule!

    4
    Mardi 21 Janvier 2014 à 14:09

    Je trouve le tuto super mais je suis nulle en CSS donc je peux rien faire :(

    5
    Mardi 21 Janvier 2014 à 18:20

    Le tuto 100% graphisme met un peu plus de temps que prévu à arriver... J'essaie de me dépêcher, désolé pour le retard ^^'

    Mais rien ne t'empêche d'aller éplucher le web pour apprendre le css ;)

    6
    Mardi 21 Janvier 2014 à 18:41

    Ok :) Je vais voir pour le CSS :)

    7
    Samedi 8 Mars 2014 à 17:52

    Je n'arrive pas a mettre ce CSS

    background : #COLOR url(IMAGE) repeat fixed Xpx Ypx;

    8
    Dimanche 23 Mars 2014 à 19:11

    merci beaucoup pour ce tuto j'adore ^^

    j'ai pris quelques trucs dans le css du thème "kakashi" he et j'ai pas fini de tout remplacer:

    http://the-wonderland.eklablog.com/

    mais l'idée du menu en haut est super ^^

    9
    Dimanche 23 Mars 2014 à 21:05

    De rien :)

    @ Filipa : Il ne faut pas placer ce code tel quel dans ton CSS ;) Chaque valeur doit être remplacée. 

    10
    Dimanche 23 Mars 2014 à 21:05

    A ok merci

    11
    Samedi 6 Septembre 2014 à 15:50

    Bonjour,

     

    Pourquoi utiliser du 2000* 1000 et pas un autre format ?

    12
    Dimanche 7 Septembre 2014 à 14:46

    Tu peux utiliser un autre format... mais 2000*1000 me semble bien, il représente la taille de ton écran. Après, tu peux faire en fonction de ton propre écran pour que tu n'ai pas besoin de scroller, car 2000*1000 peut parraitre assez large.

    Mais essaye de faire la hauteur plus petite que la largeur (ou vis-versa, en gros, fais un rectangle x) pour bien te représenter les choses ! (après, c'est à toi de voir, si ça te dérange pas de travailler de telle ou telle façon, etc...)

    13
    Mercredi 10 Septembre 2014 à 03:04

    Mais je comprend pas comment, en utilisant un tel format pour le background du site, comment ça peut s'aapter a n'importe quelle taille d'ecran de pc :s

    14
    Mercredi 10 Septembre 2014 à 12:43

    Bah, pour faire simple, le document à ouvrir, c'est pas pour ton background, c'est pour schématiser ton nouveau thème !

    Ton background tu le fais du format que tu veux ! (je saurait pas expliquer xD)

    15
    Mercredi 10 Septembre 2014 à 17:00

    Ok =)

    Je sais qu'il existe un moyen de faire en sorte que le background se modifie de maniere proportionnée quand on modifie la taille du navigateur (ou bien en fonction de la taille de l'ecran) mais je galère a trouver si c'est possible sur ekla ^^

    16
    Mercredi 10 Septembre 2014 à 20:55

    Il faut utiliser

    background-size: cover;

    Voici l'article complet sur le background en css si ça t'intéresse :

    => http://fanstasy-graph.eklablog.net/les-fonds-a5355714

    17
    Vendredi 13 Février 2015 à 17:10

    Coucou, quel code tu as mis pour que le menu 1 soit en haut sans que sa taille change si on zoom sur l'écran ?

    18
    Samedi 4 Avril 2015 à 22:03

    Elfeddy je suis allez voir ta version Wouaouuuuuuuuuuuuuu tu a cartonné magnifique version


     


    et merci Nagalia pour ce magnifique tutoriels ses Wouaouuuuuuuuuuuuuuuuu j' adore  j' adore

    19
    Mercredi 13 Juillet 2016 à 09:20

    Je comprend pas trop comment ça marche le CSS mais je vais me renseigner merci pour le tuto.

    20
    Dimanche 9 Avril 2017 à 17:57
    angelilie

    beau blog. un plaisir de venir flâner sur vos pages. une découverte et un enchantement.N'hésitez pas à venir visiter mon blog en lien ici : http://mondefantasia.over-blog.com/ au plaisir

    21
    Dimanche 30 Juillet 2017 à 14:26

    Super Tuto ! :3 

    Mais j'aimerais savoir comment es-tu passée de ça à ça? :/ 

      • Lundi 31 Juillet 2017 à 19:19

        Une simple découpe avec les outils de sélection de photoshop.

        J'ai deux calques : un pour le fond et un pour le render

        Je commence par celle du milieu : sélectionne un rectangle sur le calque de fond et supprime cette partie. Le render n'est pas affecté.

        Découpe du bas : avec le lasso trace un triangle pour avoir une diagonale. Supprime la sélection sur le calque du fond et sur le calque du render

        Les dégradé sur les côté : sélection rectangulaire + contour progressif et on supprime

        J'espère que ça a pu t'aider :)

         

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :