Workflowy: Comment avoir des mots-clés colorés?

Dans la déferlante d’emails que j’ai reçus suite à la publication de la méthode Komodolee et à l’article TEST de Workflowy, un sujet revenait souvent: comment avoir des mots-clés colorés?

Et dans cet article, je vais vous montrer exactement comment faire pour avoir vos barres de couleurs ainsi que vos mots-clés colorés.

Avant de plonger dans l’exercice pratique, sachez qu’un guide complet pour utiliser Workflowy à son plein potentiel sera disponible pour les abonnés de la newsletter dès le 5 février.

Si vous êtes un utilisateur de Workflowy, j’ai créé un sondage afin d’en savoir plus sur vos besoins. La seule faveur que je vous demande: prendre 2 minutes pour répondre aux questions.

Cela me permettra de combler encore un peu mieux vos éventuelles attentes.

Le sondage se trouve ici.

Comment avoir des mots-clés colorés dans Workflowy?

1. Installez Stylish.

Vous n'aurez pas le bouton évaluer, mais "ajouter à chrome"

C’est quoi? Il s’agit d’une extension qui se « colle » sur votre navigateur et qui permet de changer le design des applications ouvertes dans le navigateur.

STYLISH pour Chrome

STYLISH pour Safari

STYLISH pour Firefox

2. Installez Colored Tag

En cliquant ici. Il s'agit d'un extension pour Stylish.

3. Copier / collez le code ci-dessous:

Le code se trouve entre les trois traits successifs ---

---

/*
- CHANGE UP THE TITLE (TAG NAME) & BACKGROUND COLOR

- FOR DIFFERENT COLORS:

(1) You can use the 147 CSS colors: http://www.colors.commutercreative.com/grid/
(2) ... or you can use hexidecimal color codes: http://html-color-codes.info/
*/

[title~="#so"] {
background-color: #CC2EFA !important;
color: #CC2EFA !important;
box-shadow: 3px 3px 3px #424242;
}
[title~="#le"] {
background-color: #8A4B08 !important;
color: #8A4B08 !important;
box-shadow: 3px 3px 3px #424242;
}
[title~="#ve"] {
background-color: #64FE2E !important;
color: #64FE2E !important;
box-shadow: 3px 3px 3px #424242;
}
[title~="#po"] {
background-color: #FE2E2E !important;
color: #FE2E2E !important;
box-shadow: 3px 3px 3px #424242;
}
[title~="#today"] {
background-color: #FA5858 !important;
color: #ffffff !important;
box-shadow: 3px 3px 3px #424242;
padding: 2px 3px 2px !important;
}
[title~="#wip"] {
background-color: #C06C84 !important;
color: #ffffff !important;
box-shadow: 3px 3px 3px #424242;
padding: 2px 3px 2px !important;
}
[title~="#fup"] {
background-color: #0000FF !important;
color: #ffffff !important;
box-shadow: 3px 3px 3px #424242;
padding: 2px 3px 2px !important;
}
[title~="#rdv"] {
background-color: #8904B1 !important;
color: #ffffff !important;
box-shadow: 3px 3px 3px #424242;
padding: 2px 3px 2px !important;
}
[title~="#modelewf"] {
background-color: #000000 !important;
color: #ffffff !important;
box-shadow: 3px 3px 3px #424242;
padding: 2px 3px 2px !important;
}
[title~="#checklist"] {
background-color: #FFBF00 !important;
color: #ffffff !important;
box-shadow: 3px 3px 3px #424242;
padding: 2px 3px 2px !important;
}

---

4. Ouvrez Stylish et Modifiez le code.

Ouvrez Workflowy, vous verrez en haut à droite de votre explorateur cette icône.

Maintenant, modifions le code ensemble.

Attention, c’est ultra simple et vous ne pouvez pas endommager votre ordinateur / navigateur. Le seul risque c’est que cela ne fonctionne pas et qu’aucune couleur n’apparaisse.

Cliquez sur l'icône Stylish pour sur l'icône du crayon (éditer).

À présent vous verrez du code.

Dans Workflowy, il y a deux types d’éléments:

La différence entre un mot-clé et une barre de couleur?

Les blocs de couleurs sont plus petits et le texte est de la même couleur que le fond. Ce qui donne l’impression d’un bloc de couleur.

Comment faire la différence dans le code?

Ceci est un mot-clé car il a la ligne PADDING et surtout, deux codes couleurs (un pour le fond de coloré, l'autre pour le texte qui doit être visible).

Ceci est une barre de couleur. Car il y a deux fois le même code couleur et aucun PADDING.

Comment modifier les mots-clés?

1. Pour modifier le terme d'un mot-clé, changez les caractères qui se trouvent ici.

2. Pour modifier la couleur du mot-clé, changez le code couleur HTML.

Où trouver ce code? Vous pouvez consulter ce site.

Cliquez sur la couleur de votre choix et copier / coller le code qui s'affiche dans le rectangle en bas.

Si vous souhaitez un bloc de couleur, vous devrez copier / coller deux fois le même code (une fois l'arrière plan et une fois la couleur du texte).

Le plus important est de faire vos tests de votre côté.

Souvenez-vous, vous ne pouvez rien casser.

Par contre, n'oubliez pas de sauvegarder vos modifications en cliquant sur enregistrer.

Comment ajouter ou supprimer un mot clé?

Maintenant, comment supprimer ou ajouter des mots-clés?

En sélectionnant les lignes qui composent un mot-clé, en cliquant sur "delete" dans le cas où vous souhaitez supprimer le terme.

En copier / collant le code.

Voici une vidéo.

Et voilà, les mots-clés Workflowy n'ont plus de secret pour vous.

Avez-vous réussi à créer vos mots-clés?

Si vous souhaitez aller beaucoup plus loin dans Workflowy, notez la date: le 5 février, le guide complet "Workflowy Master" sera disponible pour les abonnés de la newsletter.

En attendant, vous pouvez compléter le sondage qui me permettra de répondre à vos questions liées à ce logiciel.