改portlet按钮style -- hover button

 

修改前：

 

修改后	修改后+hover

 

===========前提：

你的页面有一个支持print的portlet。

可以用Liferay的Eclipse插件，建一个简单的portlet，勾上print选项。

 

===========建theme：

cd 你的绝对路径/sdk/themes;./create.sh t1 "t1 hover icons"

mkdir -p t1-theme/docroot/_diffs/css

mkdir -p t1-theme/docroot/_diffs/js

mkdir -p t1-theme/docroot/_diffs/templates

 

cp 你的绝对路径/app/tomcat-7.0.23/webapps/ROOT/html/themes/classic/css/custom.css t1-theme/docroot/_diffs/css

cp 你的绝对路径/app/tomcat-7.0.23/webapps/ROOT/html/themes/classic/js/main.js t1-theme/docroot/_diffs/js/main.js

cp 你的绝对路径/app/tomcat-7.0.23/webapps/ROOT/html/themes/_unstyled/templates/portlet.vm t1-theme/docroot/_diffs/templates/portlet.vm

 

===========装theme：

cd t1-theme;ant deploy

 

等tomcat说：1 theme for t1-theme is available for use，

你就可以刷新页面，看效果。

 

===========确认theme已安装：

Go to/Control Panel/Portal/Plugins Configuration

Theme Plugins

[t1 hover icons]应该在列。

 

===========用theme：

Manage/Page/Look and Feel

选择Define a specific look and feel for this page.

从Available Themes中，选择[t1 hover icons]

Save，关闭Manage窗口

刷新页面

 

===========修改theme：

在custom.css文件头删除：

@import "compass";

@import url(custom_common.css);

@import url(color_schemes/green.css);

@import url(color_schemes/orange.css);

 

在custom.css文件尾加入：

.portlet-topper-toolbar{ opacity: 0;}.portlet-topper-toolbar:hover{opacity: 1;}

.portlet-maximize-icon{ opacity: 0.3; }.portlet-maximize-icon:hover{ opacity: 1; }

.portlet-minimize-icon{ opacity: 0.3; }.portlet-minimize-icon:hover{ opacity: 1; }

.portlet-print-icon{ opacity: 0.3; }.portlet-print-icon:hover{ opacity: 1; }

.portlet-options{ opacity: 0.3; }.portlet-options:hover{ opacity: 1; }

.portlet-close-icon{ opacity: 0.3; }.portlet-close-icon:hover{ opacity: 1; }

.lfr-menu-list-overflow .portlet-print-icon{display:none;}

.portlet-print-icon .opens-new-window-accessible{display:none;}

 

对portlet.vm文件，替换：

-----------------旧代码

$theme.iconOptions()

$theme.iconMinimize()

$theme.iconMaximize()

$theme.iconClose()

-----------------新代码

<table><tr>

<td>$theme.iconMaximize()</td>

<td>$theme.iconMinimize()</td>

<td>$theme.iconPrint()</td>

<td>$theme.iconOptions()</td>

<td>$theme.iconClose()</td>

</tr></table>

-----------------

使用table是为了调整icon的位置。

加$theme.iconPrint()是为了在options外面显示print按钮，同时还要用css把options里面的print抹掉。

 

===========装theme：

cd t1-theme;ant deploy

 

等tomcat说：1 theme for t1-theme is available for use，

你就可以刷新页面，看效果。

 

流水