Forums

Home » Liferay Portal » English » 3. Development

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Seeya S Kudtarker
Localised CSS of portlet affects liferay page
March 11, 2013 11:02 PM
Answer

Seeya S Kudtarker

Rank: Regular Member

Posts: 187

Join Date: January 15, 2013

Recent Posts

I have css and js script localised for my portlet. I have included it in liferay-portlet.xml and it picks up from there. The problem is the css which is written for my particular protlet is overwriting the css of the liferay and it is affecting the entire web page. That is when I go to control panel and click on the portlet from the menu, the css of the page gets changed .

How should this be prevented?
Samuel Kong
RE: Localised CSS of portlet affects liferay page
March 11, 2013 11:26 PM
Answer

Samuel Kong

LIFERAY STAFF

Rank: Liferay Legend

Posts: 1483

Join Date: March 10, 2008

Recent Posts

In liferay-portlet.xml, add the <css-class-wrapper> element so that you can target your CSS to just your portlet.
Seeya S Kudtarker
RE: Localised CSS of portlet affects liferay page
March 11, 2013 11:39 PM
Answer

Seeya S Kudtarker

Rank: Regular Member

Posts: 187

Join Date: January 15, 2013

Recent Posts

Sameul Kong:
Hey thanks for thr reply. I have added <css-class-wrapper> myportlet-name</css-class-wrapper> name in the liferay-portlet.xml file.
My css file is affecting the control panel menu on the page. It has got shifted a bit.
Is it possible to structure in such a way that the control panel menu is left without getting affected with my css?

Thanks!
Seeya S Kudtarker
RE: Localised CSS of portlet affects liferay page
March 12, 2013 12:08 AM
Answer

Seeya S Kudtarker

Rank: Regular Member

Posts: 187

Join Date: January 15, 2013

Recent Posts

Thanks Sameul Kong:
Like I said I have already used <css-class-wrapper> in my liferay-portlet.xml with my portlet name. Do I need to include my portlet name either in my jsp or css file?

Thanks
Samuel Kong
RE: Localised CSS of portlet affects liferay page
March 12, 2013 5:59 PM
Answer

Samuel Kong

LIFERAY STAFF

Rank: Liferay Legend

Posts: 1483

Join Date: March 10, 2008

Recent Posts

Yes, you'll need to include it in your css. Example:

1.some-rule {
2    color: red;
3}


becomes

1<css-class-wrapper>my-portlet</css-class-wrapper>
2
3.my-portlet .some-rule {
4    color: red;
5}