Erreur de validation HTML à cause de Google Fonts

Vous essayez de valider votre HTML sur le site de W3C par exemple mais vous avez une erreur :

Bad value http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,600|Raleway|Montserrat for attribute href on element link: Illegal character in query: not a URL code point.

Malheureusement Google donne encore d'un mauvais encodage sur son site des polices. Au lieu d'utiliser le code "|" (caractère pipe), encodez votre href attribut de votre lien avec "%7C". Résultat de l'exemple :

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,600%7CRaleway%7CMontserrat" />

Source : Stackoverflow

Créer un thème enfant

Un des avantages de la création d'un thème enfant, c'est que vos fonctionnes de votre functions.php pourraient être mises à jour, donc la sécurité est maintenue, sans appliquer des changements sur votre style ou nouvelles structures dans les fichiers.

Les étapes pour créer un child theme (thème enfant) :
Lire la suite

Sidebar à droite dans le Twenty Fifteen WP thème

Pour changer la position du sidebar du thème Twenty Fifteen de gauche à droite, il faut rajouter les codes suivants dans le fichier style.css de votre child theme (thème enfant) :

@media screen and (min-width: 59.6875em) {
/* placing sidebar to the right side */
body {
    direction:rtl;
}
body::before {
    right:0 !important;
    left:auto !important;
}
.site-content,
.sidebar,
.site-footer {
    direction:ltr;
}
.site-content {
    float:right !important;
    margin-right:29.4118% !important;
    margin-left:auto !important;
}
.sidebar {
    float:right !important;
    margin-right:auto !important;
    margin-left:-100% !important;
}
.site-footer {
    float:right !important;
    margin:0 35.2941% 0 0 !important;
}
}

Faites attention que ces codes sont appliqués pour les écrans plus larges seulement (@media screen and (min-width: 59.6875em)), le sidebar disparait sur les écrans plus petites.

Les commentaires conditionnels ne sont plus pris en charge


La prise en charge des commentaires conditionnels a été supprimée dans les modes standard et Quirks d’Internet Explorer 10 pour plus d’interopérabilité et de conformité avec HTML5. Les commentaires conditionnels sont donc désormais traités en tant que commentaires réguliers, comme dans les autres navigateurs...

Lire l'article → sur le site de Microsoft

Pour moi ça veut dire que

<!-- [if gte IE 9]><![endif]-->

n'a plus de sens.

Ajouter des margins à la table

Quand on utilise le nouveau css pour afficher une div en table (display:table ou display:table-row ou encore display:table-cell, etc.), l'ajout des margins est impossible. Pour contourner le problème, vous pouvez donner des bordures transparentes :

div {
display: table-cell;
border-bottom: 10px solid transparent;}

Les contenus des pseudos classes :before et :after


La base

On peut donner des éléments à coté gauche et droite (ou avant et après) d'un autre élément, par exemple une espace vide (blank) avant le texte, une flèche après le texte ou des guillemets avant et après du texte, mais aussi une symbole de copyright ou une symbole monétaire après un champs de formulaire, etc. Il faut déclarer les sélecteurs en attachant les pseudos éléments/classes :before (ça veut dire "avant") et :after (ça veut dire "après") comme p:before , div:after, etc., et avec la propriété content et sa valeur qui doit être mise entre des guillemets (content : "").

Lire la suite

Date pour tous les articles de Blogger et sa personnalisation

Avez vous un problème avec la date des articles dans un blog Blogger ? Voulez vous une date qui s'affiche en haut de tous les articles mais en format français ?

Le problème avec le système Blogger c'est qu'on ne peut pas avoir beaucoup de choix : ou on choisie le format des en-têtes de date (<data:post.dateHeader/> mais qui n'apparait que dans le premier article de la journée, ou on choisie le format de date et d'heure (<data:post.timestamp/>) mais le menu offre seulement une date à l'américaine (m/jj/aaaa ou nom de jour, mois jour, an).

Ici, je vous propose une date à la française et pour tous les articles, même pour ceux qui sont écrits au même jour. On le fait avec une modification du code xml et à l'aide d'un script, puis on peut changer son style à un type calendrier ou en rond par exemple.

Lire la suite