Font size for the PayPal login button

I am looking to adjust the font size of the PayPal Login button in order to make it smaller. However, it appears that the CSS generated by a script at the bottom of the head is overriding my changes. The button itself is created by another script which also adds the 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>

This is how it looks like:

    <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.798l...
</style>

Here is the CSS being used

I am attempting this modification in OpenCart2 within the header.tpl file.

javascripthtmlcsspaypalopencart2.x

Answer №1

It seems like you're unsure about the question, but one solution could be adjusting both the dimensions of the button and the font size:

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

I trust this suggestion is beneficial to you!

Answer №2

While not the most elegant solution, I was able to resolve the issue by including the following script in the header.tpl file:

      <script>
      $(window).bind("load", function() {
        // custom code
        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>

Answer №3

After some exploration, I came up with a straightforward and sophisticated fix by simply including:

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

Here is the revised solution:

        <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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Encountered an issue while attempting to scrape data from Rotten Tomatoes website

One of my tasks is to extract information from a webpage on Rotten Tomatoes. This is the screenshot of the page https://i.sstatic.net/i3gwp.png Based on the image, it seems that span class= descriptor is the parent class of a class, and div class = info ...

pythonhtmlcssweb-scraping

What is the best way to transition all elements down while sliding a header up or down?

Is it possible to bring down the entire page when hovering over a header element using CSS, ensuring that the header overlaps nothing else on the page? If so, how can this be achieved? See an example of the header in action here: Thank you! ...

javascriptjqueryhtmlcss

"Utilizing Rails 3 to initiate an AJAX submit when radio buttons are changed leads to the generation of

Need help with Rails 3 form partial <%= form_for(answer, :remote => true) do |f| %> <% if answer.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(answer.errors.count, "error") %> prevented this ans ...

javascriptruby-on-railsajaxforms

Using PHP to calculate the total number of records within an HTML document

I am currently working on a PHP script to establish a connection with my MySQL database in order to retrieve the total number of users registered on my forum by counting the records in the table. https://i.sstatic.net/ZR0IY.png The PHP script should disp ...

javascriptphphtmlmysql

The power of PHP's echo function comes alive as it seamlessly connects

I am currently working on developing a product catalog using PHP. Below is the HTML flex-container code: <div class="products"> <?php echo file_get_contents("http://192.168.64.2/CodeWay/Pages/product.php"); ?> & ...

phphtml

Is there a way to place my searchbox in the top right corner of the page?

I am currently working on creating a search function for my list of products. However, I have encountered an issue where the searchBox is not appearing in the top right corner as intended. Despite trying various solutions, I have been unsuccessful in movin ...

javascriptcssreactjs

Obtain identical encryption results with CryptoJS (JavaScript) and OpenSSL (PHP)

I am in the process of integrating a PHP encryption function into a ReactJS application. I have a requirement to transmit the token in a specific format that was generated using the OpenSSL library function (openssl_encrypt). It has been observed that the ...

javascriptphpencryptionopensslcryptography

Optimizing Static File Caching in Yii

Having a frustrating issue with Yii where my local development environment caches CSS and JS files. Despite making changes to the file, the edits do not reflect in the output and sometimes causes corruption leading to broken functionality. This problem see ...

javascriptphpcssyiifrontend

Discover how to shallow test for the presence of a wrapped component using Jest and Enzyme

Currently, I am in the process of testing a component that dynamically renders another wrapped component based on certain conditions. My testing tools include enzyme and jest, with the root component being rendered using the shallow() method. The main chal ...

javascriptreactjsjestjsenzyme

Is there an Angular Profile service offering getter and setter properties?

Can a singleton Angular service be created with getters and setters along with logic implementation? I was provided with the following code snippet and tasked with replicating it in an Angular service. Although it may seem straightforward, I'm finding ...

javascriptangularjs

Navigating through pages in a server component using Next.js

I am currently working on a project that involves implementing pagination using the NextJS 13 server component without relying on the use client. The goal is to ensure that when a button is clicked, new entries are added to the screen in a sequential order ...

javascriptreactjsnext.js

How does JQuery handle color parsing in text?

Is there a way to automatically parse colors in text and apply them to CSS? For instance, if I type #40464f, I want the color to be caught and included in some CSS styles. I am familiar with how to achieve this by adding markup: <span data-color=""> ...

jquerycsscolors

How to smoothly fade out content when hovering over a menu item in HTML<li> tags

Hi there, I have encountered a problem and could really use your assistance. I am attempting to create a menu that displays content when you hover over an li tag. The first content should always be visible when hovering over the first li option or if no l ...

javascriptjqueryhtmlcss

Adaptable CSS triangle design

Hello I'm looking to create a responsive CSS triangle similar to the image linked below. I attempted using percentages with border width, but didn't achieve the desired outcome. Can anyone suggest a simple solution? https://i.stack.imgur.com/Yah ...

htmlcsstwitter-bootstrap

Generate an array of objects using the values from a different array of objects

I have an array of objects: const users = [ { name: 'Alice' }, { name: 'Eve' } ] However, I want to transform it into an array like this: const updatedUsers = [ { key: 'Alice', value: 'Alice', text: 'Al ...

javascriptarraysobject

Unable to capture HTML form input in $_POST[]

I've encountered an unusual issue while transferring data from an email form (HTML5) to ajax/JSON and receiving false in order to prevent redirection to the php script after pressing the submit button. When I include commas between each data paramete ...

javascriptphpjqueryhtmlajax

Transforming HTML content in real-time using Express.js

I'm a little uncertain if I understand the concept of Express MVC correctly: If my goal is to create a single page application and dynamically modify the HTML, can Express assist me with this? Or will I only be able to work with static pages that req ...

htmlmodel-view-controllerexpress

Issue with Empty Date Time Format in Vue2 Date-Picker

In our company, we use vue2-datepicker to manage the starting and ending times of meetings. The dates are stored in "YYYY-MM-DD HH:mm" format on the backend, but we convert them to "DD-MM-YYYY HH:mm" format when retrieving the data in the mounted() hook. T ...

javascriptvue.jsdatetimedatepicker

Unable to click on link with JavaScript using Selenium webdriver

<a id="compareCompanies" b:onclick="needsController.showQuotes = true;" href="#">Compare companies</a> Below is the Selenium Webdriver JavaScript code using Mocha: driver.wait(function () { driver.findElement(webdriver.By.id("compareCompa ...

javascriptseleniummocha.js

Issues with iFrame Alignment

I recently created a digital catalog using FlipHTML5 and realized it needed to be more mobile-friendly. To address this issue, I included the following CSS: .size { width: 85vw; height: 75vh; Although this adjustment made the catalog display correctly on ...

htmlcssiframe