increase font size and change color from embedded code-CodePudding

I'm trying to change the font size and colors and increase the image size via CSS to this embedded code but it doesn't work.

<style>
html *
{
   background-color: #1f567c;
   overflow: hidden; 
   text-transform: uppercase;
   
}
.coin-ticker a  {
    top: 7px;
    position: relative;
    color: #fff;
    text-decoration: none;
}
</style>
<div  style="border:0px solid #fff;height:150px;font-size:180%"></div><script type='text/javascript'>var tt_widget_names = 'Bitcoin,Ethereum,Litecoin,Eos,Ripple,Dogecoin,Shiba-inu,Solana,Cardano,Terra,Avalanche,Polygon,Cosmos,Tron';var tt_widget_fiat = 'usd';var tt_widget_language = 'en';var tt_widget_theme = 'light';var tt_widget_transparent = true;</script><script src='https://www.worldcoinindex.com/content/widgets/js/cryptotickertape.js?v=2' type='text/javascript'></script>

CodePudding user response：

It is an Iframe, you have to use JavaScript to change style in that iframe

<div  style="border:0px solid #fff;height:150px;font-size:180%"></div>
<script type='text/javascript'>
var tt_widget_names = 'Bitcoin,Ethereum,Litecoin,Eos,Ripple,Dogecoin,Shiba-inu,Solana,Cardano,Terra,Avalanche,Polygon,Cosmos,Tron';
var tt_widget_fiat = 'usd';
var tt_widget_language = 'en';
var tt_widget_theme = 'light';
var tt_widget_transparent = true;
</script>
<script src='https://www.worldcoinindex.com/content/widgets/js/cryptotickertape.js?v=2' type='text/javascript'></script>
<script>
document.querySelector('.wci_tickertape_widget_div iframe').onload = function() { 
  //    change your style here
   document.querySelector('.wci_tickertape_widget_div iframe').contentDocument.body.style.background = "#1f567c";
}
</script>

CodePudding user response：

The tag you want to change is inside the iframe. In this case, you can modify css only if the domains are the same. Look at the CORS policy

Also check out this link