Payment page styling

Resolved Iz4
(@iz4)

8 years, 9 months ago

This plugin makes some bad assumptions about how your current theme is coded.

It does not display the payment page through your regular theme or in any standard WordPress way – I had to edit plugin files and tweak my theme to get the styling to match.

Maybe a better way to do this would be to ditch angular and have the payment page display through the users current page.php theme file?

There is no excuse for this other than lazy coding….

Viewing 9 replies - 1 through 9 (of 9 total)

Thread Starter Iz4
(@iz4)

8 years, 9 months ago

I’m also seeing inline styles(?!)

Really sloppy coding – almost like it was cheaply outsourced to Indian developers…
Plugin Author blockonomics
(@blockonomics)

8 years, 9 months ago
There is no assumption about current theme all styles are used from the current theme (using <h1> to <h5> tags and <label>)
https://github.com/blockonomics/woocommerce-plugin/blob/master/order.php

Extra CSS is only used for color and margins

Stop making racist comments on a region of people. Very bad taste. Will report your comment for removal if you continue.
- This reply was modified 8 years, 9 months ago by blockonomics.
Thread Starter Iz4
(@iz4)

8 years, 9 months ago

How is mentioning nationality racist? I’ve seen your job postings and I am correct about the outsourcing to India part. I’m tired of people putting out sub standard code and claiming fees for it.
bambino82
(@bambino82)

8 years, 8 months ago
I have added some css classes to your code in order.php, maybe handy to change in future release. Its extremely simple to add, and this way you can do various custom css changes:

changed:

<div class="aligncenter" style="width:45%">

to:

<div class="aligncenter btc-block" style="width:45%">

To be able to add margins, paddings, height to the whole block.

changed:
```
        <div class="" style="margin-bottom:10px;" >
          <h3 ng-show="order.status == -1" ng-cloak >To pay, send exact amount of BTC to the given address</h3>
```
to:
```
        <div class="btc-txt" style="margin-bottom:10px;" >
          <h3 ng-show="order.status == -1" ng-cloak >To pay, send exact amount of BTC to the given address</h3>
```
To be able to change the h3 and span text settings.

changed:

<table class="">

to:
```
      <table class="btc-table"> 
```
To be able to change the h5 settings and other table options.

changed:
```
      <td class="" style="vertical-align:top;"> 
        <h5 for="invoice-amount">Amount</h5>
```
to:
```
      <td class="btc-amount" style="vertical-align:top;"> 
        <h5 for="invoice-amount">Amount</h5>
```
To be able to change the amount settings.

changed:

<input type="text" class="" ng-value="order.address" readonly="readonly">

to:

<input type="text" class="btc-address" ng-value="order.address" readonly="readonly">

To be able to change the btc address settings.

If you take a bit more time you can probably optimize it a bit, maybe even add some options in wp-admin so you can set all settings there. But with above code you can simply change all colors, heights, width, paddings and margins with some simple custom css codes in your theme.
Plugin Author blockonomics
(@blockonomics)

8 years, 8 months ago

Awesome work @bambino82 , this really helps ! Where have you defined the css style, inside order.php ? We need to somehow do this so that the merchant can still get updates of the plugin without conflicting with his style changes.

bambino82
(@bambino82)

8 years, 8 months ago

Well i just added the classes to order.php. I did not add the css styles into order.php as most themes have a “custom css” option in their theme. Alternativaly people can alway just add it in the custom wordpress css file or create their own.

This way all you guys have to do is write down which classes are available (add those in the plugin setup explanation or extra features part) and customers can decide for themselves if they want to use them.

I think this is most easy and also doesnt cost any load to the plugin itself. Offcourse if you want to make it more user-friendly you could change some code and add some settings in the wordpress admin.

bilskirnir
(@bilskirnir)

8 years, 7 months ago

Just got this plugin, same problem. No way to style the CSS!
Plugin Author blockonomics
(@blockonomics)

8 years, 7 months ago
Sincere apologies for the issue. We will incorporate the changes suggested by @bambino82 within a few weeks.
- This reply was modified 8 years, 7 months ago by blockonomics.
Plugin Author blockonomics
(@blockonomics)

8 years, 6 months ago

Hi @bambino82, done with changes. Please have a look at https://github.com/blockonomics/woocommerce-plugin/issues/18

Let me know if this looks good

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Payment page styling’ is closed to new replies.