Archives du mot-clé CSS

WordPress Twenty Eleven: oversight regarding the tag

The small element have been reset by the CSS reset but no one thought to reactivate it later on: So here's the fix:
small {font-size:80%}
Talk about it on the Twenty Eleven CSS feedback page.

flattr this!

WordPress Twenty Eleven: making backend and frontend styling dynamically consistent

(Original article) What I'd like for Twenty Twelve is a dynamic syncing between frontend and backend styling. So far, styles are manually copied and pasted, it seems. What I suggest: moving from the present style.css and editor-style.css to a future common.css, style.css and editor-style.css. Useful for child themes, when adding styles in .entry-content or below (for instance, my small fix).
  • Frontend and backend: common.css
  • Frontend only: style.css + @import(common.css)
  • Backend only: editor-style.css + @import(common.css)
(the name common.css may be ill-chosen)

flattr this!

Dialogues en CSS

L'objectif était de réduire au maximum le balisage, donc de ne pas utiliser les artifices .first et .last que l'on trouve ailleurs. Merci de vous donner vos impressions.

Merci à Heyoan et à GC-nomade pour le coup de main.

Quelques remarques :

  • Le B du premier bonjour est légèrement décalé sur la droite. J'ignore pourquoi, c'est peut-être lié au caractère.
  • J'ai rajouté la localisation, donc vous pouvez intégrer les règles de ponctuation de différentes langues dans votre CSS
  • Les espaces de séparation du premier niveau de guillemets sont des espaces fines insécables (&202f; nommée espaces étroites insécable par Unicode), conformément à la typographie française soignée. Á ne pas confondre avec l'espace insécable ( ) ou l'espace fine sécable ().
  • Initialement, la page était en XHTML 1.1, mais comme je ne sais pas intégrer xml:lang dans les CSS, j'ai dû me rabattre sur XHTML 1.0. Et finalement, je l'ai passé en HTML5 :).
  • Même si dans cet exemple ça ne sert à rien, j'ai isolé la discussion avec un ID (#dialogue), car dans la vraie vie, vous ne voudrez pas que toutes vos listes à puce se comportent comme des discussions :)

Voyez le résultat sur une page extérieure.

Et ci-dessous le code.

<!-- 'HTML-style' HTML5 -->
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Dialogue de Q</title>
    <style type="text/css">
    #dialogue                          {list-style:none}
    #dialogue q:lang(fr)               {quotes : '«\202F' '\202F»' "“" "”" "‘" "’"}
    #dialogue li:first-child q:before  {content:open-quote}
    #dialogue li:first-child q:after   {content:no-close-quote}
    #dialogue li q:before              {content:no-open-quote'\2012';padding-right:0.5em}
    #dialogue li q:after               {content:no-close-quote}
    #dialogue li:last-child q:after    {content:close-quote}
    </style>
</head>

<body>
<ul id="dialogue">
  <li><q>Bonjour, comment allez-vous ?</q></li>
  <li><q>Bonjour. Très bien, et vous ?</q></li>
  <li><q>Très bien, merci.</q></li>
</ul>
</body>
</html>

flattr this!

WordPress, stop believe you’re smarter than me!

According to my attempts (minimal text, empty CSS file), WordPress forces display of hyperlinks as such, even when you don’t want to. Here’s an example to prove it, a CSS that I wanted to give “as it appears in BBEdit” (whils keeping a real link):

/* http://david.latapie.name/blog/765-modifications-esthetiques */

[hreflang]:after	{
    background:transparent;
    color:#666;
    content:"\a0[" attr(hreflang)"]";
    font-size:smaller;
    text-decoration:none
}

Here’s the code that matters: <a href="#" style="color:inherit;text-decoration:none">foo</a>

I even tried with !important (usually a bad practice), but no luck.

I challenge anyone to prevent WordPress from overriding me. And I am fully open to any plugin.

I am far from the only one to complain (this link is about HTML, not CSS, but I also experienced this with HTML). (this link is about HTML, not CSS, but I also experienced this with HTML).

flattr this!

WordPress, arrête de penser à ma place !

D’après mes essais (texte minimal, fichier CSS vidé), WordPress force l’affichage des liens en tant que tel, même quand on ne veut pas. Exemple pour le prouver, une CSS que je voulais donner « telle qu’elle apparaît dans BBEdit » (mais en conservant un vrai lien) :

/* http://david.latapie.name/blog/765-modifications-esthetiques */

[hreflang]:after	{
    background:transparent;
    color:#666;
    content:"\a0[" attr(hreflang)"]";
    font-size:smaller;
    text-decoration:none
}

Voici le code pertinent : <a href="#" style="color:inherit;text-decoration:none">bla</a>

J’ai même essayé avec du !important (ce qui est généralement une mauvaise pratique), rien n’y fait.

Je vous met au défi d’empêcher WordPress de penser à votre place. Et je suis preneur de tout plugin.

Je suis loin d’être le seul à m’en plaindre (ce lien traite de HTML, pas de CSS, mais j’ai aussi eu ce problème avec du HTML.

flattr this!

Thème du blog — valeurs générales

Initialement publié le 4 octobre 2006 à 10h44
 body { /* pour avoir un peu de marge dans le contraste, si nécessaire */
 background:rgb(250,250,250)
 color:rgb(5,5,5);
 /* Chiffres elzéviriens sur Lac et Windows. Chercher pour Linux */
 font-family:Hoefler Text, Georgia, serif; /* aérer le texte. OK avec Hoefler et Monaco, voir avec les autres (Georgia, Courier New, Linux) */;
 /* !!! vérifier ce que line-height à 1.5em donne avec Hoefler. En monaco, c’est mieux que 1.6em !!! */;
 line-height:1.6em max-width:49em /* « L’idal tourne entre 50 et 80 carac. par ligne » (50+80)2=65 65 carac. 98ex 49em http://david.latapie.name/blog/1146-l-illusion-de-la-taille-de-fenetre */ }

flattr this!

CSS-reset

First published on April 5th 2007 at 15:43.

IMNSHO, this one is closer to the intended purpose of real control than Yahoo!’s (that I discovered thanks to Romain Gonord).

* { /* Many thanks to Laura (http://www.Espezon.org/)*/ 	background:inherit; 	border:none; 	color:inherit; 	font:inherit; 	margin:0; 	padding:0; 	text-indent:0; 	text-align:justify; 	text-decoration:none }

BEWARE: this is not a CSS for the faint of the heart. This rules basically says: Switch to manual mode. NOW. This CSS deactivates ANY kind of styling (well, not exactly, as it does not reset display—and I suggest no to do so if you don’t know what you are doing).

You might experience some surprises with link lists (ol, ul). In that case, change background:inherit with background:transparent.

Needless to say, this is a preliminary CSS. Once you put this as the first rule, you really should add some styling after. No CSS looks better than this CSS alone. Promised.

I take advantage of Vincent Battaglia mentioning me to notify you of a similar article: Eric Meyer did it too: Reset Reloaded. I did not have time to check the rationale behind the difference between his and mine (well, Laura’s), still.

flattr this!