[Resolved] Same content but different CSS

[Author]

Posts

[kelvinL-2]

Dear Sir/Madam,

I have two pages with two CRED forms, I don't know why both have a different style to the element <H1>

Refer to the screenshot, I capture all screen for reference. you should find the content from CRED form and page, both are the similar but different style. Why the merchant can't load the correct style?

Best regards,

Kelvin.

[Beda]

It seems on one side the Theme CSS is used, on the other the Style CSS (also theme)
Does your theme duplicate the styles?
Then it might depend on what is before that form on the page (for example that DIV mentioned in the style sheet)

I would suggest to first test with another Theme to confirm this only happens with the current one, and then adjust that themes's CSS.
I see that you use Toolset Starter and have to reccommend disabling it ASAP and changing to any other theme as the Starter is deprecated and incompatible with modern PHP and Toolset.
Other themes can be found here:
https://toolset.com/documentation/recommended-themes/

[kelvinL-2]

Dear Beda,

Oh very bad to hear about the Toolset Starter is deprecated, I don't use other 3rd party themes because I assume the theme from Toolset should 100% compatible with all feature of Toolset plugins.

Changing the theme is a big job to revamp the layout.

Now both pages load the same theme and there is not individual CSS in the form, both pages use the same Toolset Layout. From the inspector view for dealer page, we can find it does load the style.css but the merchant page doesn't.

How the sequence of Toolset load the style?

Best regards,

Kelvin.

[Shane]

Hi Kelvin,

I took a look at this thread for you. Your last question is the sequence at which the styles are loaded?

This is actually not dependent on toolset and its dependent on how the browser loads the styles. So what happens is that the Last css rule that the browser sees is the one that is applied as the appropriate styling.

So it doesn't matter how the styles are loaded but the last rule is what is applied.

Thanks,
Shane

[kelvinL-2]

Dear Shane,

I understand the last css rule will override the previous, I think my problem is the style.css from the child theme didn't be loaded on a page but be loaded on another page. Both pages apply the same Toolset layout with different CRED form but both forms don't have custom css inside.

I don't think a different page can load a different theme.

Best regards,

Kelvin

[Shane]

Hi Kelvin,

You are absolutely correct.

The style should be loading regardless of the page.

Is this a custom css you are enqueuing in the site ? Would you mind allowing me to have access to the site to have a look ?

Thanks,
Shane

[Shane]

Hi Kelvin,

I believe I know what the issue is, however I need you to send me the link to the pages that you provided in your initial screenshot so I can compare the two.

Thanks,
Shane

[kelvinL-2]

Dear Shane,

Sorry late to reply to your request, as both pages can only be shown for a specific user role, I created an account toolsetsales, the password is the same of the toolset

The two pages are
hidden link
hidden link

[Shane]

Hi Kelvin,

The issue was that these pages were using 2 different Layouts.

The Add Merchant page was using the "Layout for Pages" Template but the Add New Dealer was using the layout "Default Page Layout" template.

Thanks,
Shane

[kelvinL-2]

My issue is resolved now. Thank you!