Odd and even lines background colors

Hi Michel,

Selecting to display the links as a table is only part of the equation to display links as a table. You also need to put the proper tags before and after link elements in the Advanced tab of the library configuration. Here is an example of this:

View post on imgur.com

The key elements are the <tr> and </tr> in the before link and after link fields. Then, putting <td> and </td> tags before and after the elements that should be in cells. If you want multiple elements to be in the same cell, you can put <td> before a single element and </td> after another element.

Let me know if this helps.

Thanks fro your help… but it’ does not work entirely.

I see on my PC appearing a table with lines en columns after I added <td>, <tr>, etc. It’s OK.

I also see in the css file:
.linktable {
background-color: #f0f0f0;
}
When I change the value of the background-color, it works. It’s OK.

I see in the source code:
<table class=’linklisttable’>

So, I tried to add:

linklisttable tr:nth-child(even)
{
background-color: #DDD;
}
linklisttable tr:nth-child(odd)
{
background-color: #FFF;
}

I tested (instead of linklisttable) linktable, .linktable, table.linklisttable, table.linktable but nothing happens. The background color does not vary.

The same code worked with the links on the top of the page (each line had a different background color):

table tr:nth-child(even)
{
background-color: #DDD;
}
table tr:nth-child(odd)
{
background-color: #FFF;
}

I tested with 2 different browsers (Chrome and Firefox) and I disabled the cache on WordPress (WP Optimize plugin).

So, why all these tests did not work?

Can you provide a URL where you are trying to use this? It would help if I can see the code generated on your site.

OK
https://htags.net/visiter-europe/visiter-ville-allemagne/voyage-berlin-allemagne/

Tu devrais plut?t utiliser la règle suivante:

table tr:nth-child(even) td
{
background-color: #DDD;
}
table tr:nth-child(odd) td
{
background-color: #FFF;
}

Excellent, ?a marche ! Merci…

J’essaie maintenant d’ajuster le tableau pour qu’il soit agréable à regarder à la fois sur un grand écran et sur un smartphone.

En effet, j’ai créé un annuaire de hashtags, et certains hashtags sont courts (#ratp) et d’autres longs (#grandegaleriedelevolution). Comme on ne peut pas couper en deux un hashtag, la colonne de description diminue de largeur en s’alignant sur le plus long hashtag de la page. Il faut donc jouer sur le “Like” (en ne laissant que le pouce et le nombre), supprimer un mot dans une description et éventuellement tester avec des <br />.
La bonne configuration sera trouvée empiriquement, et il restera toujours des contre-exemples, car la même catégorie peut être utilisée dans plusieurs pages ??

En tous cas, cette extension est pleine de ressources quand on prend la peine de comprendre chaque paramètre.

Suggestion : Tu pourrais vendre des “templates” agréables à voir (palettes de couleurs subtiles, dégradés, pop-up…). De cette fa?on, l’extension resterait gratuite pour les gens pressés qui font juste une liste de 10 liens sur un site de 3 pages. Et ceux qui veulent du “luxe” trouveraient normal de payer un peu.

On peut encore aller plus loin si l’on veut alterner le fond sur plusieurs lignes (3, 5…).
https://www.w3schools.com/cssref/sel_nth-child.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Merci pour ces conseils pertinents, Yannick. Pourvu que ce soit utile à d’autres utilisateurs…

On constate que l’alternance des couleurs des lignes des tableaux s’applique aussi pour l’admin. Quand on valide un nouveau lien, hop ! Une ligne sur 2 change de couleur. Ca n’est pas gênant du tout, c’est juste une constatation ??

Si tu modifie les règles pour être plus précises, ?a devrait aider:

.linklisttable table tr:nth-child(even) td
{
background-color: #DDD;
}
.linklisttable table tr:nth-child(odd) td
{
background-color: #FFF;
}

Merci.
J’ai testé, mais je n’avais plus de lignes alternées, tout le fond était de la même couleur.
j’ai aussi testé (empiriquement) avec table.linklisttable au lieu de .linklisttable table (je ne suis pas expert en css). Mais ?a n’a pas mieux fonctionné.
Je suis donc revenu au code précédent (juste “table”).

Mais ce n’est pas très important. La couleur qui appara?t dans l’admin permet de confirmer que le lien es ben validé. Quand on rédige le texte, tout est gris. Et quand on valide, on voit de la couleur (qui rend la page plus ludique, comme une récompense pour dire “Bravo, le lien est validé”) ??

En tous cas, cette alternance de ligne de couleurs différentes est utile pour les visiteurs qui peuvent mieux lire le contenu quand on n’affiche pas de longues descriptions. Ca rappelle les pages perforées des “listings” (au Québec, on dit des “listages” ?) dans les années 1980.

J’y suis allé un peu vite en te suggérant la réponse. Essaie ceci:

.linklisttable tr:nth-child(even) td
{
background-color: #DDD;
}
.linklisttable tr:nth-child(odd) td
{
background-color: #FFF;
}