I would like to change the background color in my liferay (single portlet)

[priya damotharan, geändert vor 10 Jahren.]

Hi
I need to change the body color of my portlet . How can achieve this.
In custom.css file

#portlet_apseprojectapprovalportlet_WAR_apseprojectapprovalportlet_INSTANCE_6OUl{
	        background:#ffd700 !important;
	        body:#ffd700 !important;
}	

Specific portlet middle background color is changing .But I also need to change the whole body .

In custom.css file if I change the color here , all portlets are changing but i need to change in only one portlets like above

body {
	background: #EEF0F2;
	font-size: 11px;
}

I tried

#portlet_apseprojectapprovalportlet_WAR_apseprojectapprovalportlet_INSTANCE_6OUl .body{ background: #ffd700 ;
}

thanks in advance

[Samuel Kong, geändert vor 10 Jahren.]

I assume you mean you want to change the background for all instance of your portlet.

In liferay-portlet.xml, add something like

<liferay-portlet-app>
	<portlet>
		...
		<css-class-wrapper>apseprojectapproval-portlet</css-class-wrapper>
	</portlet>
	...</liferay-portlet-app>

and in your CSS

.apseprojectapproval-portlet {
	background: #ffd700;
}

EDIT: Removed body property from CSS since this isn't valid.

[priya damotharan, geändert vor 10 Jahren.]

Hi Samuel Kong,

Thanks for reply.

I set the following code in navigation.vm

  #set( $var_approval = "Project Approval" )
.....
#foreach ($nav_child in $nav_item.getChildren())
							#if ($nav_child.isSelected())
									<li class="selected">
									#if ( $var_approval ==  $nav_child.getName())
                                                                        </li>

.....

so that in custom.css file I used

li .prj_approval ,a .prj_approval,#navigation  .prj_approval a:hover{
	background-color:Hashffd700 !important;
	}

if i add body:hashffd700 !important; in the above code body color is not changeing.
and

#portlet_apseprojectapprovalportlet_WAR_apseprojectapprovalportlet_INSTANCE_6OUl{
	        background:#ffd700 !important;
	      
	
}

the above code is working fine. Now i Need to change the body color too . If i use the below code

/* ---------- Base styles ---------- */

body {
background: #EEF0F2;
font-size: 11px;
}
in custom.css . All the portlet get changed. I need to body color change only for one portlet


I tried
<css-class-wrapper>apse-projectapproval-portlet</css-class-wrapper> in liferay-portlet.xml
and
.apse-projectapproval-portlet {
background: #ffd700;
body: #ffd700 !important;
} in custom.css

no success
thanks in advance

[Samuel Kong, geändert vor 10 Jahren.]

Can you clarify what you mean by

priya damotharan:

i Need to change the body color too . If i use the below code

and

I need to body color change only for one portlet

[priya damotharan, geändert vor 10 Jahren.]

change the body color of one portlet (apse-projectapproval-portlet) to one color and rest of the portlet to default color.

[Sharad Sinha, geändert vor 10 Jahren.]

Hi Priya,

I am not sure what do you want exactly, but i suggest you to handle CSS for a single portlet in liferay custom theme and add the below code in your custom theme.

Code 1: The below code results you change in color of portlet content body. From the attached screen shots image p2 will help you identify.

#portlet_testing_WAR_Testingportlet .portlet-content
{
background: #FF0000;
}

Code 2: The below code results you change in color of whole portlet.. From the attached screen shots image p3 will help you identify.

#portlet_testing_WAR_Testingportlet
{
background: #FF0000;
}

Please find the screen shots which are attached.

I hope this will help you out and if it has worked out please let me know.

Thanks
Sharad Sinha

[Timothy Esposito, geändert vor 9 Jahren.]

This was very useful. Another way to do it with JavaScript and jQuery is below. This is how I had an individual instancable portlet have it's unique background.

$('.data-driven-display-#{displayViewerBean.portletID}').parentsUntil( $('div.portlet-content') ).last().parent().css('background-color', bg);

To have all portlets change background color, this did the trick.

$('.portlet-content').css({'background-color':bg});

And if you want the entire portlet background color to change, this would do the trick.

$('.portlet').css({'background-color':bg});

[David H Nebinger, geändert vor 9 Jahren.]

Thanks, Tim, but since 6.0 uses AUI not everyone still includes jQuery in their themes (I do, but not everyone does).

When we do include jQuery, it is still best to avoid the use of the $ syntax as there can still be a risk of invoking something other than jQuery. Always better to use the jQuery() syntax instead of $ to ensure there's no chance of getting bit by a collision.

It may be worthwhile to show how to do the same thing using AUI, unfortunately (AFAIK) some of the syntax doesn't translate (i.e. the parentsUntil() method, ...).

#2 and #3 are easy enough, A.all('.portlet-content').setStyle('background-color',bg); , just replace the portlet-content with portlet for #3.