Home Forums Weaver Xtreme Theme “Weaver Xtreme Theme” destroys layouts and styles of “Tutor LMS”

Viewing 16 posts - 1 through 16 (of 18 total)
  • Author
    Posts
  • #69644
    artyus
    Participant

    Hi!

    I install the Tutor LMS plugin (https://wordpress.org/plugins/tutor/) on your theme and the whole layout is destroyed. There are no other plugins.
    Wordpress, php and everything else is updated. With all other themes, everything works fine, so the problem is exactly in your theme.

    Please check and fix.

    #69645
    scrambler
    Moderator

    You are going to have to be a lot more specific about what is it exactly you mean by destroyed, and provide a link to the “broken site” if you want us to check what may be going on.

    And just because it does not break other theme does not mean this is not the fault of a plugin….

    It could just be that the plugin is messing with something other themes don’t use but weaver does.

    Either way we need more details to investigate.

    #69646
    artyus
    Participant

    OK.
    Especially for you did the test site, there are only your theme and Tutor LMS plugin.

    The “Tutor LMS” elements (columns, blocks, etc.) are not placed in width on the page, many other elements are shifted. Apparently, the parameters of Margin, Padding, Width values, etc. are violated.

    All this can be seen on the pages:
    console/
    courses/
    courses/test/

    In the next private post I give a link and password to the entrance.

    #69647
    Private Reply
    artyus
    Participant
    This reply has been marked as private.
    #69648
    scrambler
    Moderator

    We need more details, of what you think the layout should look like

    If I go to the Console page, I see two columns of black boxes under the word console, and that layout comes entirely from The Tutor Plugin CSS, so if that is not correct I don’t see how the theme could be the culprit.

    If you can describe in detail what elements is out of place in your opinion, I can see if that is the result of the theme CSS or the plugin CSS

    #69649
    artyus
    Participant

    Switch to any other theme and you will see the difference. Blocks must be near, not each other, courses in one line should be 3 pieces, etc.

    Specially made screenshots.

    Courses page

    One course page

    User page

    #69650
    scrambler
    Moderator

    Well, For the courses page, the problem comes from the fact that the Tutor plugin failed to set the box-sing:border-box property. As a result, although they set each column to be 33.33% wide, they also have padding of 15px that gets added to that and makes the three columns overflow.

    The fact that on some other theme it works just mean that these must have box-sizing:border-box set by default which is pure luck.
    But the Plugin should set the rules it needs, not hope the theme has them on by luck…

    Add the rule (missing from tutor CSS) below to the Theme Global Custom CSS Rule box and the courses column pages should work
    div[class*=”tutor-course-col”], [class*=”tutor-col”] {box-sizing:border-box;}

    I don’t know how to get to a tester profile page so I don’t know if that rule will fix it too, if not give me a link to a tester profile page.

    But basically, Tutor is failing to set the box-sizing:border-box property their layout needs, so you should report that as a bug to them!

    #69651
    artyus
    Participant

    Yes, I immediately noticed these 15 pixels on the sides, and for several days I tried to fix them with the help of additional CSS rules, but there are a lot of shifted items, therefore, it is necessary to add a lot of rules. Therefore, it became clear that the error is not at the level of individual elements.

    I added into Weaver Custom CSS the rule you specified, but nothing has changed, the items are still overflowed.

    I note that I gave you full access to this test site as an Administrator, so you have all the rights for check all Tutor LMS settings and you can use them.

    Already within a few days I conduct correspondence with the Tutor developers and they, as I understand it, were sure that the problem is not for them. We will have to upset them.

    #69652
    scrambler
    Moderator

    The rule was invalid, because the forum editor replaced the double quote with asymmetrical ones….

    I retyped the quotes in the rule, and it works now.

    Correct rule with proper quotes is below using the preformatted format so they don’t get replaced…

    div[class*="tutor-course-col"], [class*="tutor-col"] {box-sizing:border-box;}

     

    #69653
    artyus
    Participant

    Oops, I also did not pay attention to quotes format.

     

    Yes, it works. Only then 2 more questions:

    1. Exactly the same problem with 15px by padding in the black blocks on the user page. Judging by the layout, they should be displayed by three pieces in one row.
    2. And check boxes on the course page (the .tutor-course-loop-header-meta .tutor-course-wishlist selector) also require 15-20 pixels of margin for right side.

    (I again made screenshots for convenience).

    This is also not the problem of your theme, but the flaws of plugin styles?

    #69655
    scrambler
    Moderator

    1- I need a link to the User page you speak of, or how to navigate to it so I can check the page CSS.

    2- The check box at the top right of the course page (class tutor-course-loop-header-meta) have the same problem, they have CSS to set their width at 100%, but they also have padding, so they also need the box sizing property, or else they extend past the 100% and get cutoff
    Add the class to the rule I gave you with a coma.

    div[class*="tutor-course-col"], [class*="tutor-col"], .tutor-course-loop-header-meta {box-sizing:border-box;}

    “This is also not the problem of your theme, but the flaws of plugin styles?”
    Yes all of these are the same problem, they are using CSS to set the width of elements, and also add padding but are missing the box-sizing…

    By default, when you set an element width, it applies to the content only. If the element has padding and or a border these will de added to that width.
    So if you set an element to width 50% and the element also has padding and or border, its actual width will be larger than 50%.

    If you want the width to apply to all of he element (content plus padding plus border), you need to set the box-sizing to border box (search the web for CSS box sizing property for more details)

    So if you are setting the padding with the plugin options, then it is their mistake to forget the box-sizing. If you are adding padding yourself without the plugin knowing, then is is your fault 🙂

    #69657
    artyus
    Participant

    Thanks for the answer.

    In fact, elements with similar problems in this plugin are detected almost after turned on each option and after performing each new step. Yesterday I again began to correct their CSS, but within half an hour I again got a hundred rows of fixes. Therefore, now I will simply describe this problem for their support service and, among other things, give a link to this our discussion.

    Thanks again for qualified support.

    #69658
    Private Reply
    artyus
    Participant
    This reply has been marked as private.
    #69660
    scrambler
    Moderator

    You need the rule

    .tutor-dashboard .tutor-dashboard-content .tutor-dashboard-info-cards .tutor-dashboard-info-card {box-sizing:border-box;}

     

    #69662
    artyus
    Participant

    )))

    Thanks. There need to have a lot of rules, I wrote to them, let them fix it.

    https://wordpress.org/support/topic/serious-shortcomings-in-css/

    #69663
    scrambler
    Moderator

    A word of advice, you may want to take a less aggressive/accusatory tone when you report problems…

    It does not motivate people to help you 🙂

Viewing 16 posts - 1 through 16 (of 18 total)
  • The topic ‘ “Weaver Xtreme Theme” destroys layouts and styles of “Tutor LMS”’ is closed to new replies.