Style Compatibility While Deploying in Wordpress

[deemuss]

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

[Perzival]

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.

[PotatoMato]

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.

 

[PotatoMato]

I hope this helps