Problem #

Where and how do we change the colours for the backgrounds when hovered over with mouse within 'themes'? Currently when I hover over a category wihin the message portlet the background colour and text colour changes which is great, but the problem is that the background colour changes to 'yellow' for white backgrounds, and 'black' for green backgrounds.

Solution #

The default CSS/Jsp for the Brochure template looks like this for these classes (css_cached.jsp):

.portlet-section-body {

color: <%= colorScheme.getPortletSectionBody() %>; background: <%= colorScheme.getPortletSectionBodyBg() %>; } .portlet-section-body-hover, TR.portlet-section-body:hover { color: <%= colorScheme.getPortletSectionBodyHover() %>; background: <%= colorScheme.getPortletSectionBodyHoverBg() %>; }

.portlet-section-body A { color: <%= colorScheme.getPortletSectionBody() %>; }

.portlet-section-body-hover A, TR.portlet-section-body:hover A { color: <%= colorScheme.getPortletSectionBodyHover() %>; }

.portlet-section-alternate { color: <%= colorScheme.getPortletSectionAlternate() %>; background: <%= colorScheme.getPortletSectionAlternateBg() %>; }

.portlet-section-alternate-hover, TR.portlet-section-alternate:hover { color: <%= colorScheme.getPortletSectionAlternateHover() %>; background: <%= colorScheme.getPortletSectionAlternateHoverBg() %>; }

.portlet-section-alternate A { color: <%= colorScheme.getPortletSectionAlternate() %>; }

.portlet-section-alternate-hover A, TR.portlet-section-alternate:hover A { color: <%= colorScheme.getPortletSectionAlternateHover() %>; }}} Which means if your CSS looks like this, then you need to change the values in liferay-look-and-feel.xml from your theme. There are two things that you can do, really:

1. Edit the CSS/Jsp to hard code your desired values. e.g.

.portlet-section-alternate-hover A, TR.portlet-section-alternate:hover A {

color: #SOMECOLOR; } }}} 2. Edit the liferay-look-and-feel.xml file for the theme you are editing (recommended).

The Liferay look and feel file will have the following key-value pair references:

portlet-section-body=#3F3F3F

portlet-section-body-bg=#EAF2FF

portlet-section-body-hover=#FFFFFF portlet-section-body-hover-bg=#5274AE

portlet-section-alternate=#3F3F3F portlet-section-alternate-bg=#DBE1ED

portlet-section-alternate-hover=#FFFFFF portlet-section-alternate-hover-bg=#5274AE}}}

which affect the CSS classes you want. Notice how the names are reflected by the methods of the colorScheme object:

getPortletSectionAlternateHover() = portlet-section-alternate-hover = #FFFFFF

Edit those, redeploy the theme, or restart the server, and you should be ok.