Logo OFC On fait comment ?

Retrouvez votre fond de page sur Twitter

Retrouvez votre fond de page sur Twitter

Si vous êtes utilisateur de la version web de Twitter, vous avez dû remarquer un changement ces derniers jours. Après vous être connecté au réseau social, si vous aviez personnalisé votre fond de page, vous avez certainement constaté que celui-ci avait disparu au profit d'un fond uniforme de couleur grise. Ce changement semble être apparu dans la nuit du 20 au 21 juillet 2015, mais n'est pas effectif sur toutes les pages.

Ce changement en a, visiblement, agacé plus d'un. Si vous en faites partie, sachez qu'il existe une petite astuce pour remédier à cela. La voici.

1/ Téléchargez et installez l'addon Stylish

Stylish est une application supplémentaire que vous pouvez installer sur votre navigateur. Elle est disponible sous différents navigateurs : Firefox (lien), Google Chrome (lien) mais aussi Opera (lien). Stylish est une application qui permet de modifier les styles (en langage CSS) qui définissent l'apparence d'une page internet. Une fois installée, une icône devrait apparaitre en haut à droite de votre navigateur.

2/ Rendez-vous sur Twitter et créez un nouveau style

Allez maintenant sur la page d'accueil de Twitter puis cliquez sur l'icône de Stylish : choisissez « Créer un nouveau style », puis « Pour twitter.com ». Un nouvel onglet devrait apparaitre dans lequel devraient apparaitre ces quelques lignes :

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("twitter.com") {

}

C'est dans cette zone de texte que nous personnaliserons notre fond de page Twitter (précisément entre les deux dernières accolades).

3/ Déterminez l'image et la couleur de fond que vous souhaitez

Vous devez disposer d'un lien de l'image (qu'on appelle également URL). Pour notre tutoriel, nous prendrons comme exemple un des fonds d'image proposés par Twitter : https://abs.twimg.com/images/themes/theme1/bg.png.

Pour la couleur du fond de page, vous pouvez vous aider du site Color-Hex pour choisir la couleur qui vous convient (sous forme d'un code couleur). Voici des exemples de code couleur : #ffffff (blanc), #000000 (noir), #008000 (vert).
Pour ce tutoriel, la couleur de fond du thème qui convient avec l'image de fond est la suivante : #C0DEED.

4/ Passons à la personnalisation

Comme indiqué ci-dessus, la personnalisation s'effectue dans le nouvel onglet qui s'est ouvert à l'étape 2. Voici le code à entrer entre les deux dernières accolades :

Si cette étape vous est trop difficile, vous pouvez publier le lien de l'image que vous souhaitez dans la partie "Commentaires" et nous vous indiquerons le code à entrer entre les deux accolades.

body.user-style-VotreNomDUtilisateur
{
	background-image: url('https://abs.twimg.com/images/themes/theme1/bg.png');
	background-repeat: repeat-x;
	background-color: #C0DEED;
}

* Pensez à modifier "VotreNomDUtilisateur" par le vôtre.

Explications : ce petit morceau de code CSS n'est pas très compliqué. Sur la première ligne, vous pouvez reconnaitre "background-image", qui signifie image de fond. C'est dans cette ligne qu'il faut entrer l'URL de l'image souhaitée. Dans notre exemple, nous avons donc repris l'URL de l'image de l'un des thèmes de Twitter.

Si vous souhaitez que votre image de fond se répète sur tout l'écran, vous pouvez vous arrêter là : supprimez les deux lignes suivantes et passez directement à l'étape 5.

La seconde ligne, "background-repeat", vous permet de déterminer comment sera répétée votre image de fond. Dans notre cas, elle sera répétée horizontalement grâce à la valeur "repeat-x". Mais si vous souhaitez que l'image se répète verticalement, mettez plutôt "repeat-y" et si vous ne souhaitez pas qu'elle soit répétée, insérez la valeur "no-repeat".

Enfin, la troisième et dernière ligne, "background-color" correspond à la couleur du fond de page. Comme vous l'avez choisie à l'étape 3, il vous suffit simplement de la remplacer par celle indiquée notre exemple.

Pour certaines images de fond, il peut être nécessaire de placer l'image au centre de la page, ou en bas de la page par exemple. Pour cela, il faut entrer ceci dans une nouvelle ligne : « background-position: center top » (center = centré et top = haut). Si vous souhaitez placer votre fond en bas de page, remplacez "top" par "bottom".

5/ N'oubliez pas d'enregistrer

Une fois la personnalisation effectuée, il faudra d'abord donner un nom à cette personnalisation. Juste en haut de la zone de texte se trouve un champ "Nom". Nommez votre page "Twitter" tout simplement.

Il vous suffit ensuite de valider simplement en cliquant sur le bouton "Enregistrer" qui se trouve en haut à gauche. Allez ensuite sur Twitter puis actualisez la page pour voir le résultat final. Si celui-ci n'est pas convaincant, vous pouvez corriger votre personnalisation : cliquez sur l'icône Stylish, puis faites un clic droit sur "Twitter (1)" et sélectionnez "Modifier".

En cas de problème

Si vous n'avez pas réussi votre personnalisation, n'hésitez pas à laisser un commentaire ci-dessous. Nous vous répondrons le plus rapidement possible. Indiquez-y notamment l'URL de l'image que vous souhaitez avoir comme fond de page.

Si ce tutoriel vous a été utile, n'hésitez pas à laisser un commentaire et à partager l'article, notamment sur Twitter, afin qu'il soit profitable au plus grand nombre.

Publié le mardi 21 juillet 2015 à 23h00
Mis à jour le mardi 13 juin 2017 à 12h17

3 réponses à ce tutoriel

  • SaitoGray le 22/07/2015 à 13h34 :

    Ajoutez "background-attachment:fixed;" après "background-repeat: repeat-x;" si vous ne voulez que votre fond reste fixe.

    1
  • fab le 25/11/2015 à 14h06 :

    bonjour,
    je pense avoir fait ce que vous indiquez mais ça ne marche pas ??
    merci de me dire où ça coince

    @namespace url(http://www.w3.org/1999/xhtml);
    @-moz-document domain("twitter.com")
    {
    body.user-style- in hoc signo vinces
    { background-image
    :url('https://abs.twimg.com/images/themes/theme1/bg.png');
    background-repeat: repeat-x;
    background-color: #C0DEED;
    }
    }

    2
  • Administrateur le 25/11/2015 à 18h40 :

    Salut Fab,

    Le problème vient du fait que tu as indiqué ton pseudonyme "in hoc signo vinces". Dans le tutoriel, il est question du nom d'utilisateur, qui correspond à ce qui se trouve après le @. Par conséquent, ce nom d'utilisateur ne contient pas d'espace.

    3

Laisser un commentaire


 

Vous pouvez utiliser les balises HTML suivantes : <b>gras</b> <i>italique</i> <q>citation</q>