• Les Tutoriels de Codages CSS

    Sur cette rubriques, je mettrais, comme le nom l'indique, du codage. Je compte surtout faire du CSS. Qu'est-ce que le CSS ? 

    Je pense que pour résumer simplement ce qu'est ce langage pour coder, il faut le voir comme un moyen de décorer son blog. Ce n'est, à mon sens, pas un langage réel de programmation mais plus un langage de décoration pouvant rendre votre blog plus attractif.

    J'espère que je serais claire dans les codes que je publierais ici afin que cela vous plaise. 

    Déjà, je vous conseille de demander au staff d'Ekla d'activer le Javascript (normalement automatiquement désactivé) pour pouvoir coder comme vous le voulez. 

    Les articles : 

    Comment marche le CSS?

    Les Sélecteurs sur Eklablog 

    Trouver un sélecteur

    Changer une police d'écriture

     Modifier la taille d'un module

  • Où mettre le code CSS lorsque vous codez?  Il vous faut aller sur votre blog dans "Apparence" → "Modifier le thème" → "Ajouter du CSS"

    Ce n'est pas plus compliqué que cela pour en ajouter. La plateforme vous laisse l'occasion de personnaliser votre blog grâce à ce langage.

    Mais alors... Comment se présente le code en lui même? Et bien , toujours de la même façon:

    sélecteur {

    propriété : valeur ;

    propriété : valeur ;

    }

    Voilà! Cela se présente toujours de la même façon ! Dans un sélecteur, vous pouvez mettre autant de propriétés que vous le souhaitiez! 

    Alors le sélecteur désigne la partie du blog que vous voulez modifier avec le codage. La propriété désigne ce que vous voulez modifier dans cette partie de votre blog et la valeur correspond à ce que vous voulez que ça donne. 

    Un exemple: 

    #body {text-shadow Orange 3px 2px 10px;}

    Etudions ce code: 

    #body est le sélecteur, il désigne tout le blog.

    text-shadow est la propriété, là, on veut mettre une ombre (ou un halo lumineux) sur le texte du blog.

    Orange 3px 2px 10px désigne la valeur. Orange est la couleur de l'ombre, et les 3px 2px 10px correspondent à la position de l'ombre par rapport au texte. 

    Ne vous en faites pas, je ferais un article pour vous présentez les sélecteurs et un autres pour les propriétés et les valeurs ;)

    Voilà! Sur ces bonnes paroles, je vous laisse pour cette fois ♥


    votre commentaire
  •  Je viens de trouver un magnifique blog qui a répertorié tous les sélecteurs et qui donne, en plus de cela, beaucoup d'astuces pour le codage. Je vous invite à vous y rendre :

    ICI


    votre commentaire
  • En voilà un titre d'article bien long mais qui résume bien ce que je vais vous expliquer à présent. Avec Eklablog, vous avez la possibilité de changer la police d'écriture de votre blog. Bon, ok, on est d'accord que les polices proposées par la plateforme sont assez basiques et peu variés. Si vous voulez mettre un peu de grain de folie dans votre blog, comme par exemple mettre une police un peu particulière pour le titre de votre blog sur le header, et bien, cela est possible. 

    Je vais donc vous expliquer comment faire. 

    Tout d'abord, vous devez vous rendre sur ce site : https://www.dafont.com/fr/. Vous y trouverez forcément votre bonheur en terme de police. Une fois que vous avez trouvez le style de police que vous recherchiez, vous la téléchargez. Attention, les fichiers sont en ZIP, vous devez extraire leur contenu. Peu importe où vous stockez ces polices sur votre ordinateur.

    Ensuite, sur Eklablog, vous allez sur votre blog et vous allez dans: "Contenu"→"Gérer les fichiers"→"Uploader un fichier". Là, vous sélectionner votre police qui sera donc disponible dans vos fichiers sur votre blog.

    Après, vous vous rendez dans l'interface pour modifier les codes CSS et vous mettez ce code: 

     

    @font-facefont-family"Nom_De_Police";  
        
       srcurl('url de votre police');    
    }

     

    Les éléments en vert sont ceux que vous devez changer. Pour l'url de votre police, il vous suffit de retourner dans "Gérer vos fichiers", de cliquer sur la police et d'en copier l'url que vous collerez à l'emplacement que je viens de vous indiquer.

    Si vous voulez changer la police du titre de votre blog, il vous suffira de mettre ce code-ci:

     

    #titre_header {
        font-familyNom_De_Police;
        }

     

    Ce qui est en vert doit être changer selon le nom que vous avez donné, dans le code précédent, à votre police.

    Voilà! J'espère avoir été clair et que ce petit tuto vous aidera à personnaliser un peu plus votre blog pour ceux qui le souhaite.

    Si vous voulez un article sur un sujet précis de codage CSS, mettez en le commentaire. En ce qui concerne les questions, je reste à votre disposition.

    Changer la police d'écriture avec le CSS


    19 commentaires
  • Et me revoilà avec un article pour le codage CSS, aujourd'hui, je vais vous apprendre à trouver un sélecteur. En effet, même si on peut trouver des listes toutes faites (ici pour ceux qui veulent une liste assez complète de tous les sélecteurs possibles) et bien, il peut vous manquer l'élément que vous voulez modifier... Ce qui es assez dommage, n'est-ce pas? 

    Je pense qu'il vous sera plus simple de comprendre si vous le faisons avec un exemple. Imaginons que j'ai envie de modifier titre de header. Oui... mais voilà... je ne connais pas le sélecteur qui lui ai associé. 

    Pour trouver le nom du sélecteur, placez votre curseur sur l'élément dont vous souhaitez avoir le nom de sélecteur. Faites un clic droit et cliquez sur "inspecter".

    Trouver un sélecteur

    Vous allez avoir une cela qui apparaît: 

    Trouver un sélecteur

    Vous voyez que c'est divisé en deux parties. Regardez celle de droite. 

    Trouver un sélecteur

    Les sélecteurs ,pour la plupart, sont précédés d'un "#". En l'occurrence, on voit apparaître le sélecteur que nous souhaitions trouver. Il s'agit donc de  : #titre_header a

    Pour ceux qui sont un peu attentifs, vous avez, à côté, en gris clair : #titre_header a:hover 

    Le mot ":hover" est utilisé à la fin d'un sélecteur pour désigner les éléments quand ils sont survolés par le curseur. 

    J'espère avoir été claire pour vous indiquer la marche à suivre pour trouver un sélecteur. Si, malgré ce que je viens de vous dire, vous ne trouvez pas celui que vous cherchez, dites-le moi en commentaire, j'essaierai de le trouver pour vous. 

    Changer la police d'écriture avec le CSS


    votre commentaire
  • Rappel: les modules sont les éléments qui composent les menus. 

    Dans cet article, je vais vous expliquer comment changer la taille (largeur et hauteur) d'un module dans votre menu. D'abord, il y a deux cas, si vous voulez changer la taille du module (contenu + titre) ou simplement la taille du contenu. Personnellement, quand vous modifiez la largeur, je vous conseille de modifier le module complet et, si vous modifiez la hauteur, je vous conseille de modifier uniquement le contenu. 

    Voici une légende qui vous sera utile dans la suite de l'article:

    ID : à remplacer par l'identifiant du module

    XX : à remplacer par un nombre

    La largeur:

    Pour modifier la largeur d'un module, il faut utiliser la propriété "width". Le codage est tout simple. Faisons un exemple: 

    #module_menuID {

    width: XXpx;

    }

     

    La hauteur:

    Afin de modifier la hauteur d'un module, on utilise la propriété "height". Voici le code CSS correspondant, en sachant que ce code ne modifie que le contenu du module:

    #module_menu_contenuID .module_menu_contenu {

    height: XXpx;

    }

     


    votre commentaire


    Suivre le flux RSS des articles de cette rubrique
    Suivre le flux RSS des commentaires de cette rubrique