X
Tap here to go to the mobile version of the site.

Support Forum

how to add color to back and forward buttons?

Posted

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>

Modified by cor-el

Quote

Additional System Details

Installed Plug-ins

  • Shockwave Flash 32.0 r0

Application

  • User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0

More Information

WestEnd
  • Top 10 Contributor
59 solutions 5045 answers

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.

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.

Modified by WestEnd

Was this helpful to you? 0
Quote
cor-el
  • Top 10 Contributor
  • Moderator
16996 solutions 153477 answers

Helpful Reply

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.

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. *https://developer.mozilla.org/en-US/Tools/Page_Inspector *https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Context_menu_reference

Modified by cor-el

Was this helpful to you? 1
Quote
Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.