DISCOVER Build your web site, collaborate with your colleagues, manage your content, and more. DEVELOP Build applications that run inside Liferay, extend the features provided out of the box with Liferay's APIs. DISTRIBUTE Let the world know about your app by publishing it in Liferay's marketplace. PARTICIPATE Become a part of Liferay's community, meet other Liferay users, and get involved in the open source project.

Wiki

« 返回到 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=#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.

0 附件

31764 查看

平均 (0 票)