Avatar for Username

Rechercher dans l’assistance

Évitez les escroqueries à l’assistance. Nous ne vous demanderons jamais d’appeler ou d’envoyer un SMS à un numéro de téléphone ou de partager des informations personnelles. Veuillez signaler toute activité suspecte en utilisant l’option « Signaler un abus ».

En savoir plus

Ce sujet de discussion a été archivé. Veuillez poser une nouvelle question si vous avez besoin d’aide.

how to add color to back and forward buttons?

  • 2 réponses
  • 1 a ce problème
  • 6 vues
  • Dernière réponse par cor-el

genestoy
genestoy
more options

I am using the css below to make the back and forward buttons larger but I would like to color them "blue", what do I need to add to this css to do that? Thanks 

#main-window:not(#f) #back-button {
  list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAjUlEQVR42uWXwQrAIAxD9f8/OttlIDK2mkYrVvCYl3cQtbX4Fu5dPQBPGAIGHYaAQYchYNBhCBh0GAIGHYaAQYchYNDhv/KpApbyaQLW8ikCI+Xu1QssLe8Flpe3AiHlj0BY+TYCJVJim0MYJrHdRcRInPkYjUic/SGxSOT4lH5J5BpM3iRyDqethItxAaTNIBfhl7xRAAAAAElFTkSuQmCC") !important;
}

#main-window:not(#f) #forward-button {
  list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAkElEQVR42sWXSw7AIAhEy/0P3ZoumtRoKyPwSFy4YObFL9ixH2cbpibLiR2ArBUJIOlFA7g1MwBculkAy9qZAEv62QC/HhUAnz5VAFOvSoChnzkFIsL6STXAC4ICeCBIgNufBsBXAAdAtwA9hOg1tOlEjO2nuAoA/YzQ7xgtSNCSDC1K0bIcbUzQ1gxtTmWdCyMiIB+7tLLnAAAAAElFTkSuQmCC") !important;
}
I am using the css below to make the back and forward buttons larger but I would like to color them "blue", what do I need to add to this css to do that? Thanks <pre><nowiki>#main-window:not(#f) #back-button { list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAjUlEQVR42uWXwQrAIAxD9f8/OttlIDK2mkYrVvCYl3cQtbX4Fu5dPQBPGAIGHYaAQYchYNBhCBh0GAIGHYaAQYchYNDhv/KpApbyaQLW8ikCI+Xu1QssLe8Flpe3AiHlj0BY+TYCJVJim0MYJrHdRcRInPkYjUic/SGxSOT4lH5J5BpM3iRyDqethItxAaTNIBfhl7xRAAAAAElFTkSuQmCC") !important; } #main-window:not(#f) #forward-button { list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAkElEQVR42sWXSw7AIAhEy/0P3ZoumtRoKyPwSFy4YObFL9ixH2cbpibLiR2ArBUJIOlFA7g1MwBculkAy9qZAEv62QC/HhUAnz5VAFOvSoChnzkFIsL6STXAC4ICeCBIgNufBsBXAAdAtwA9hOg1tOlEjO2nuAoA/YzQ7xgtSNCSDC1K0bIcbUzQ1gxtTmWdCyMiIB+7tLLnAAAAAElFTkSuQmCC") !important; }</nowiki></pre>

Modifié le par cor-el

Toutes les réponses (2)

WestEnd
WestEnd
more options

I would think someone probably probably has done something like that online and has a css that you could copy from and adjust to what your asking the css to do.

Modifié le par WestEnd

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Those are images in base64 format (data URI). You can open these images in a Firefox tab and save them and open them in an image editing application. There you can color the images and re-save them.

You can open the edited image in a Firefox tab and use the Inspector to convert the image to a data URL.

  • right-click the image in the left pane -> Copy -> Image Data-URL

This places the image data on the clipboard, so you can paste it in the CSS code.

Modifié le par cor-el