Liferay研究之十：定制Portlet风格

lyn1984

Liferay通过Theme实现界面换肤的功能，但对于某个Portlet,我们在实际项目中可能还是想做一些适当的调整，以实现特殊的效果。

这里主要是需要熟悉CSS样式表相关知识，比如我在界面上做了一个滚动条，想把这个滚动条放到“菜单条”右侧空白区域。

对于滚动条，肯定是可以通过添加一个文章来实现的，但是如何将内容添加到合适的位置呢？

可以通过自定义Portlet的CSS来实现，比如：

#p_p_id_56_INSTANCE_W43d_ {

Z-INDEX: 100;

POSITION: absolute;

left: expression(document.getElementById("banner").offsetWidth+ document.getElementById("banner").offsetLeft - document.getElementById("p_p_id_56_INSTANCE_W43d_").offsetWidth + "px");

TOP:expression(document.getElementById("navigation").offsetTop+ "px");

height:expression(document.getElementById("navigation").offsetHeight+ "px");

} smilingleo原创

上述代码中在CSS中应用了表达式，可以通过表达式调用javascript，从而实现获取界面上其他元素的精确位置。

利用这种思路，你可以扩展每个Portlet的样式，比如，把“搜索”挪到页面顶端。

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/smilingleo/archive/2007/12/05/1918485.aspx