How to change the word "Browse" from default yellow to custom color

Ask the community
1

the input field is type “Image” in the user profile block

image
image404×623 18.8 KB

2

Hi @brettjw
Thank you for your question. Please use the following custom code for this use case.
Please make sure to change the BLOCKID of the code with the actual ID of your Form block.

<script>
function waitForElm(selector) {
  return new Promise((resolve, reject) => {
    const interval = setInterval(() => {
      const elm = document.querySelector(selector);
      if (elm) {
        clearInterval(interval);
        resolve(elm);
      }
    }, 100);

    // Optional: Reject the promise after a timeout to avoid infinite waiting
    const timeout = setTimeout(() => {
      clearInterval(interval);
      reject(new Error('Element not found within time limit'));
    }, 5000); // Wait for 5 seconds
  });
}

waitForElm('#BLOCKID .file-holder p').then((elm) => {
 elm.firstChild.innerText = "Translation for Drag files here to upload or";
 elm.lastChild.innerText = "Translation for Browse"
});

</script>
3

Thanks Sveta, gave it a shot but not working yet. Any ideas?

For context:
I put the code into the header, which has some other code in it. Not sure if there is any conflict here or if I added it incorrectly.

Additionally, the page has 2 of the image blocks, so maybe that has something to do with it?

The block looks like this:

image
image372×987 31.9 KB

and the full the full header code is now:

<script>
function waitForElm(selector) {
  return new Promise((resolve, reject) => {
    const interval = setInterval(() => {
      const elm = document.querySelector(selector);
      if (elm) {
        clearInterval(interval);
        resolve(elm);
      }
    }, 100);

    // Optional: Reject the promise after a timeout to avoid infinite waiting
    const timeout = setTimeout(() => {
      clearInterval(interval);
      reject(new Error('Element not found within time limit'));
    }, 5000); // Wait for 5 seconds
  });
}

waitForElm('#user-accounts3 .file-holder p').then((elm) => {
 elm.firstChild.innerText = "Drag files here to upload or";
 elm.lastChild.innerText = "Browse"
});

window.addEventListener('block-loaded-user-accounts3', () => {
    setTimeout(()=>{
        if(document.querySelectorAll('#user-accounts3 .wrapper-container>form .form-input-holder').length>3){
            let inputsToRemove = [...document.querySelectorAll('#user-accounts3 .wrapper-container>form .form-input-holder')].splice(0, 3);
            inputsToRemove.forEach((input)=>{
                input.remove();
            })
        }
    }, 200)
});
</script>

<style>
    #user-accounts3 form:nth-child(3) {
   display: none;
}
</style>