Si vous souhaitez réaliser votre propre feuille de style CSS

Nous avons présenté dans deux précédents articles les feuilles de style CSS, et leur utilisation conjointe avec l’extension Firefox Stylish. Voici maintenant quelques conseils si vous souhaitez vous lancer dans la création de votre propre feuille de style CSS pour un site donné.

a) Récupérez la feuille de style CSS du style Web en question.

1. Affichez le code source de la page (combinaison de touches ctrl+U), et recherchez l’emplacement de la feuille de style CSS. Pour ce faire, faites la combinaison de touches ctrl+F et recherchez la chaine de caractères « .css« .
2. Vous obtenez alors soit une adresse internet entière, par exemple dans le cadre de mon blog, vous allez tomber sur http://s3.wordpress.com/wp-content/themes/pub/garland/style.css?m=1233010721b.
3. Sinon vous pouvez tomber sur une adresse relative (qui ne commence pas par http:// mais par /quelquechose). Auquel cas vous pourrez généralement reconstituer l’url entière de la feuille de css en accolant l’adresse realtive à l’adresse globale du site pour obtenir une adresse du style http://www.monsite.com/quelquechose.
4. Enregistrez le contenu texte de la feuille de style que vous obtenez sous un nom quelconque par exemple CssPersonaliséMonSitePointCom.css (en n’oubliant pas le plus important, l’extension .css).

b) Modifiez là à votre convenance en vous inspirant de l’existant.

1. D’abord il y a des choses complètement évidentes. Par exemple l’attribut background-color de la balise body désigne évidemment la couleur d’arrière plan du site. Allez sur code-couleur.com, choisissez une nouvelle couleur qui vous convient mieux, et remplacez le code hexadécimal de la feuille de style par celui que vous donne le site pour la nouvelle couleur choisie.
2. Ensuite comparez à grand renfort de ctrl+F quelles sont les correspondances des balises moins évidentes. Dans ce cadre l’utilisation de Firebug vous sera sans doute d’un grand secours tant pour établir les correspondances que pour avoir un petit aperçu de ce que vos changements vont donner.

c) Testez votre feuille de style sur le site concerné:

1. Repérez l’icone de Stylish en bas à droite du navigateur (elle ressemble à une feuille blanche avec un pinceau) et son nom apparait lorsque vous passez la souris dessus. Sinon vérifiez que vous avez bien installé Stylish.
2. Cliquez dessus, passez la souris sur « Ecrire un style« , faites votre choix dans le menu déroulant. Puis copiez collez votre feuille de style dans le cadre qui s’affiche en laissant en tête le code par défaut.
3. Validez, raffraichissez la page, et profitez :).

Je précise que je n’ai pas encore testé d’écrire ma propre feuille CSS dans ce cadre là. Si jamais le besoin s’en fait sentir, ou si l’un d’entre vous trouve quelque chose de pas clair et me le demande, j’éditerai pour expliquer commen pallier aux difficultés rencontrées éventuelles. Ceci dit tout me parait assez clair, et pour les anglophones, l‘aide de Stylish est très bien faite.

[Avancé] Comment appliquer récursivement une instruction à des fichiers sous Linux

recursion par sebr (cliquez pour afficher l'original)

Figurez vous qu’aujourd’hui même, on m’a transmis une archive contenant un meli-melo de fichiers .java et de fichiers .class avec pas mal de ramifications des dossiers. Or il se trouve que seuls les fichiers en .java m’intéressaient. Ne souhaitant pas passer des heures à pacourir les dossiers pour virer tous les .class manuellement, je me suis mis en quête d’une commande susceptible d’explorer récursivement les dossiers et sous dossiers, et d’en effacer tous les fichiers en .class.

Après quelques recherches dans les manpages, et quelques essais infructueux, j’ai posé la question sur irc (un salon de discussion en ligne), et j’ai immédiatement obtenu deux réponses toutes aussi fonctionnelles l’une que l’autre. Il suffisait de faire:

• soit find . -name ‘*.class’ | xargs rm -f
• soit find . -name ‘*.class’ -exec rm -v {} \;

Comme vous le voyez, les instructions sont composées de deux parties: la première, find . -name ‘*.class’, permet de rechercher récursivement tous les fichiers se terminant par ‘.class‘. La deuxième partie précise le traitement à appliquer aux fichiers. Les deux reviennent au même, mais la manière dont le résultat va être obtenu diffère.

Après discussion il est apparu que la première était la plus fonctionnelle au niveau de la rapidité d’exécution, car la commande rm est appelée une seule fois pour être appliquée d’un coup à toute la liste de fichiers,  tandis que la deuxième s’arrête à chaque fichier trouvé pour le supprimer avant de poursuivre la recherche, ce qui implique l’appel à la fonction rm autant de fois qu’il y a de fichiers, donc la création d’autant de processus, ce qui est couteux pour le système. Cependant la deuxième peut aussi avoir son intéret si un jour j’ai des dizaines de milliers de fichiers à supprimer, car il semblerait que le nombre d’éléments pouvant être passés dans un pipe (la barre verticale) soit limitée. Cela dit le débat reste ouvert car tous n’étaient pas d’accord sur la manière de procéder du Xargs. Voir la page de Wikipedia dédiée à Xargs (en) pour plus d’informations.

Pour conclure, ici on s’est intéressé à l’effaçage récursif d’un type donné de fichier, mais on remarquera aisément qu’en remplaçant rm par une autre commande, on peut généraliser ainsi l’application récursive d’une instruction à tous les dossiers et sous dossiers d’un répertoire.

note: ne pas faire attention aux options du rm. Je les ai reportées telles qu’on me les a données, mais il faut bien voir ce qu’elles veulent dire: le ‘-v’ de la deuxième commande, demande au rm de dire ce qu’il fait au fur et à mesure, et le ‘-f’ de la première commande demande d’ignorer les éventuels avertissements du système. Il convient de les modifier avec discernement en fonction de la situation.

PS: Faites des sauvegardes avant de faire des tests :).

Optimisez l’espace dans Firefox (2)

Capture d'écran prise en 1024x768 (cliquez pour agrandir)

Ce tutoriel fait suite à mon billet d’hier : Enlevez de votre navigateur toutes ces choses inutiles qui l’encombrent. Nous avons vu comment faire pour enlever une bonne part des barres diverses qui prennent de la place inutilement. Nous allons maintenant voir la suite.

1) On désactive l’affichage des menus superflus:
Tout d’abord ajoutez l’extension Menu Editor. Je rappelle que vous pouvez utiliser ce tuto si vous ne savez pas trop comment faire pour ajouter une extension. Après avoir redémarré Firefox, il faut aller dans outils -> Modules complémentaires -> Extensions, sélectionner l’extension Menu Editor dans la liste et cliquer sur Préférences. A partir de la boite qui s’ouvre, vous avez la possibilité de désactiver toutes les options dont vous ne vous servez pas dans les menus de Firefox (« menu contextuel principal » désigne le menu qui s’affiche lorsque vous faites un clic droit quelque part dans Firfox. Bien sûr tout ce que vous pouvez régler ne s’affiche pas d’un coup. Ca dépend de sur quoi vous avez cliqué droit).

2) On installe un thème compact:
Pour installer un thème, vous pouvez suivre ce tuto. Faites bien attention de choisir un thème portant le tag compact. Par exemple le thème que j’ai utilisé est le thème Chromifox 2. Si jamais vous voulez aussi l’avoir, notez bien qu’il est expérimental, et prévu pour la version 3.1 beta 1 ou supérieure de Firefox. Ca signifie que de même que dans mon tuto Deux extensions sympathiques pour booster la vitesse de Firefox, il va vous falloir vous créer un compte utilisateur sur le site, si ce n’est déjà fait (ce n’est pas bien compliqué, il faut donner une adresse email et un mot de passe). Par ailleurs, comme firefox 3.1 n’est pas encore sorti de manière stable, vous utilisez probablement encore Firefox 3.0. Ce qui implique qu’à moins d’installer la version beta de Firfox 3.1, au risque de perdre la compatibilité avec un grand nombre de modules, vous allez devoir ruser et désactiver les vérifications de sécurité suivant le deuxième exemple de mon tuto Configuration avancée de Firefox (Et même comme ça, ça ne fonctionne pas toujours, mais ça ne coûte rien d’essayer).

3) On gagne de la place:
Ceci fait installez l’extension Tiny Menu. Cette extension remplace l’ensemble des menus Fichier, Édition, Affichage, etc, par un un seul dans lequel les menus Fichier, Édition, Affichage, etc, sont des sous menus. Ça signifie que désormais il faudra une ramification supplémentaire pour atteindre quelque chose dans ces menus. L’intérêt de cette manipulation est qu’en général on n’utilise pascs menus de manière intensive (vu qu’il y a les raccourcis clavier), et qu’on peut donc récupérer la place que ces menus occupaient sans trop perdre en ergonomie.

4)Si comme moi vous faites un usage intensif des marque pages:
x Déjà en suivant le tuto de mon article précédent, ne masquez pas la barre personnelle qui contient probablement tous vos marque pages préférés.
x Ensuite, vous devez être un peu embêté à la suite de la dernière manipulation, parce que le menu Marque Pages, vous l’utilisez tout de même suffisamment souvent pour que le fait de ne plus y avoir directement vous gène. Eh bien on va s’occuper de régler ça. Installez l’extension Personal Menu. Au redémarrage, une boite de dialogue s’affiche pour savoir si vous souhaitez  ajouter les icônes dans la barre de navigation. Répondez oui. Trois nouvelles icônes apparaissent dans la barre de navigation, ainsi qu’une fenêtre qui contient toutes les icônes qu’il est  possible d’afficher.  Vous remarquerez parmi ces trois icônes deux boutons sans grand intérêt d’accès rapide aux menus et aux préférences de l’extension (les deux plus à droite), et un bouton d’accès aux marque-pages qui fait exactement la même chose que le menu Marque Pages qui se trouvait dans la barre de menu. Passez à l’étape suivante.

5) Et on réorganise tout ça:
x Si vous n’avez pas fait l’étape 4), il vous faut ouvrir l’éditeur de modification des barres d’outils. Pour cela cliquez droit quelque part sur la barre de navigation, par exemple sur le bouton actualiser, et cliquez sur Personnaliser …
x Dans tous les cas, vous pouvez désormais réorganiser totalement la présentation de vos menus. Sélectionnez tous les boutons que vous jugez inutiles (en cliquant dessus et en maintenant le bouton appuyé), et faites-en un glisser-déposer vers la fenêtre ouverte qui contient les éléments en réserve. de même, vous pouvez si cela vous chante rajouter des éléments depuis cette fenêtre. Ensuite, il faut s’occuper d’optimiser l’espace restant. Personnellement, je n’ai pas trouvé comment déplacer le bouton menu dans la barre du dessous, donc je fais l’inverse: je prend tous les boutons de la barre de navigation l’un après l’autre, et je les glisse quelque part dans la barre de menu, y compris la barre d’adresse et la barre de recherche, jusqu’à ce que la barre de navigation soit totalement vide.
x Enfin, il ne reste plus qu’à masquer la barre de navigation devenue inutile via Menu -> Affichage -> Barres d’outils -> Barre de navigation.

Et voila, vous disposez maintenant d’une version de Firefox dont les barres d’outils prennent nettement moins de place, ce qui est autant d’espace de gagné pou la navigation :).

[Avancé] Si vous avez un problème avec libtool lors de la compilation de gtk2.

Bon une fois n’est pas coutume, cet article ne contient pas de tuto. En revanche,  voici une astuce pour les utilisateurs avancés de Linux qui auraient envie de recompiler gtk2. Dans de rares occasions, il se peut que même après avoir corrigé tous les warnings du ./configure, vous ayez tout de même un problème lors de la compilation à un endroit où le script libtool est utilisé.

Ce script est généré automatiquement par le ./configure. Mais il contient un léger bug qui fait que dans certains cas, l’utilisation du fichier de versions va retourner une erreur dans le make. Voici la solution que j’ai utilisée pour contourner le problème après avoir un peu fouillé sur le net pour la trouver. Je vous préviens d’avance que ça tient plus de la recette de cuisine qu’autre chose, donc utilisez là à vos riques et périls.

1) Le log de l’erreur:

make[4]: Entering directory `/home/aldian/packages/gtk+-2.14.6/gdk-pixbuf’
/bin/bash ../libtool –mode=link gcc  -DGDK_PIXBUF_DISABLE_DEPRECATED -DG_DISABLE_DEPRECATED -g -O2 -Wall   -o libgdk_pixbuf-2.0.la -rpath /usr/local/lib  -version-info 1400:6:1400 -export-symbols-regex « ^[^_].* »   gdk-pixbuf.lo gdk-pixbuf-animation.lo gdk-pixbuf-data.lo gdk-pixbuf-io.lo gdk-pixbuf-loader.lo gdk-pixbuf-scale.lo gdk-pixbuf-simple-anim.lo gdk-pixbuf-scaled-anim.lo gdk-pixbuf-util.lo gdk-pixdata.lo gdk-pixbuf-enum-types.lo pixops/libpixops.la  -L/usr/local/lib -lgio-2.0 -lgobject-2.0 -lgmodule-2.0 -lglib-2.0 -lm
libtool: link: rm -fr  .libs/libgdk_pixbuf-2.0.exp .libs/libgdk_pixbuf-2.0.ver
libtool: link: /usr/bin/nm -B  .libs/gdk-pixbuf.o .libs/gdk-pixbuf-animation.o .libs/gdk-pixbuf-data.o .libs/gdk-pixbuf-io.o .libs/gdk-pixbuf-loader.o .libs/gdk-pixbuf-scale.o .libs/gdk-pixbuf-simple-anim.o .libs/gdk-pixbuf-scaled-anim.o .libs/gdk-pixbuf-util.o .libs/gdk-pixdata.o .libs/gdk-pixbuf-enum-types.o   pixops/.libs/libpixops.a | sed -n -e ‘s/^.*[     ]\([ABCDGIRSTW][ABCDGIRSTW]*\)[     ][     ]*\([_A-Za-z][_A-Za-z0-9]*\)$/
 /p’ | /bin/sed ‘s/.* //’ | sort | uniq > .libs/libgdk_pixbuf-2.0.exp
libtool: link: /bin/grep -E -e « ^[^_].* » « .libs/libgdk_pixbuf-2.0.exp » > « .libs/libgdk_pixbuf-2.0.expT »
libtool: link: mv -f « .libs/libgdk_pixbuf-2.0.expT » « .libs/libgdk_pixbuf-2.0.exp »
libtool: link: echo « { global: » > .libs/libgdk_pixbuf-2.0.ver
libtool: link:  cat .libs/libgdk_pixbuf-2.0.exp | sed -e « s/\(.*\)/
;/ » >> .libs/libgdk_pixbuf-2.0.ver
libtool: link:  echo « local: *; }; » >> .libs/libgdk_pixbuf-2.0.ver
libtool: link:  gcc -shared  .libs/gdk-pixbuf.o .libs/gdk-pixbuf-animation.o .libs/gdk-pixbuf-data.o .libs/gdk-pixbuf-io.o .libs/gdk-pixbuf-loader.o .libs/gdk-pixbuf-scale.o .libs/gdk-pixbuf-simple-anim.o .libs/gdk-pixbuf-scaled-anim.o .libs/gdk-pixbuf-util.o .libs/gdk-pixdata.o .libs/gdk-pixbuf-enum-types.o  -Wl,–whole-archive pixops/.libs/libpixops.a -Wl,–no-whole-archive  -L/usr/local/lib /usr/local/lib/libgio-2.0.so /usr/local/lib/libgobject-2.0.so /usr/local/lib/libgmodule-2.0.so -ldl /usr/local/lib/libglib-2.0.so -lm    -Wl,-soname -Wl,libgdk_pixbuf-2.0.so.0 -Wl,-version-script -Wl,.libs/libgdk_pixbuf-2.0.ver -o .libs/libgdk_pixbuf-2.0.so.0.1400.6
/usr/bin/ld:.libs/libgdk_pixbuf-2.0.ver:2: ignoring invalid character `01′ in script
/usr/bin/ld:.libs/libgdk_pixbuf-2.0.ver:2: syntax error in VERSION script
collect2: ld returned 1 exit status
make[4]: *** [libgdk_pixbuf-2.0.la] Error 1
make[4]: Leaving directory `/home/aldian/packages/gtk+-2.14.6/gdk-pixbuf’

2) La solution:

Puisque c’est le fichier de version qui pose problème, il suffit de dire à libtool de ne pas aller le consulter.

1. Se placer dans le répertoire principal qui doit s’appeler qqch comme gtk+-2.14.6/ aux variations de version près.
2. faire une sauvegarde du fichier libtool.
3. l’éditer
4. faire une recherche sur les lignes contenant  »-version-script ».
5. Dans ces lignes, supprimer l’argument contenant cette clé et l’argument suivant.

Par exemple, moi j’avais en ligne 315:

315: \$CC -shared \$libobjs \$deplibs \$compiler_flags \${wl}-soname \$wl\$soname \${wl}-version-script \${wl}\$output_objdir/\$libname.ver -o \$lib »

Que j’ai remplacé par:

315: \$CC -shared \$libobjs \$deplibs \$compiler_flags \${wl}-soname \$wl\$soname -o \$lib »

Puis relancer le make, mais ne pas relancer le ./configure, vu que celui-ci régénèrerait le fichier libtool comme la première fois.

Notons pour conclure que le bug ne vient pas forcément du fichier libtool, mais peut être aussi du fichier de version en .ver qui est ignoré grâce à notre petite manipulation

Source

---