0

I'm facing an issue on my Liferay portal.

I have a web content with a text part saved as html. In my jsp, i have :

 <div>${aWebContent.content}</div>

But the page include a css that is applied on all page (liferay theme) and i don't want this to be applied on my div. Does a solution exist to do this ?

Thnaks !

DyM
  • 628
  • 1
  • 6
  • 16

3 Answers3

2

You can unset all style of an element by setting all property of CSS. 

.someDivClass{
  all: initial;
}

This will remove all applied CSS on this element either by its own or by its parent and will reset to initial value.

For more detail you can refer to - https://developer.mozilla.org/en-US/docs/Web/CSS/all

This property is not support in all browser, in order to find out the browser support you can follow this link - https://caniuse.com/#search=all

Ashvin777
  • 1,446
  • 13
  • 19
1

One option is to embed your widget inside an iframe; as such, no styles from the surrounding document get inherited. This is the method used by many social widgets, such as share buttons, so that there isn't any style interference.

There are CSS-only options beginning to be rolled out. Safari supports:

.widget { all: revert; )

which does exactly what you're after. There's greater support for:

.widget { all: initial; )

which is supported by all modern browsers (not Internet Explorer) but strips styles back beyond the browser defaults (e.g. <div>s will become inline), so you will have to add those back in - for example:

.widget block { display: block; }

But at least you won't get style clash.

https://developer.mozilla.org/en-US/docs/Web/CSS/initial
https://developer.mozilla.org/en-US/docs/Web/CSS/revert

jamiemlaw
  • 44
  • 3
0

While the other answers (all:initial) are good, here's another aspect : you might want to have some style, so you might as well have a more specific style in your theme. Some browsers default to black on Grey, some black on white.

Olaf Kock
  • 46,930
  • 8
  • 59
  • 90