CSS

Modifier l’apparence de Firefox grâce aux feuilles CSS

by · Lecture: 3 minutes

Savez-vous qu’il est possible de changer la manière dont Firefox présente ses menus, ses barres d’outils et même l’emplacement des boutons de navigation en changeant seulement quelques lignes de code dans un fichier CSS ?

Vous pouvez réorganiser pas mal d’éléments en quelques secondes seulement.

Voici un petit mode d’emploi en 4 étapes.

Etape 1 : création du fichier userChrome.css

Rendez-vous dans le dossier de votre profil Firefox qui se trouve à l’emplacement C:\Documents and Settings\*username*\Application Data\Mozilla\Firefox\Profiles\*chaîne_aléatoire*.default\Chrome\.

Vous trouvez un fichier qui s’appelle userChrome-example.css, renommez-le en userChrome.css.

S’il n’existe pas, créez-le. Votre fichier CSS est maintenant prêt à être édité.

Lire la suite

CSS : créer une feuille d’impression pour votre site

by · Lecture: 2 minutes

Une fois que l’on a fini de designer son site pour que tout le monde puisse le consulter et admirer vos talents d’artiste vient le moment de penser à la manière dont votre site est rendu lors de l’impression.

En effet, votre site n’est jamais imprimé sur une feuille tel que vous le voyez à l’écran. Si votre design utilise les feuilles de style (CSS), il suffit d’en créer une destinée à l’impression.

Le principe

Faîtes une copie de la feuille CSS de votre site et nommez-la print.css par exemple.

Décidez ensuite quelles sont les parties qui sont superflues lors d’une impression papier : les menus peuvent être ignorés, tout comme les images de fond :

/* désactivation des menus pour l'impression */
.menu-right {
	display : none;
}
.menu-left {
	display : none;
}

Lire la suite

Dernière journée TICE

by · Lecture: 2 minutes

Et voilà, nous venons de terminer la troisième et dernière journée TICE de l’année. Je dois avouer que j’ai été agréablement surpris par les contenus de la formation : enfin du concret avec les ordinateurs. Bon je l’avoue, j’ai survolé certains contenus comme la création d’une page HTML mais d’autres ont sérieusement piqué ma curiosité. Les webquests, par exemple, me semblent être un très bon moyen d’insérer les nouvelles technologies dans le cours d’anglais : recherches sur Internet, sélection des informations pertinentes, création d’un panneau pour afficher en classe, compte-rendu oral. Tout se tient. L’essentiel est de bien détailler chaque étape : le professeur doit s’effacer et constater les progrès autonomes de l’élève. Cela me parle bien ce genre d’activité.

Le formateur – tuteur de Ben au demeurant – touche sa bille. Sérieusement, on voit qu’il aime cela et qu’il sait de quoi il parle, ce qui est toujours agréable. Par contre, j’émets quand même quelques réserves sur l’intérêt de tenter d’apprendre à la majeure partie du groupe le langage HTML et les CSS. Cela m’a semblé un peu overkill : bien sûr que cela serait génial si tout le monde pouvait coder ses pages à la main, même les CSS mais sérieusement, combien le feront ? J’ai eu l’impression que l’on dépassait largement le cadre des TICE en cours d’anglais pour s’approcher du côté obscur du code.

Enlever la barre de défilement horizontale sous IE

by · Lecture: 1 minutes

Bien, j’ai finalement trouvé la solution pour faire disparaître la barre de défilement horizontale (horizontal scrollbar) sous Internet Explorer. Pas besoin de toucher aux marges ou d’ajouter des divs imbriqués, il suffit de rajouter cette ligne dans votre fichier CSS :

html { overflow-x:hidden; }

Quand je pense que j’ai quasiment réécrit tout le code CSS alors qu’une ligne de code suffit pour que tout rentre dans l’ordre… Enfin, maintenant que cela fonctionne avec tous les navigateurs, j’ai défini le thème LSD comme le style par défaut de ce blog – vu que c’est celui que j’utilise depuis déjà pas mal de temps – et puis, cela donne un petit coup de jeune à la présentation générale. ^_^

J’ai aussi modifié le filtre anti-spam : désormais, les commentaires sont ouverts sur tous les posts, même les plus vieux dans une limite de 500 jours contre 100 auparavant. Et en 2 jours, ce que j’avais prédit est finalement arrivé : j’ai maintenant plus de commentaires que de posts – yay ! ;-). Alors comme ça on aime les tutoriels hein ? Bon, je vais voir ce que je peux vous mitonner pour satisfaire votre soif de découverte…

Nouveau look : le thème LSD

by · Lecture: 2 minutes

LSDJ’en avais un peu marre de la présentation du blog en gris et rouge : j’ai donc travaillé sur un nouveau design le week-end dernier pour pouvoir le tester sous toutes les coutures cette semaine. Aujourd’hui marque donc la venue du nouveau look LSD. Il n’y a rien de psychédélique du tout, c’est juste le seul nom qui m’est venu à l’esprit lorsque j’ai eu fini de jouer avec ma feuille de style – l’histoire du LSD est cependant intéressante. J’ai repris le gris et abandonné le rouge qui commençait à me fatiguer les yeux : le thème est donc un peu plus bleuté et la rubrique “about” a enfin été ajoutée (remarquez, j’ai mis un an avant de me rendre compte qu’elle manquait à l’appel…), je l’étofferai lorsque je serai un peu plus inspiré ;-). Le petit plus : j’utilise maintenant un header qui change aléatoirement à chaque lancement d’une des pages du blog. C’est plutôt sympa, j’ai même ajouté des photos qui n’ont peu (ou même pas du tout) de rapport avec le blog, juste pour varier les plaisirs. La largeur du blog a également été réduite, ce qui améliorera la lecture sur les grands écrans. Lecture parfaite sur un 17″, okay sur un 15″ d’après mes tests.

Il y a juste quelque chose qui me chiffonne un peu : IE. Bah oui, évidemment cela fonctionne sans problèmes avec Firefox, Opera et même Netscape mais IE m’affiche une scrollbar horizontale pour moins de 3 d’une dizaine de pixels qui dépassent. J’ai cherché tant et plus, pas moyen de trouver la ligne qui produit ce phénomène sans tout casser dans les autres navigateurs. Je réitère donc mon (éternelle) requête : si vous lisez ce blog, faîtes-le avec un navigateur qui respecte les standards du Web. Sérieusement, c’est vraiment important pour tous ceux qui créent des designs. En plus, vous y gagnerez au change. Voilà. Ah oui, j’oubliais : vous pouvez toujours revenir au look précédent grâce au Theme Switcher qui se trouve tout en bas du menu.