Style sheet from my webpage removes all styling from my reports and forms

[blarney]

The style sheet (css) from my webpage removes all styling from my reports and forms. I can't work with iframes, there's just too much of a struggle to refresh data with multiple iframes deployed on one page (for me at least).  

My question is can I get my embedded deployed code to call the css style sheet from Caspio, instead of that of the webpage???   I've tried copying all the css into the webpage's style sheet, but for some reason my tables on this website appends a number at the end of of the css selector... for example:

.cbFormLabel

is now

.cbFormLabel_23b221101fd7e9

I have no idea if my website software (Artisteer) is appending that, or if the host is.... I know just about enough about coding, to realize I have no idea what I'm doing, any help would be very much appreciated.

 

 

 

[Mathilda]

On 3/22/2017 at 10:33 AM, blarney said:

The style sheet (css) from my webpage removes all styling from my reports and forms. I can't work with iframes, there's just too much of a struggle to refresh data with multiple iframes deployed on one page (for me at least).  

My question is can I get my embedded deployed code to call the css style sheet from Caspio, instead of that of the webpage???   I've tried copying all the css into the webpage's style sheet, but for some reason my tables on this website appends a number at the end of of the css selector... for example:

.cbFormLabel

is now

.cbFormLabel_23b221101fd7e9

I have no idea if my website software (Artisteer) is appending that, or if the host is.... I know just about enough about coding, to realize I have no idea what I'm doing, any help would be very much appreciated.

 

 

 

Hi blarney,

This is the common problem for CMS users. If you use embed code, the datapage become a part of a webpage, hence inherits all style attributes, defined for the webpage. Is your CMS allows editing CSS code of your theme? If yes, you need to edit CSS of your CMS and delete or edit some attributes.

If you can't edit CSS of the theme, overwrite elements in the header of the datapage. For example, if your CMS enforces borders, add the following code in the header of datapage:

<style>
#caspioform tr
{
border: none !important;
}
#caspioform td
{
border: none !important;
}
</style> 

 

Using iframe deployment eliminates style issues, however you may face problems with passing parameters.

Hope that helps

[blarney]

On 3/24/2017 at 2:40 AM, Mathilda said:

Hi blarney,

This is the common problem for CMS users. If you use embed code, the datapage become a part of a webpage, hence inherits all style attributes, defined for the webpage. Is your CMS allows editing CSS code of your theme? If yes, you need to edit CSS of your CMS and delete or edit some attributes.

If you can't edit CSS of the theme, overwrite elements in the header of the datapage. For example, if your CMS enforces borders, add the following code in the header of datapage:

<style>
#caspioform tr
{
border: none !important;
}
#caspioform td
{
border: none !important;
}
</style> 

 

Using iframe deployment eliminates style issues, however you may face problems with passing parameters.

Hope that helps

I'll look into to doing this... I can edit the CSS (from the stylesheet once it's on the server), but I update the page to amazon using a zip file created by the webpage software I use and it'll be overwritten each time I make a change to the page in the software and upload the new zip file.

 

The software has an html insert function, but it's limited to the block i'm editing, and doesn't give me access to the header.  I think there may be a setting that allows the user to add code to the header, but I haven't played with that yet.

My main issue was having a report, deployed on the same page, update when a form was submitted. The form opens itself on the same page and the report is supposed to update... it works fine when I don't use iframes, but when I have two iframes in the page, the form refreshes, but the page doesn't.  I've tried a million refresh scripts to no avail.

 

Anyway, I found a work around.  I found that I can deploy my report iframe into the footer of the form. I now only deploy my form's iframe on my page , and the report iframe, located inside the form footer, updates.

 

...this is exactly what I needed, so I'm going to stick with this and play around with the CSS on a test page in the future.... because I'd prefer to get away from iframes.

 

Thank you for help!