Archives par mot-clé : css

Modifier une feuille de style sur un WordPress

En réponse à Sax, qui me demande en gros comment modifier sa feuille de style dans son WordPress (http://www.lespetitspois.fr/wp-admin/post.php?post=311&action=edithttp://www.lespetitspois.fr/centrer-le-theme-twenty-fourteen-de-wordpress/#comments)

Avant tout, je suggère fortement la création d’un thème “enfant”. C’est un peu pénible au départ mais ça sauve le WordPress à la mise à jour suivante: en effet, toute mise à jour, soit du thème, soit du WordPress, peut écraser vos modifications. Pour créer un thèlme enfant, c’est devenu assez simple. J’en parle là: http://www.lespetitspois.fr/wordpress-le-theme-enfant-sans-prise-de-tete/.

Et donc maintenant, pour modifier une feuille de style, voici toutes les solutions possibles (Certaines dépendent du thème utilisé) dans l’ordre où je pense, il faut les envisager:

1/ Le thème possède une rubrique spécifique dans Apparence > Personnaliser qui s’appelle par exemple CSS additionnel

2/ Tous les WordPress indépendants (qui ne sont pas hébergés directement par Worpress) ont une rubrique Apparence > Éditeur qui permet d’éditer les fichiers “système” – donc attention – et notamment le fichier style.css:

3/ Il existe des plugins qui permettent de modifier les feuilles de style. J’utilise sur lespetitspois.fr CSS & JavaScript Toolbox, mais il faut s’y connaître un peu, ce n’est pas totalement intuitif:

4/ Enfin (et en dernier recours de nos jours) il est possible d’aller modifier en direct le fichier style.css du thème en FTP

La transparence en css

A savoir:

La transparence avec "opacity"

Si on applique la propriété css "opacity" pour jouer sur la transparence d'un élément, les éléments enfants de ce dernier seront également touchés par la transparence:

background-color: #F77600;
opacity: 1
l'opacité est nulle, le texte est bien visible

background-color: #F77600;
opacity: 0.6
le texte paraît gris, en réalité il est toujours noir mais avec de la transparence

background-color: #F77600;
opacity: 0.3
et ainsi de suite

background-color: #F77600;
opacity: 0.1
jusqu'à ne plus rien y voir

...continuer la lecture de La transparence en css

Comment perdre 3h et la tête * pour une balise php

En html, la règle de base, c’est  la fermeture des balises. Un site qui explique bien cela c’est w3schools.com (pas de lien avec le W3C):

“The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

HTML elements are written with a start tag, with an end tag, with the content in between: <tagname>content</tagname>”

Même si le  W3c (= l’organisation qui fabrique tout ça) dit que ce n’est pas toujours obligatoire… …continuer la lecture de Comment perdre 3h et la tête * pour une balise php

Centrer un div fixe

Petit bout de code commenté permettant de centrer verticalement et horizontalement un div sur une page.
Parce que il y en a marre de passer du temps sur des sujets aussi simples.

#mondivfixe {
position: fixed;
width: 300px;/* la largeur est obligatoire cf margin-left*/
height: 300px;/* la hauteur est obligatoire cf margin-top*/
left: 50%; /* le coté gauche du div est placé à la moitié de l’écran et donc trop loin vers la droite de 50% de la largeur du div, 50% qu’on va enlever avec l’instruction margin-left ci-dessous*/
margin-left: -150px; /* le div est décalé de 150px vers la gauche,c’est à dire 50% du width (300 ici) */ …continuer la lecture de Centrer un div fixe