•  

    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>
    

    3 commentaires
  • SelecteurExempleExplicationCSS
    .classe .exemple Selectionne tous les éléments avec class="exemple" 1
    #id #prenom Selectionne l'élément avec id="prenom" 1
    * * Selectionne tous les éléments 2
    element h1 Selectionne tous les éléments <h1> 1
    element,element div,p Selectionne toutes les balises <div> et toutes les balises <p> 1
    element element div p Selectionne toutes les balises <p> contenues dans les balises <div> 1
    element>element div>p Selectionne toutes les balises <p> dont le parent est une balise <div> 2
    element+element div+p Selectionne les balises <p> placées immédiatement après une balise <div> 2
    [attribut] [target] Selectionne tous les éléments qui ont un attribut target 2
    [attribut=valeur] [target=_blank] Selectionne tous les éléments dont l'attribut target="_blank" 2
    [attribut~=valeur] [title~=fleur] Selectionne tous les éléments dont l'attribut title contient le mot "fleur" 2
    [attribut|=valeur] [lang|=fr] Selectionne tous les éléments dont l'attribut lang commence par "fr" 2
    :link a:link Selectionne tous les liens non visités 1
    :visited a:visited Selectionne tous les liens visités 1
    :active a:active Selectionne le lien actif 1
    :hover a:hover Selectionne les liens survolés par la souris 1
    :focus input:focus Selectionne l'élément input qui a le focus 2
    :first-letter p:first-letter Selectionne la première lettre de chaque balise <p>_ 1
    :first-line p:first-line Selectionne la première ligne de chaque élément <p> 1
    :first-child p:first-child Selectionne chaque élément <p> qui est le premier enfant de son parent 2
    :before p:before Insère du contenu avant chaque élément <p> 2
    :after p:after Insère du contenu après chaque élément <p> 2
    :lang(langage) p:lang(it) Sélectionne chaque élément <p> avec la valeur de l'attribut lang commençant par "it" 2
    element1~element2 p~ul Sélectionne chaque élément <ul> qui est précédé d'un élément <p> 3
    [attribut^=valeur] a[src^="https"] Sélectionne chaque élément <a> dont la valeur de l'attribut source commence par "https" 3
    [attribut$=valeur] a[src$=".pdf"] Sélectionne chaque élément <a> dont la valeur de l'attribut src finit par ".pdf" 3
    [attribut*=valeur] a[src*="eklablog"] Sélectionne chaque élément <a> dont la valeur de l'attribut src contient la chaine "eklablog" 3
    :first-of-type p:first-of-type Sélectionne chaque élément <p> qui est le premier élément <p> de son parent 3
    :last-of-type p:last-of-type Sélectionne chaque élément <p> equi est le dernier élément <p> de son parent 3
    :only-of-type p:only-of-type Sélectionne chaque élément <p> qui est le seul élément <p> de son parent 3
    :only-child p:only-child Sélectionne chaque élément <p> qui est le seul enfant de son parent 3
    :nth-child(n) p:nth-child(2) Sélectionne chaque élément <p> qui est le secont enfant de son parent 3
    :nth-last-child(n) p:nth-last-child(2) Sélectionne chaque élément <p> qui est le secont enfant de son parent en partant du dernier 3
    :nth-of-type(n) p:nth-of-type(2) Sélectionne chaque élément <p> qui est le second élément <p> de son parent 3
    :nth-last-of-type(n) p:nth-last-of-type(2) Sélectionne chaque élément <p> qui est le second élément <p> de son parent, en comptant depuis le dernier 3
    :last-child p:last-child Sélectionne chaque élément <p> qui est le dernier enfant de son parent 3
    :root :root Sélectionne l'élément racine du document 3
    :empty p:empty Sélectionne chaque élément <p> qui n'a pas d'enfant.(Y compris les noeuds texte) 3
    :target #news:target Selects the current active #news element (clicked on a URL containing that anchor name) 3
    :enabled input:enabled Sélectionne chaque élément <input> actif 3
    :disabled input:disabled Sélectionne chaque élément <input> désactivé 3
    :checked input:checked Sélectionne chaque élément <input> coché 3
    :not(selecteur) :not(p) Sélectionne tous les éléments qui ne sont pas des <p> 3
    ::selection ::selection Sélectionne l'élément surligné 3

    2 commentaires


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