This topic contains a post which is marked as Best Answer. Press here if you would like to see it.
*

Tango

  • ****
  • 214 posts
Plugin breaks the styling of my page
« on: August 10, 2021, 04:16:31 PM »
Please note that Osclass Pay Payment Plugin v3.0.0 has inconsistent/broken CSS for the following sections:

As you can see in the above screenshots, some of the issues are: the entire font on the page (even the main menu and the footer) gets smaller, shadows are added to some text, the content is getting boxed, random padding is getting added to some elements etc.
My guess is that wen you designed these sections, you forgot to close some CSS elements/tags and they end up messing up the entire page.

The only sections that work properly and don't mess anything up, are:

Can you please issue a fix for this?
Thanks!

*

MB Themes

Re: Plugin breaks the styling of my page
« Reply #1 on: August 10, 2021, 04:31:19 PM »
I do not see any problem in plugin based on your screenshots, just gabs in theme (like minimum height, footer sticking to bottom of page, ...)
  To get fast support, we need following details: Detail description, URL to reproduce problem, Screenshots

*

Tango

  • ****
  • 214 posts
Re: Plugin breaks the styling of my page
« Reply #2 on: August 10, 2021, 04:51:33 PM »
I do not see any problem in plugin based on your screenshots, just gabs in theme (like minimum height, footer sticking to bottom of page, ...)
Can you please look at all the screenshots again?
Those gaps are not normal...

Also, how do you explain this (the default Bender) - screenshot ?

And why do the Membership and Payments sections work fine, while the others don't?

Thing is that I've managed to hack-fix some of the issues by correcting the plugin's code, however, with every update I need to check everything again...
Code: [Select]
- Fix User Dash spacing
\oc-content\plugins\osclass_pay\css\user.css - at line 467 .osp-body.osp-body-itempay - SET the padding to 12px;

- Fix User Dash font size for Items and Cart
\oc-content\plugins\osclass_pay\css\user.css - Items - at line 549 .osp-item - DELETE font-size:13px; AND line-height:17px;
\oc-content\plugins\osclass_pay\css\user.css - Items - at line 565 .osp-item .osp-promote .osp-icon - SET the font-size: to 18px;
\oc-content\plugins\osclass_pay\css\user.css - Cart - at line 686 .osp-cart - CUT font-size:13px; and ADD it to line 687 .osp-cart .osp-cart-row

- Fix the whole page spacing issue at Wallets & Packs and fix the Voucher text color
\oc-content\plugins\osclass_pay\css\user.css - at line 726 .osp-pack - DELETE padding:14px;

So I'm sorry Frosticek, but in this case it's clearly the plugin.

Marked as best answer by frosticek on September 24, 2021, 12:57:50 PM
*

MB Themes

Re: Plugin breaks the styling of my page
« Reply #3 on: August 10, 2021, 05:54:54 PM »
@Tango
I think you are hidden developer :)
It's not plugin, it's theme not using box-sizing.

Very last line in user.css of plugin should be changed to this:
Code: [Select]
.osp-custom-dialog, .osp-dialog.ui-dialog, .osp-pay-button, .osp-body, .osp-um,.osp-promote-form, .osp-restrict-category {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
.osp-custom-dialog *, .osp-dialog.ui-dialog  *, .osp-pay-button  *, .osp-body  *, .osp-um  *, .osp-promote-form  *, .osp-restrict-category  * {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}

Will be in next update.
  To get fast support, we need following details: Detail description, URL to reproduce problem, Screenshots

*

osclassic

  • ***
  • 34 posts
Re: Plugin breaks the styling of my page
« Reply #4 on: August 11, 2021, 03:46:38 AM »
Is the Affiliate Program included in the Payment Plugin? If not, where can I get the plugin for affiliate program that offers referral bounty as shown in the screenshot? Thanks!

*

MB Themes

Re: Plugin breaks the styling of my page
« Reply #5 on: August 11, 2021, 08:40:13 AM »
@osclassic
Plugin includes affiliate program, you may see it on screenshot:
  To get fast support, we need following details: Detail description, URL to reproduce problem, Screenshots

*

osclassic

  • ***
  • 34 posts
Re: Plugin breaks the styling of my page
« Reply #6 on: August 11, 2021, 10:02:58 AM »
Yes, I saw it in the screenshot that is why I asked but I have checked the payment plugin demo a couple of times and  I do not see where the affiliate portion is configured - under which menu - user/item or packs?  Where is it configured - is it in the demo or is that disabled in the demo?

*

MB Themes

Re: Plugin breaks the styling of my page
« Reply #7 on: August 11, 2021, 10:35:00 AM »
@osclassic
When user register, can enter referal code.
https://plugins2.abprofitrade.eu/user/register
  To get fast support, we need following details: Detail description, URL to reproduce problem, Screenshots

*

Tango

  • ****
  • 214 posts
Re: Plugin breaks the styling of my page
« Reply #8 on: August 11, 2021, 12:08:58 PM »
Very last line in user.css of plugin should be changed to this:
Code: [Select]
.osp-custom-dialog, .osp-dialog.ui-dialog, .osp-pay-button, .osp-body, .osp-um,.osp-promote-form, .osp-restrict-category {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
.osp-custom-dialog *, .osp-dialog.ui-dialog  *, .osp-pay-button  *, .osp-body  *, .osp-um  *, .osp-promote-form  *, .osp-restrict-category  * {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}

Will be in next update.

Thanks for the update.

It works fine for Bender, however .osp-item, .osp-pack and .osp-cart padding/margin/font still break my theme's layout.
Membership and Payments sections are like from a different plugin, as they render perfectly.

Oh well, I guess I still have to use the CSS hacks for those 3 sections.

*

Tango

  • ****
  • 214 posts
Re: Plugin breaks the styling of my page
« Reply #9 on: September 23, 2021, 04:08:40 PM »
Please note that I've found some more styling issues using the default Bender 3.2.0, as you can see in the attached screenshot.

*

MB Themes

Re: Plugin breaks the styling of my page
« Reply #10 on: September 23, 2021, 04:15:28 PM »
I think above post will fix it
@Tango
I think you are hidden developer :)
It's not plugin, it's theme not using box-sizing.

Very last line in user.css of plugin should be changed to this:
Code: [Select]
.osp-custom-dialog, .osp-dialog.ui-dialog, .osp-pay-button, .osp-body, .osp-um,.osp-promote-form, .osp-restrict-category {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
.osp-custom-dialog *, .osp-dialog.ui-dialog  *, .osp-pay-button  *, .osp-body  *, .osp-um  *, .osp-promote-form  *, .osp-restrict-category  * {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}

Will be in next update.
  To get fast support, we need following details: Detail description, URL to reproduce problem, Screenshots

*

Tango

  • ****
  • 214 posts
Re: Plugin breaks the styling of my page
« Reply #11 on: September 23, 2021, 04:42:11 PM »
Indeed, it fixes it.
I'm doing some fresh installs to check some conflicts and I forgot to add the css fix.

Thanks!

*

MB Themes

Re: Plugin breaks the styling of my page
« Reply #12 on: September 24, 2021, 12:57:36 PM »
@Tango
No problem ;)
  To get fast support, we need following details: Detail description, URL to reproduce problem, Screenshots