Filipe Lourenco : Consent Manager - change Text and button style

<script>
window.MonsidoCookieOnShow = function () {   
setTimeout(function () { 
  var button = document.querySelector('mon-cb-main').shadowRoot.querySelector('mon-cb-home').shadowRoot.querySelector('mon-cb-button').shadowRoot.querySelector('button');
  button.innerText = 'cookies'; // change text
  button.style.color = 'red';  //change color of the text
  button.style.width = '100px'; // change size of the button
  button.style.height = '10px'; // change size of the button
  button.style.fontSize = '20px'; // change size font of the text
});
}
</script>

The text height and width cannot be directly controlled using CSS, as text will always adjust to the size and shape of the container in which it is placed. However, you can control the height and width of the container (in this case the button) and set the font-size, line-height and letter-spacing properties to adjust the height and width of the text.

For example, if you want to make the text taller, you can increase the line-height of the text. If you want to make the text wider, you can increase the letter-spacing. Also, you can control the width of the text by adjusting the width of the container and setting the text-overflow property to ellipsis to truncate the text if it overflows the container

button.style.lineHeight = "40px"; // sets the line height of the text to 40px button.style.letterSpacing = "5px"; // increases the spacing between letters button.style.textOverflow = "ellipsis"; // truncates the text if it overflows the container

How to hide "Powered by Monsido" from cookie banner using CSS:

a.acc-link {
    display: none;
}

Attachments: