Jump to content
  • 0

Why is the appearance/style of my DataPage different after deploying in WordPress?


Latte

Question

When I choose to deploy my datapage to WordPress, the styling looks quite different and some elements and fields like radio buttons look distorted.

The appearance changed and it is not like the one from the preview while I was creating my app, it just looks odd. Why is that and is there a way around it?

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

Hi Latte, 

Since WordPress themes have their own classes/styles it is possible that these classes will override your Caspio Datapage classes.
Also having website builder plugins like Elementor or similar can interfere and make your site appear differently. 

This is the solution that worked for me, and I hope it will work for you too.


First try to identify names of classes that your WP Theme is using by Viewing the source code by pressing CTRL+U if you are using windows.
Press CTRL+F to find styles applied by searching "stylesheet".

For example if you have applied basic WordPress theme "Twenty Twenty-One" you will find a stylesheet with the id:

<link rel="stylesheet" id="twenty-twenty-one-style-css" href="http://my-website.com/wp-content/themes/twentytwentyone/style.css?ver=1.1" media="all">

Focus on the 'id' attribute: 

 id="twenty-twenty-one-style-css"

Now you've found the name of the style applied.

The most elegant and standard way of adding and removing styles and other functionalities in WordPress is your functions.php file. 

If your goal is to remove the overwriting style from a specific page, you'll also need it's name. Let's say you want to remove the styles from landing-page
Example: www.mywebsite.com/landing-page

To do so in WP, follow these steps:

1. Log in to your WordPress dashboard
2. Navigate to "Appearance" tab and open Theme Editor
3. On the right side, under "Theme Files" choose "functions.php"
4. Scroll down to the bottom of the site, add the following WordPress function and press "Update File":

function remove_styles() {
    if (is_page( 'landing-page' )) {
        wp_dequeue_style( 'twenty-twenty-one-style' );
    }
}
add_action( 'wp_enqueue_scripts', 'remove_styles',99999 );

5. The function should remove the main Twenty Twenty-One Theme style. 

Note that you'll need to paste the name of the theme style without '-css' part and change this part of code if your page is a custom template

if (is_page_template( 'landing-page.php' ))

Hope this helps.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...