Forums

Home » Liferay Portal » English » 3. Development

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Yan Paing
Dynamically add css to portlet
April 8, 2011 1:23 AM
Answer

Yan Paing

Rank: Junior Member

Posts: 74

Join Date: March 10, 2010

Recent Posts

Hi everyone,
I would like to know how to add css dynamically to portlet.

Our requirement is ...
I have more than one community.
I have each theme for each community.
I put all css for each community under theme.
Everything is fine in firefox and safari.
But for IE there have IE limitation on css (http://acidmartin.wordpress.com/2008/11/25/the-32-external-css-files-limitation-of-internet-explorer-and-more/)

So i am trying to move some css under respective portlet.
For doing this what i found is.

under liferay-portlet.xml
<portlet>
<portlet-name>CommunityMembers</portlet-name>
<icon>/icon.png</icon>
<indexer-class>com.platform.srv.user.model.Indexer</indexer-class>
<open-search-class>com.platform.apps.individual.search.MemberOpenSearchImpl</open-search-class>
<instanceable>false</instanceable>
<header-portlet-css>/css/main.css</header-portlet-css>
<footer-portlet-javascript>/js/main.js</footer-portlet-javascript>
<css-class-wrapper>CommunityMembers-portlet</css-class-wrapper>
</portlet>


So i want to add css dynamically according to the community name.
For example if the current community name is ABC the css shoule be <header-portlet-css>/css/abc.css</header-portlet-css>

Is it possible for doing this.
If anyone know please share knowledge.

Thanks in advance,
Yan Paing
Olaf Kock
RE: Dynamically add css to portlet
April 8, 2011 2:30 AM
Answer

Olaf Kock

LIFERAY STAFF

Rank: Liferay Legend

Posts: 1709

Join Date: September 23, 2008

Recent Posts

If you're running the portlet in production mode, all the css files from the theme should be minified and collected in a single css file.

You might be able to work around this issue by adding the CSS for the portlets to the theme - this limits the amount of css to the required minimum. For example, to style liferay's Sign-In portlet, you can address it in css with
1.portal-login {
2   margin: 10px;
3}

Similar things can be done with your own portlets - you'll obviously only need to add the css relevant to your current theme and refer in there to the portlets you expect to be deployed in your installation
Yan Paing
RE: Dynamically add css to portlet
April 8, 2011 2:53 AM
Answer

Yan Paing

Rank: Junior Member

Posts: 74

Join Date: March 10, 2010

Recent Posts

Thanks for answer Olaf.
Now i just fixed this issue by moving some css to templates folder velocity micro file and it is working fine.
Thanks,
Yan
Path Finder LifeRay
RE: Dynamically add css to portlet
November 20, 2012 5:28 AM
Answer

Path Finder LifeRay

Rank: Expert

Posts: 262

Join Date: September 18, 2009

Recent Posts

yan paing:
Thanks for answer Olaf.
Now i just fixed this issue by moving some css to templates folder velocity micro file and it is working fine.
Thanks,
Yan


i will extend your query please answer this. i have my portal where i need to change the background color of the whole portal i.e in the wrapper in general we will do that(modifying in the concern css file).
i need to do this modification inside the portal like the way we are doing with portlets look and feel

is that possible ?? on a fly can i change the background of the whole portal without deploying it??

regards
path