PayPalログインボタンのフォントサイズ

Question

PayPalログインボタンのフォントサイズを変更したいのですが、ボタン全体を小さくするのには十分だと気付きましたが、頭の下にCSSが生成されるようです鉱山をオーバーライドする。ボタンはスクリプトによって生成されます（これはCSSを追加するものです）。ここで

<li><span id="pp_login_container" font-size: "14px"></span> 
      <script src="https://www.paypalobjects.com/js/external/api.js"></script> 
      <script>paypal.use(['login'], function(login) { 
        login.render ({ 
         'appid': '<?php echo $client_id; ?>', 
         'authend': '<?php echo $sandbox; ?>', 
         'scopes': '<?php echo $scopes; ?>', 
         'containerid': 'pp_login_container', 
         'locale': '<?php echo $locale; ?>', 
         'theme': '<?php echo $button_colour; ?>', 
         'returnurl': '<?php echo $return_url; ?>' 
        }); 
        }); 
      </script> 
     </span> 
    </li> 

が出力されます。

<span id="pp_login_container"> 
    <button id="LIwPP85447951" class="LIwPP PPBlue"> 
     <svg class="PPTM" xmlns="http://www.w3.org/2000/svg" version="1.1" width="16px" height="17px" viewBox="0 0 16 17"> 
     <path class="PPTM-btm" fill="#0079c1" d="m15.603 3.917c-0.264-0.505-0.651-0.917-1.155-1.231-0.025-0.016-0.055-0.029-0.081-0.044 0.004 0.007 0.009 0.014 0.013 0.021 0.265 0.506 0.396 1.135 0.396 1.891 0 1.715-0.712 3.097-2.138 4.148-1.425 1.052-3.418 1.574-5.979 1.574h-0.597c-0.45 0-0.9 0.359-1.001 0.798l-0.719 3.106c-0.101 0.438-0.552 0.797-1.002 0.797h-1.404l-0.105 0.457c-0.101 0.438 0.184 0.798 0.633 0.798h2.1c0.45 0 0.9-0.359 1.001-0.798l0.718-3.106c0.101-0.438 0.551-0.797 1.002-0.797h0.597c2.562 0 4.554-0.522 5.979-1.574 1.426-1.052 2.139-2.434 2.139-4.149 0-0.755-0.132-1.385-0.397-1.891z"></path> 
     <path class="PPTM-top" fill="#00457c" d="m9.27 6.283c-0.63 0.46-1.511 0.691-2.641 0.691h-0.521c-0.45 0-0.736-0.359-0.635-0.797l0.628-2.72c0.101-0.438 0.552-0.797 1.002-0.797h0.686c0.802 0 1.408 0.136 1.814 0.409 0.409 0.268 0.611 0.683 0.611 1.244 0 0.852-0.315 1.507-0.944 1.97zm3.369-5.42c-0.913-0.566-2.16-0.863-4.288-0.863h-4.372c-0.449 0-0.9 0.359-1.001 0.797l-2.957 12.813c-0.101 0.439 0.185 0.798 0.634 0.798h2.099c0.45 0 0.901-0.358 1.003-0.797l0.717-3.105c0.101-0.438 0.552-0.797 1.001-0.797h0.598c2.562 0 4.554-0.524 5.979-1.575 1.427-1.051 2.139-2.433 2.139-4.148-0.001-1.365-0.439-2.425-1.552-3.123z"></path> 
     </svg> 
     <b>Log In with PayPal</b> 
    </button> 
    </span> 

そしてある変更CSS（HTMLでヘッドの端部に位置する）のようなもの：

<style type="text/css">/*!reset via github.com/premasagar/cleanslate*/ 
.... 
.LIwPP { 
... 
    font-size: 16px !important; 
... 

Here is the CSS that is using

OpenCart2でこれをheader.tplに入力しようとしました

Answer 1

OK：

<style scoped> .LIwPP { font-size: 13px !important;} </style> 

最終的な解決策：

 <li><span id="pp_login_container"></span> 
      <style scoped> .LIwPP { font-size: 13px !important;} </style> 
      <script src="https://www.paypalobjects.com/js/external/api.js"></script> 
      <script>paypal.use(['login'], function(login) { 
        login.render ({ 
         'appid': '<?php echo $client_id; ?>', 
         'authend': '<?php echo $sandbox; ?>', 
         'scopes': '<?php echo $scopes; ?>', 
         'containerid': 'pp_login_container', 
         'locale': '<?php echo $locale; ?>', 
         'theme': '<?php echo $button_colour; ?>', 
         'returnurl': '<?php echo $return_url; ?>' 
        }); 
        }); 
      </script> 
     </span> 
    </li> 

Answer 2

私は非常にあなたが求めているものを理解していないが、あなたは、フォントサイズを変更しながら、ボタンの実際の幅と高さを変更してみてください：

.button-small-text { 
     height: 30px; 
     width: 75px; 
     font-size: 10px; 
    } 

私はこれが役に立てば幸い！

Answer 3

おそらく

ない最善の解決策が、私は実際にheader.tplにこのスクリプトを追加することによって、それを修正するために管理：私はちょうど追加することにより、シンプルかつエレガントな解決策を見つけた

 <script> 
     $(window).bind("load", function() { 
     // code here 
     var css = '.LIwPP { font-size: 14px !important;}' 
      head = document.head || document.getElementsByTagName('head')[0], 
      style = document.createElement('style'); 

     style.type = 'text/css'; 
     if (style.styleSheet){ 
      style.styleSheet.cssText = css; 
     } else { 
      style.appendChild(document.createTextNode(css)); 
     } 

     head.appendChild(style); 
     }); 
    </script>