Liferay研究之十：定制Portlet风格

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的样式，比如，把“搜索”挪到页面顶端。