模板定制,开发一个新式(2)

上回我们就是简单的介绍了一下,网上这方面的资料很少,介绍的也都跟上面的一样.

下面把我实践中得出的经验分享给大家:

我们以themes/brochure模版为例

portal_normal.jsp这个文件是主页面,首先要把这里弄明白,哪是头,中间及底部.这个很简单就不说明了.

 

css_cached.jsp 这个文件是控制样式的,所有的css都在这里面

我把CSS传上来,里面有我做的注释.希望能帮助大家!

全部文件下载地址:

http://download.csdn.net/source/920292

/******************************************************************************/
/* Liferay Layout CSS                                                         */
/******************************************************************************/

#layout-outer-side-decoration {
 margin: 0 auto 0 auto;
}

#layout-inner-side-decoration {
}

#layout-box {
 text-align: center;
 width: 100%;
}

#layout-top-banner {
 background: url(<%= themeDisplay.getPathThemeImage() %>/custom/banner-middle.png) scroll repeat-x;
 position: relative;
 text-align: left;
 z-index: 3;
}
#layout-top-banner-left {
 background: url(<%= themeDisplay.getPathThemeImage() %>/custom/banner-left.png) scroll no-repeat top left;
}
#layout-top-banner-right {
 background: url(<%= themeDisplay.getPathThemeImage() %>/custom/banner-right.png) scroll no-repeat top right;
 height: 100px;
}

#layout-company-logo {
 position: absolute;
 top: 10px;
 left: 10px;
}

#layout-user-menu {
 text-align: left;
 padding-left: 10px;
 position: absolute;
 top: 10px;
 left: 220px;
}
/* 设置查询的位置 */
#layout-global-search {
 position: absolute;
 right: 20px;
 top: 20px;
}

#layout-my-places {
 position: absolute;
 right: 20px;
 top: 45px;
 z-index: 3;
 width: 50%;
}

#layout-my-places form { text-align: right; }

#layout-my-places ul {
 background-color: <%= colorScheme.getLayoutBg() %>;
 border: 1px solid <%= colorScheme.getPortletTitleBg() %>;
 list-style-image: none;
 position: absolute;
 top:20px;
 text-align: left;
 right: 0;
 margin: 0;
}

#layout-my-places ul li {
 padding: 2px;
}
/* 设置MENU相对于顶部的距离 */
#layout-nav-container {
 padding: 0px 8px 0 8px;
 position: relative;
 top: 68px;
 z-index: 2;
}
/* 设置MENU字体颜色 */
#layout-nav-container a { color: #FFFFFF; }
/* 设置MENU的一个button的样式共三个图片，下面三个 */
.layout-nav-tabs-box {
 background: url(<%= themeDisplay.getPathThemeImage() %>/custom/nav-bg.png) scroll repeat-x;
 position: relative;
 width: 100%;
}

.layout-nav-tabs-left {
 background: url(<%= themeDisplay.getPathThemeImage() %>/custom/nav-left.png) scroll no-repeat top left;
 position: relative;
}

.layout-nav-tabs-right {
 background: url(<%= themeDisplay.getPathThemeImage() %>/custom/nav-right.png) scroll no-repeat top right;
 padding: 0 2px 0 2px;
 position: relative;
}
/* MENU 大小，高度 */
.layout-nav-tabs-box table { height: 25px; }

.layout-tab, .layout-tab-selected {
 color: <%= colorScheme.getLayoutTabText() %>;
}
/* 所在MENU */
.layout-tab-selected {
 background: url(<%= themeDisplay.getPathThemeImage() %>/custom/nav-selected.png) scroll repeat-x;
 color: <%= colorScheme.getLayoutTabSelectedText() %>;
}

.layout-tab-hover {
 background: url(<%= themeDisplay.getPathThemeImage() %>/custom/nav-hover.png) scroll repeat-x;
}
/*下面两个设置是列的中间线,第一个是图片，第二个是宽度*/

.layout-column-spacer {
 background: url(<%= themeDisplay.getPathThemeImage() %>/custom/column-bevel.png) scroll repeat-y center;
}

.layout-column-spacer div {
 width: 12px;
}
/* 中间部分，最外层边框*/
#layout-content {
 margin: 0 3px 0 3px;
 border-left: 8px solid #d7d7d7;
 border-right: 8px solid #d7d7d7;
}
/* 设置TOP下面整个布局的颜色 */
/* 前两个设置左右边框,第三个设置颜色 */
/* 最后一个是设置中间部分与头的之间的距离 padding 上　右　下　左*/
#layout-content-box {
 border-left: 1px solid #FFFFFF;
 border-right: 1px solid #FFFFFF;
 background-color: #f2f2f2;
 padding: 0 0 5px 0;
}
/* 设置中间部分 左　右　的边距 */
#layout-content-inner-decoration { padding: 0 5px 0 5px; }
#layout-content-container { width: 100%; }

/* Column Layout */

.layout-blank-portlet {
  /*  clear: both;*/
 
 font-size: 0px;
}

#layout-bottom-container {
 background: url(<%= themeDisplay.getPathThemeImage() %>/custom/bottom-middle.png) scroll repeat-x;
 color: #858585;
 position: relative;
 text-align: left;
 width: 100%;
}

#layout-bottom-container a { color: #858585; }
#layout-bottom-container span { position: relative; top: 6px; left: 10px; }

#layout-bottom-left {
 background: url(<%= themeDisplay.getPathThemeImage() %>/custom/bottom-left.png) scroll no-repeat top left;
}

#layout-bottom-right {
 background: url(<%= themeDisplay.getPathThemeImage() %>/custom/bottom-right.png) scroll no-repeat top right;
 height: 26px;
}

#layout-bottom-container span {
 margin-left: 3px;
}

#layout-language-select {
 position: absolute;
 right: 15px;
 top: 7px;
}

.portal-add-content {
 background-color: <%= colorScheme.getLayoutBg() %>;
 border: 3px solid <%= colorScheme.getPortletTitleBg() %>;
 padding: 8px;
}

#layout-column_column-1,
#layout-column_column-2,
#layout-column_column-3,
#layout-column_column-4,
#layout-column_column-5,
#layout-column_column-6,
#layout-column_column-7,
#layout-column_column-8,
#layout-column_column-9
{
 <c:choose>
  <c:when test="<%= BrowserSniffer.is_ie(request) %>">
   height: 75px;
  </c:when>
  <c:otherwise>
   min-height: 75px;
  </c:otherwise>
 </c:choose>
}

.layout-column-highlight {
 background: url(<%= themeDisplay.getPathThemeImage() %>/common/diagonal-lines.gif) scroll repeat;
}

/******************************************************************************/
/* Portlet CSS                                                                */
/******************************************************************************/

/* Liferay Portlet */

<%--
<c:choose>
 <c:when test="<%= BrowserSniffer.is_ie(request) %>">
 #portlet-dragging * {
  filter: alpha(opacity=75);
 }
 </c:when>
 <c:otherwise>
 #portlet-dragging {
  opacity: 0.75;
 }
 </c:otherwise>
</c:choose>
--%>

.portlet-dragging-placeholder {
 background-color: <%= colorScheme.getPortletSectionBodyBg() %>;
}

.portlet-loading {
 background: url(<%= themeDisplay.getPathThemeImage() %>/progress_bar/loading_animation.gif) no-repeat top center;
 margin-top: 10px;
 padding-top: 40px;
 text-align: center;
}
/* portlet全部边框 */
.portlet-container {
 
 position: relative;
 border: 1px  solid <%= colorScheme.getPortletTitleBg() %>  ;
 margin-top: 4px;
}
/* portlet内容边框 */
.portlet-box { }

.portlet-minimum-height {
 <c:if test="<%= BrowserSniffer.is_ie(request) %>">
  height: 1px;
 </c:if>
}
/* 下面三个设置的是标题的样式 */
.portlet-header-bar {
 background: url(<%= themeDisplay.getPathThemeImage() %>/custom/top_center.gif) scroll repeat-x;
}
.portlet-header-left {
 background: url(<%= themeDisplay.getPathThemeImage() %>/custom/top_left.gif) scroll no-repeat top left;
}
.portlet-header-right {
 background: url(<%= themeDisplay.getPathThemeImage() %>/custom/top_right.gif) scroll no-repeat top right;
 height: 21px;
 position: relative;
}

 

 

在还有一个文件很重要,就是liferay-look-and-feel.xml  如果要显示就必须在这里配置