Prevent CSS from being applied to custom portlet

[Ben Uphoff, modificado hace 9 años.]

We've developed a portlet to render Jaspersoft reports using their visualize.js Javascript implementation. It works great. The problem is, when the content is rendered, Liferay insists on applying its own CSS to the rendered HTML that is generated by the visualize.js scripting. How can we prevent Liferay from applying this CSS?

It seems to me there should be some simple configuration boolean property in the portlet, like "Apply CSS from page theme" (defaults to false).

I know about "Advanced Styling" - not a great solution, as I can't anticipate what styling the Jaspersoft viewer will pass to the portlet. I don't want to write a style rule for every eventuality - I just want to turn the CSS off for the portlet.

Any clues?

Thanks, Ben

[David H Nebinger, modificado hace 9 años.]

Sorry, Ben, but it's not that easy. Liferay styles pretty much every element via CSS and JS. Your only option will be to add to visualize.js stuff to remove Liferay styling on the elements that you don't want.

[Ben Uphoff, modificado hace 9 años.]

Thanks for the amazingly quick response, David. Wish it were "good" news, though!

What do you think about creating a new, harshly neutered theme that has very little, if any, references to CSS? Then, apply that theme to the rendering page? Seem a viable approach?

Thanks again, Ben

[David H Nebinger, modificado hace 9 años.]

It's possible, but the most lightweight theme, unstyled, tends to look like total crap. It's only after you start layering in styling for Liferay elements that the page starts to look better, but then you'll conflict with the JS again...

[Ben Uphoff, modificado hace 9 años.]

Ah! Unrestrained, brutal assessment - thanks, David. Yeah, we've seen the unstyled look - not pretty. In this case, might be OK, since we really just need an almost-borderless window in which to display the rendered report. This is going to be way more work than it ought to be...just to turn something off that should be a boolean config option (in my regard). Thanks for your thoughts. -Ben

[David H Nebinger, modificado hace 9 años.]

I'm not sure if it will work, but you could try rendering the report in an iframe - that might isolate it enough that the Liferay theme CSS does not apply, but honestly I've never tried it and am not sure if it would really work.