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

最新推荐文章于 2025-04-13 18:45:43 发布

jxlmz

最新推荐文章于 2025-04-13 18:45:43 发布

阅读量464

点赞数

文章标签： scroll url portlet menu border css

本文链接：https://blog.youkuaiyun.com/jxlmz/article/details/3634512

版权

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

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

我们以themes/brochure模版为例

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

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

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

全部文件下载地址:

http://download.youkuaiyun.com/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;
}