以文本方式查看主题 - 康柏仕电脑学院 (http://combss.com/bbs/index.asp) -- 精品软件下载区 (http://combss.com/bbs/list.asp?boardid=22) ---- LBS Skin-Blue sky 个人升级指南 (http://combss.com/bbs/dispbbs.asp?boardid=22&id=1850) |
-- 作者:轻轻风聆 -- 发布时间:2008/5/18 10:56:46 -- LBS Skin-Blue sky 个人升级指南 前言: 今年开年以来,我似乎对换风格皮肤特别的着迷,在今年1月份到4月份里,每月1日准时换上新皮肤,到了5月份,我终于放慢了脚步,那个由Lynn为我量身定做的皮肤我好不容易用上了2个月之久,算是在今年创造了一个奇迹。随着暑期改版计划的展开,我不得不吧Lynn为我做的皮肤暂时放弃,千条万选,终于看中了5Key最新发布的这款 LBS Skin-Blue sky ,然而这个风格内部涉及到了对global.asp、default.asp以及functions.asp这三个文件的修改,我无法选择覆盖,只好选择自行参照修改,今天把修改过程公布于此,方便以后升级! 皮肤本地化过程: 一、global.asp主要涉及到blogLogo、blog-header、blog-title、blog-desc、menu这几个部位的调整,所以找到该部位代码,我的原始代码为: <div id="blogLogo"><img src="<%=theCache.settings["logoImage"]%>" id="logo" alt="Logo" /></div> 按照皮肤结构的先后顺序menu、blog-header、blog-header、blog-desc、blogLogo,进行代码调整:
<div class="blog-header"> <h1 class="blog-title"><a href="<%=theCache.settings["baseURL"]%>"><%=func.HTMLEncode(theCache.settings["blogTitle"])%></a></h1> <div class="blog-desc"><%=func.HTMLEncode(theCache.settings["blogDescription"])%></div> </div> <div id="menu"> <ul> <li><a href="/blog/">生活博客</a></li> <li><a target="_blank" href="http://love.lifeboke.cn/">心情贴吧</a></li> <li><a target="_blank" href="http://www.life-live.cn">音乐公园</a></li> <li><a target="_blank" href="http://bt.lifeboke.cn/">影视下载</a></li> <li><a target="_blank" href="/tools/">实用查询</a></li> <li><a target="_blank" href="/tools/zgjm/">周公解梦</a></li> <li><a target="_blank" href="http://love.lifeboke.cn/rss/">资源聚合</a></li> <li><a target="_blank" href="/net.asp">生活导航</a></li> <li><a href="/blog/links.asp"><%=lang["links"]%></a></li> <li><a href="/blog/gbook.asp"><%=lang["guestbook"]%></a></li> <%if(!theUser.loggedIn){%><li><a href="javascript:showLogin()"><%=lang["login"]%></a></li><%}%> </ul> </div> <div id="menu"> <ul> <%if(!theUser.loggedIn){%><li><a href="javascript:showLogin()"><%=lang["login"]%></a></li><%}%> <li><a href="/blog/gbook.asp"><%=lang["guestbook"]%></a></li> <li><a href="/blog/links.asp"><%=lang["links"]%></a></li> <li><a target="_blank" href="/net.asp">生活导航</a></li> <li><a target="_blank" href="http://love.lifeboke.cn/rss/">资源聚合</a></li> <li><a target="_blank" href="/tools/zgjm/">周公解梦</a></li> <li><a target="_blank" href="/tools/">实用查询</a></li> <li><a target="_blank" href="http://bt.lifeboke.cn/">影视下载</a></li> <li><a target="_blank" href="http://www.life-live.cn">音乐公园</a></li> <li><a target="_blank" href="http://love.lifeboke.cn/">心情贴吧</a></li> <li><a href="/blog/">生活博客</a></li> </ul> </div> <div class="blog-header"> <h1 class="blog-title"><a href="<%=theCache.settings["baseURL"]%>"><%=func.HTMLEncode(theCache.settings["blogTitle"])%></a></h1> <div class="blog-desc"><%=func.HTMLEncode(theCache.settings["blogDescription"])%></div> </div> <div id="blogLogo"><img src="<%=theCache.settings["logoImage"]%>" id="logo" alt="Logo" /></div> 二、default.asp主要修改分页数,要将默认的15分页修改成10个分页,那么就找到以下代码中的“15”修改成“10”即可! // Output Master Page Layout function outputMaster(viewMode, arrArticle, intEntryCount, intEntryPerPage, intCurrentPage, intCategory, strURLPrefix, arrKeywords){ var strPageLinks = func.generatePageLinks(intEntryCount, intEntryPerPage, intCurrentPage, 15, strURLPrefix); %> 三、class/functions.asp主要修改的是去除分页栏中各个分页数字中间的那一竖,找到以下代码,去除代码中所有的“”就OK! // First Page Link if(prevBound>1) output+="<a href=\\"" + urlPrefix + "page=1" + urlSuffix + "\\"> << </a> | \\n"; // Previous Page Link if(intCurrentPage>1) output+="<a href=\\"" + urlPrefix + "page=" + (intCurrentPage-1) + urlSuffix + "\\"> < </a> | \\n"; // Process Main Portion for(var i=prevBound;i<=nextBound;i++){ if(intCurrentPage==i){ output+="<span class=\\"pagelink-current\\">" + i + "</span> | \\n"; }else if(i<=maxPage){ output+="<a href=\\"" + urlPrefix + "page=" + i + urlSuffix + "\\"> " + i + " </a> | \\n"; } } // Next Page Link if(intCurrentPage<maxPage) output+="<a href=\\"" + urlPrefix + "page=" + (intCurrentPage+1) + urlSuffix + "\\"> > </a>\\n"; // Last Page Link if(nextBound<maxPage) output+=" | <a href=\\"" + urlPrefix + "page=" + maxPage + urlSuffix + "\\"> >> </a>\\n"; } return output; } } </script> 四、CSS的修改 01.调整“日志标题时间日历”代码,删除原先的 .year{border:1px solid #1B232D; width:60px; height:55px; font-size:10px; text-align:center; color:#FFF; float:left; margin:0 5px 0 0;} 在样式images下添加title_icon.gif之后,将以上代码替换为:
.inneryear{padding:8px 2px 0px 2px; background:#4F8C97; height:18px;} .day{font-size:22px; font-weight:bold; color:#1B232D; text-align:center; padding:2px 0 0 0; background:#FCFEFE; height:27px; } /* 日志标题时间日历 */ .year{ background:url(\'images/title_icon.gif\') no-repeat; color:#fff; float:left;} .inneryear{padding:5px 2px;font-size:11px; margin:-2px 2px;} .day{font-size:18px; color:#46A6BF; margin-left:14px; margin-top:4px; font-weight:bold;} 02.添加“友情链接”、“相关文章”、“Tags”、“Tags标签、SetTop置顶、Html编辑器”的CSS代码设定 /* 友情链接 */ 友情链接中的代码调整参考Alonefly修改版内友情链接系统样式修改指南#imglink-panel-content { width:100%; } #imglink-panel-content li{ width: 90px; /*单个链接宽度*/ margin-left:20px; margin-bottom:6px; float:left; height:31px; } #textlink-panel-content { width:100%; } #textlink-panel-content li{ width: 90px; margin-left:20px; margin-bottom:8px; line-height: 15px; float:left; height:12px; border:3px font-size:11px; text-align:left; } /****** 相关文章******/ .textbox-relate{ margin: 0px; margin-top: 10px; padding: 4px; } .textbox-relate ul{ margin: 5px; margin-left: 30px; padding: 0px 0px 0px opx; border-right:#CCCCCC dashed 1px; word-break:break-all; } .textbox-relate li { color:#666CAC; padding-bottom:5px; padding-left:5px; } /* Tags */ .textbox-tag{padding: 10px 0px 10px 0px;margin-bottom: 0px;} .textbox-tag a{width: 100px;display:block;float:left;line-height:100%;} .textbox-tag a:hover{background: #f2f2f2;text-decoration: none;color: #9c2;border: 0px;} .tagHot1{font-size: 12px;} .tagHot2{font-size: 12px;} .tagHot3{font-size: 12px;} .tagHot4{font-size: 12px;} .tagHot5{font-size: 12px;} /******Tags标签、SetTop置顶、Html编辑器******/ .rteImage { border: 1px solid #fff; cursor: pointer; cursor: hand; width: 25px; height: 24px; } .rteImageRaised, .rteImage:hover { background: #CFE1FF; border: 1px solid #3169C6; cursor: pointer; cursor: hand; } .rteImageLowered, .rteImage:active { background: #ABC6F2; border: 1px solid #3169C6; cursor: pointer; cursor: hand; } .rteVertSep { margin: 0 4px 0 4px; } .rteBack { background: #fff; border-top: 1px solid #eee; letter-spacing: 0; padding: 2px; } .rteDiv { display: block; position: relative; } .controlBar{ margin-top: 4px; } .controlBar div{ float: left; width: 70px; margin-left: 10px; cursor: pointer; text-align: center; padding: 3px;} 03.修改comments top box(日志内页评论统计处)文字为居中模式,找到以下代码修改 /* comments top box */ .comment-top{ padding: 5px; margin: 5px; color: #666666; background: #F6F6F6; text-align: right; /* 将right修改为center */ 04.修改留言回复区域css代码 /* guestbook entry box */
.gbbox{ margin-bottom: 15px; border-top: 1px dashed #C0C0C0; border-bottom: 1px dashed #C0C0C0; } .gbbox-title{ margin-bottom: 10px; font-weight: bold; } .gbbox-label{ display: inline; color: #999999; font-size: 11px; font-weight: normal; } .gbbox-content{ word-wrap: break-word; padding: 10px; background-color: #FBFBF8; (将背景色替换为:#FCFCFC;) } .gbbox-reply { padding: 10px; color: #333333; background-color: #F8F8F6; border-top: 1px dashed #E0E0E0; (整行替换为:border-left: 3px solid #6d990f;其中3px控制着回复时最左边的那条绿色的宽度;另外,在此处加上margin-left: 40px;将使得回复区域向右缩进40像素) } .gbbox-reply-title{ font-weight: bold; margin-bottom: 5px; } .gbbox-reply-label{ color: #999999; font-size: 11px; font-weight: normal; display: inline; } |