1. Home
  2. Development
  3. RE: Theme CSS not showing up in portlet embedded in external website

RE: Theme CSS not showing up in portlet embedded in external website

Maria Maier, modified 5 Years ago.
Theme CSS not showing up in portlet embedded in external website
New Member Post: 1 Join Date: 4/21/20 Recent Posts
Hello,

I tried to embed a portlet in an external website (via <iframe frameborder="0" height="100%" src="http://localhost:8080/widget/web/abc/def/-/hij_WAR_klm_INSTANCE_abc123" width="100%"></iframe>). The problem is, that the CSS from the theme is not showing up, only the clay.css is loaded (which is the default I assume), so the portlet doesn't look the way it should.  

Inside the Liferay portal site / page the theme is loaded without problems. How can I enable the loading of the whole theme for external websites as well so the portlet is styled correctly? 

Thanks in advance!  
thumbnail
Fernando Fernandez, modified 5 Years ago.
RE: Theme CSS not showing up in portlet embedded in external website
Expert Posts: 401 Join Date: 8/22/07 Recent Posts
A theme can be a big thing... Probably not a good idea to load it on the destination website. Maybe you could include the minimal necessary CSS with your portlet...?
HTH
Fernando
thumbnail
Olaf Kock, modified 5 Years ago.
RE: Theme CSS not showing up in portlet embedded in external website
Liferay Legend Posts: 6441 Join Date: 9/23/08 Recent Posts
Maria Maier:

...
Inside the Liferay portal site / page the theme is loaded without problems. How can I enable the loading of the whole theme for external websites as well so the portlet is styled correctly?

Hard to say as we don't see the actual output. You may want to look into CORS headers, or into http/https mixed content policies
thumbnail
Christoph Rabel, modified 5 Years ago.
RE: Theme CSS not showing up in portlet embedded in external website
Liferay Legend Posts: 1555 Join Date: 9/24/09 Recent Posts
If you call the url directly from the browser (I mean: http://localhost:8080/widget/web/abc/def/-/hij_WAR_klm_INSTANCE_abc123 ), does it work? If it does, you probably run into some kind of security or setting issue.
Does the browser developer console tell you anything (e.g. access forbidden due to access policy or something like that?)

Are you indeed using the localhost url for an Iframe? I would avoid that in general, you might run into weird security issues. localhost is special.
I also just tried it with DXP 7.2 (some older patch level) and it doesn't allow me to use an IFrame  due to the X-Frame-Options: sameorigin policy. I guess, you have changed that (I am sure, there is a setting somewhere for that). Maybe the correct header is not applied to all files? (Just guessing here)