Liferay Symposium 2015 | Reserve your seat today.

« Back to Themes

Row Coloring

Table of Contents [-]

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-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.

0 Attachments
Average (0 Votes)
The average rating is 0.0 stars out of 5.