Blog de Geeek, le blog geek par excellence par Ludovic Toinel ... - Balise - css

Astuce Dotclear #3 : Comment avoir des articles lisibles

Ludovic Toinel — Sun, 10 Aug 2008 23:14:00 +0200

Dans le thème par défaut de Dotclear 2, les articles mis en page sans style particulier. Les sauts de ligne ne sont pas assez important entre les paragraphes et le texte n'est pas justifié.

Voici une petite astuce qui vous permettra d'avoir des articles plus clairs et plus lisibles. Il suffit pour cela d'éditer le fichier CSS de votre thème et d'ajouter ou de remplacer le style suivant :

.post-content p, .post-excerpt p{

        margin-bottom: 8px;

        text-align: justify;

}

C'est très simple comme astuce, mais cela vous permettra de bien séparer physiquement les paragraphes et de justifier l'alignement du texte.

Dust-Me Selectors : Une solution simple pour nettoyer ses feuilles de styles

Ludovic Toinel — Sun, 10 Aug 2008 22:24:00 +0200

Comme vous le savez, il est n'est pas simple de maintenir correctement des feuilles de styles.

Au fur et à mesure que les pages Web évoluent, il est impossible de distinguer dans une feuille de styles les styles qui sont utilisés de ceux qui ne le sont plus.

Après quelques recherche sur Google, je suis tombé sur un plugin Firefox très intéressant qui permet de générer un rapport sur les styles inutilisés dans les CSS après une analyse complète d'un site.

Ce plugin s'appelle Dust-Me Selectors et est téléchargeable à cette URL :

http://www.sitepoint.com/dustmeselectors/

Après l'analyse réalisée, il suffit ensuite de supprimer manuellement les styles inutilisés dans les vos CSS. Encore un plugin ultra pratique qui vient s'ajouter à mes plugins favoris : Firebug et Web Developper.

La CSS Naked Day c'est aujourd'hui !

Ludovic Toinel — Wed, 09 Apr 2008 07:54:00 +0200

C'est donc normal si le blog n'a plus de thème aujourd'hui.

http://naked.dustindiaz.com/

CSS Naked Day 2008

Ludovic Toinel — Wed, 02 Apr 2008 00:22:00 +0200

La CSS Naked Day 2008 n'est pas encore annoncée officiellement. L'année dernière, elle a eu lieu le 5 Avril, aura t'elle lieu cette année ?

Le site officiel du mouvement est : http://naked.dustindiaz.com/

Sur le site Xhtml.com, il est annoncé que la journée aura lieu le 9 Avril.

Alors ? Qui suivra le mouvement le 9 Avril prochain ?

Petit rafraichissement du thème du blog

Ludovic Toinel — Fri, 31 Aug 2007 23:19:00 +0200

Petit rafraichissement du thème du blog ...

Un petit CTRL+F5 sera nécessaire pour les personnes qui ont toujours l'ancienne CSS dans leur cache

Bonne soirée !

Un menu déroulant transparent avec Scriptaculous + CSS

Ludovic Toinel — Fri, 20 Apr 2007 23:40:00 +0100

Vous ne l'avez peut être pas encore remarqué mais le menu du blog a pas mal changé cette semaine. J'ai mis en place Scriptaculous et j'ai joué avec la CSS du thème pour faire quelque chose de sympa visuellement.

Alors pour les néophytes voici quelques explications :

Tout d'abord j'ai téléchargé les scripts Javascript de Scriptaculous (http://script.aculo.us/downloads).
J'ai copié l'ensemble des fichiers javascript de scriptaculous (fichiers .js), ainsi que le fichier prototype.js à l'intérieur du répertoire "js" de mon thème Dotclear (/themes/mon_theme/js/).
J'ai édité le fichier _top.html de mon thème et j'ai ajouté les lignes HTML suivantes pour inclure les scripts de Scriptaculous et de Prototype dans la page :

<script src="/themes/geeek.org/js/prototype.js" type="text/javascript"></script>

 <script src="/themes/geeek.org/js/scriptaculous.js?load=effects" type="text/javascript"></script>

Remarque : "geeek.org" est le nom du thème que j'utilise.

Ensuite j'ai ouvert le fichier _top.html pour y ajouté le contenu de mon menu :

<div id="menu">

<ul>

    <li>

    <a href="#" title="Dotclear2" onclick="new Effect.toggle('sousMenu1','blind')" >Menu1</a>

     <ul id="sousMenu1" style="display: none" class="sousMenu">

      <li>

                <a href="#" >Item1</a>

      </li>

      <li>

                <a href="#" >Item2</a>

      </li>

      </ul>

     </li>

</ul>

</div>

Remarque : Le javascript inséré à l'intérieur du menu utilise les fonctionnalités de Scriptaculous :

onclick="new Effect.toggle('sousMenu1','blind')"

J'ai ajouter à la feuille styles de mon thème les styles qui vont permettre au menu d'avoir une apparence agréable et une transparence :

#menu {

        color: #FFF;

        width: 680px;

        height: 26px;

        background: #fff url(img/menu.png) repeat-x left top;

        margin-left: 20px;

 }

 

 #menu ul{

        margin-left: 20px;

 }

 

 #menu li{

        display: inline;

        list-style-type: none;

        float: left;

 }

 

 #menu a {

        font-weight: bold; 

        font-size: 10pt;

        color: #ffffff;

        text-decoration: none;

        margin: 0px;

        padding-left: 25px;

        padding-right: 25px;

        border-left-style: solid;

        border-left-width: 1px;

        border-left-color: #AAAAAA;

 }



 #menu a:link {

        color: #ffffff;

 }

 

 #menu a:visited {

        color: #eeeeee;

 }



 #menu a:hover {

        color: #FF8800;

 }



 #menu a:active {

        color: #FF9900;

        text-decoration: underline overline;

 } 

 

 #menu .sousMenu

 {

        margin : 5px 0 0 0 ;

        position: absolute;

        border-left: 3px solid #555;

        border-right: 3px solid #555;

        border-bottom: 5px solid #555;

 } 

  

 #menu .sousMenu li

 {

        display: block;

        float: none;

        border-top: 1px solid #AAA;

        background-color: #555;

        margin: 0px;

        padding: 2px;

        filter:alpha(opacity=70); 

        -moz-opacity:0.7;

        opacity: 0.7;

       -khtml-opacity: 0.7;

 } 

 

 #menu .sousMenu a {

        padding-left : 5px;

        padding-right : 5px;

        font-weight: normal; 

        font-size: 9pt;

        border: 0px;

 }



 #menu .sousMenu li:hover {

        filter:alpha(opacity=90); 

        -moz-opacity:0.9;

        opacity: 0.9;

        -khtml-opacity: 0.9;

 }

Et le tour est joué