• Ajouter une feuille de style

    Par Papasti dans Generalites le 5 Juin 2013 à 17:08

     

    Ce tuto nécessite que le javascript soit activé sur votre compte pour fonctionner.

    Sur Eklablog, il est possible via le menu (Apparence / Modifier le thème / Ajouter du CSS) de compléter la feuille de style. Alors, vous me direz: quel est l'intérêt d'ajouter une feuille de style ?

    Eh bien, il y a plusieurs raisons à cela:

    1. Pouvoir créer tranquillement sa feuille de style sur son PC puis la charger sur son blog
    2. Créer différentes feuilles de style qui seront chargées au choix de son visiteur
    3. Pouvoir utiliser des propriétés ou sélecteurs CSS qui ne sont pas acceptés par l'éditeur d'Eklablog (TinyMCE)

    Remarque: En cas d'utilisation de propriétés ou sélecteurs non reconnus par TinyMCE et une fois votre feuille de style CSS uploadée sur votre blog, il ne faut évidemment pas l'ouvrir avec l'éditeur d'Eklablog. Sinon, vous perdrez vos précieuses propriétés et vous serez obligés d'uploader à nouveau votre fichier.

    Dans la procédure qui suit, on va juste ajouter une feuille de style à celle déjà présente sur votre blog. Ainsi, il n'est nécessaire d'y placer que le code CSS supplémentaire. Le code de la page d'accueil de votre blog commence comme ci-dessous et ce qui nous intéresse est à la ligne 18 (surlignée):

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Ajouter une feuille de style - Tout le CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="identifier-url" content="http://toutlecss.ek.la" />
<meta name="robots" content="index, follow" />

<meta property="og:title" content="Ajouter une feuille de style"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://toutlecss.ek.la/ajouter-une-feuille-de-style-a91836413"/>
<meta property="og:site_name" content="Tout le CSS"/>
<meta property="og:description" content="Sur Eklablog, il est possible via le menu (Apparence / Modifier le thème / Ajouter du CSS) de compléter la feuille de style. Alors, vous me direz: quel est l'intérêt d'ajouter une feuille de..."/><link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://toutlecss.ek.la/xmlrpc.php?rsd" />


<link rel="stylesheet" media="screen" type="text/css" title="Design" href="/themes/style.css?21953" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" id="css_theme" href="http://ekladata.com/theme-283317-171.css" />
<link rel="alternate" type="application/rss+xml" href="/rss/" title="Flux RSS des Articles" /><link rel="alternate" type="application/rss+xml" href="/rss/comments/" title="Flux RSS des Commentaires des articles" /><link id="favicon" rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /><!--[if IE]>
<style type="text/css">
* {zoom: 1;}
</style>
<![endif]-->

    En effet, c'est cette ligne qui charge le CSS de votre blog. Comme je le disais plus haut, on ne va pas toucher à cette ligne mais en ajouter une supplémentaire. Supposons que nous souhaitions utiliser le code CSS suivant:

    .moncube
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

    Faites l'essai sur votre blog et vous verrez que l'éditeur vous indique que le CSS comporte une erreur. Et pourtant, ce CSS est parfaitement valide mais l'éditeur ne sait pas l'interprêter. Ce CSS aura pour effet le suivant :

     

    Pour obtenir cela, vous allez créer un fichier (par exemple avec Notepad ++) que vous nommerez styleperso.css et dans lequel vous placerez le code css ci-dessus (ou un autre si vous le désirez). Uploadez ensuite ce fichier parmi les fichiers de votre blog et récupérez son url.

    Enfin, vous allez placer le code javascript ci-dessous dans un module simple HTML en veillant à y mettre l'url de votre fichier de style (ligne 10). Je rappelle que vous devez éviter d'ouvrir ce fichier avec l'éditeur d'Eklablog sauf s'il ne contient que du css basique.

    <script type="text/javascript">// <![CDATA[
	if(typeof(onJSFilesLoaded) != "object") onJSFilesLoaded = [];   
	onJSFilesLoaded.push(function(){   
		var st=$('css_theme');
		var myCSS  = new Element('link', {
		id:  'complement_css',
		rel: 'stylesheet',
		type: 'text/css',
		media: 'screen',
		href:'lien vers votre fichier de style'});
		myCSS.inject(st, 'after');});
// ]]></script>

  • Commentaires

    1
    photo-portrait-arts Profil de photo-portrait-arts
    Lundi 9 Septembre 2013 à 11:20

    erci pour votre enseignement

    Répondre
    2
    Francois Profil de Francois
    Jeudi 19 Septembre 2013 à 21:32
    Francois

    ENORME ! Merci

    Répondre
    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    3
    La Gentille Rebelle Profil de La Gentille Rebelle
    Samedi 22 Mars 2014 à 09:34
    La Gentille Rebelle

    Merci pour ce script ! ça allège mon css dans option de thème, on sy perd parfois lol

    Répondre
    4
    Alexminecraft
    Lundi 2 Avril 2018 à 10:04

    Et bien moi qui commence à m'intéressé à la programmation, ça va m'intéresser ces articlesyes

     

    Répondre
    5
    Déka. Profil de Déka.
    Mardi 25 Avril 2023 à 19:25
    Déka.
    Je comprend pas ce que tu entend dans fichier. avec quelle appli on fait ça ?
    Répondre
    6
    Déka. Profil de Déka.
    Mardi 25 Avril 2023 à 19:27
    Déka.
    à part avec notpad ++ car je l'ai pas
    Répondre
    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :