Troubleshooting: The "Load more" button looks different in Production vs. Sandbox

Discussion Knowledge Base
,
1

PROBLEM: The “Load more” button in Skuid in the Salesforce Production org doesn’t look like the one in Sandbox.

RESOLUTION: Adjust the additional CSS in the v1 theme which is selected as the default theme.

Problem Details

After deploying Skuid pages (v1) from Sandbox to Production, the “Load more” button in the Table footer looked different: font color, background color, and border style were not the same as in Sandbox. The screenshot below shows the Button in Sandbox on the left, and the Button in Production on the right.

User: 'OPlyb3S22Q4-X1__e1RW8m-tqZfsM6xm6ZoTLXqUhRC480uA5BUoGPo9NKQVFPc_LDvuAoeheZ9KxbbNhbq5ddSNYIxYAdkQV2_ADxEeSHjtwE5MH2w5IaVyHAJ2qhMcNzftac0B'

Resolution Process

  1. First I checked if the themes in Sandbox and Production were up to date. If they weren’t, we’d recommend updating out of date Themes. However, the themes were up to date.
  2. Next, I double checked if the Skuid pages in Sandbox and Production were exactly the same. To do this, I copied both XMLs and compared them in diffchecker. They weren’t identical, however I couldn’t find any relevant differences. The theme was the same (Default). The page in Sandbox contained additional CSS, but it was not related to button styles.
  3. Nevertheless, I used the browser console to inspect the buttons and verify that the CSS was different.
  4. Furthermore, I checked the custom JS on the page which was different as well, but also not related to any style settings.
  5. Since the different CSS must be stored somewhere, I checked the themes again. You can’t edit the “Default” theme, but you can select which theme should be assigned as the default theme. A custom theme was selected. This custom theme contained additional CSS in Sandbox, but not in Production.

Outcome

You can check additional CSS in the theme builder, go to the last item in the list on the left.

User: 'YeKR-czg1jIqW3CALnZgKGkDW2VmEOquXLmO2Fzuf-Bc6ODP2cE9N2Qv4yQWqEBz_yVd4TklYYjuoyf_cYXbFqMlnqnX_jRcN82KrG3Vy_3WDCTEAPZm8LPuGKdwyMYN83CCpC7N'
User: 'YeKR-czg1jIqW3CALnZgKGkDW2VmEOquXLmO2Fzuf-Bc6ODP2cE9N2Qv4yQWqEBz_yVd4TklYYjuoyf_cYXbFqMlnqnX_jRcN82KrG3Vy_3WDCTEAPZm8LPuGKdwyMYN83CCpC7N'1600×684 76.5 KB

After we copied the additional CSS from the custom Design theme in Sandbox to the one in Production, we reloaded the Skuid page preview and the buttons looked the same.

Takeaways

The Skuid page design can vary in separate Salesforce orgs even though the page XML is identical (including the selected Design theme/system), because the Design theme/system settings can be different. If “Default” is selected in both places, double check which Design theme/system is selected as the default theme/System, and check those for any differences. If you can’t find any differences, but want to make sure that it’s identical, you could export the Design theme/system from Sandbox and import it in Production.

Documentation

Bonus:

In v2 you can even set up individual default Design Systems for different users. If your Skuid page looks different in Sandbox and Production, double-check if the respective users have different Design System defaults.

Get help with an issue

Ask in the Skuid user community in the questions category

  • If you have paid support ask your question on our support portal skuid.freshdesk.com.
  • If you’re interested in support, contact your Account Executive.