Jump to content
  • 0

Style Compatibility While Deploying in Wordpress


Question

Sometimes deploying to Wordpress may result in Caspio DataPages looking not as expected with broken alignment, glitching buttons and weird borders.

This happens due to Wordpress having its own set of styles which interfere with styles provided by Caspio. To avoid such issues, it is possible to find style conflicts and edit styles manually.

For example, to make tables look normal, it is possible to add such user-defined style:

table td, table th
{
	border: none !important;
}

Alternatively, it is possible to import and apply the style attached here which contains small modifications eliminating most of the glitches caused by Caspio vs. Wordpress styles.

Any better ideas?

Wordpress_Styles.zip

Link to post
Share on other sites

3 answers to this question

Recommended Posts

  • 0
On 3/22/2019 at 8:58 AM, deemuss said:

Sometimes deploying to Wordpress may result in Caspio DataPages looking not as expected with broken alignment, glitching buttons and weird borders.

This happens due to Wordpress having its own set of styles which interfere with styles provided by Caspio. To avoid such issues, it is possible to find style conflicts and edit styles manually.

For example, to make tables look normal, it is possible to add such user-defined style:


table td, table th
{
	border: none !important;
}

Alternatively, it is possible to import and apply the style attached here which contains small modifications eliminating most of the glitches caused by Caspio vs. Wordpress styles.

Any better ideas?

Wordpress_Styles.zip

Hello Deemuss,

It is possible to manually modify the Styles, but you may need to use the development tools to do that.

So once you've deployed your DataPage in WordPress, you can publish and inspect the element you need to modify then

apply the CSS. You may paste the code inside the HTML block or header/footer with HTML editor disabled inside that particular DataPage.

Perhaps there are better ways to do this, I would also like to know. :)

Link to post
Share on other sites
  • 0

Hello @deemuss

Adding '!important' to your style  is used for overriding the styles that are previously declared in other style sources, in order to achieve a certain design.  This is the most cases when deploying Datapages on a web builder. The custom style of the web builder may override some of the Caspio's style, so adding of '!important' may help to retain your original Caspio style.

 

Link to post
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...