‹‹ 上一主题 | 下一主题 ››
发新话题
打印

[分享] tugor主题（桔子主题）修改心得之导航栏

aprileee

新手上路

Rank: 1

金钱
177 ZB 
1# 大 中 小 发表于 2008-4-1 04:31 只看该作者

tugor主题（桔子主题）修改心得之导航栏

用了几天Z-blog了，因为喜欢那个桔子主题，也就是在线安装的tugor主题，所以也就对这个主题作了很多的修改。发觉越改越有意思了，就当打发时间哩。不过有很多朋友还是会问怎么修改，所以漠然就在这里跟大家说一下对桔子主题作的一些修改。
   先跟大家说一下如何修改导航栏。因为漠然作的修改比较大，可能在说的时候会有遗漏，请大家做好备份再跟漠然说的作修改。
  很多人不知道桔子主题该在哪里修改，其实你在后台是可以修改的，就是在文件管理里面。进入THEMES\TUGOR这就是桔子主题的目录了，而桔子主题的导航是在INCLUDE里面的top.asp，而不是像其他主题那样调用的<#CACHE_INCLUDE_NAVBAR#>导航栏，漠然第一时间就把TOP里的东西清空，里面就放这一句：<#CACHE_INCLUDE_NAVBAR#>，这样就调用了导航栏了，因为原来的主题是用表格做的，漠然顺便把它们全改成了CSS+DIV，所在作的修改会比较大。还是按步骤跟大家说怎么改吧。
    一、进入THEMES\TUGOR\INCLUDE，编辑：top.asp。把里面的东西全删了，然后复制<#CACHE_INCLUDE_NAVBAR#>进去。保存。
    二、进入THEMES\TUGOR\SCRIPT，编辑里的navbar.js。全删了，复制下面的代码进去。
复制内容到剪贴板
代码:
<!--
function scrollDoor(){
}
scrollDoor.prototype = {
sd : function(menus,divs,openClass,closeClass){
var _this = this;
if(menus.length != divs.length)
{
alert("菜单层数量和内容层数量不一样!");
return false;
}
for(var i = 0 ; i < menus.length ; i++)
{
_this.$(menus[i]).value = i;
_this.$(menus[i]).onmouseover = function(){
for(var j = 0 ; j < menus.length ; j++)
{
_this.$(menus[j]).className = closeClass;
_this.$(divs[j]).style.display = "none";
}
//-->
_this.$(menus[this.value]).className = openClass;
_this.$(divs[this.value]).style.display = "block";
}
}
},
$ : function(oid){
if(typeof(oid) == "string")
return document.getElementById(oid);
return oid;
}
}
window.onload = function(){
var SDmodel = new scrollDoor();
SDmodel.sd(["m01","m02","m03","m04","m05","m06","m07","m08","m09","m10","m11","m12"],["c01","c02","c03","c04","c05","c06","c07","c08","c09","c10","c11","c12"],"sd01","sd02");
}
上面的m01跟c01一直排下去，你要做几个栏目导航就写几个上去，像漠然是12个，就写了12个。
三、进入THEMES\TUGOR\STYLE，编辑tugor.css，一直拉下去，找到导航，把导航下面一直到中间专题区之间的CSS删了，换成下面的：
复制内容到剪贴板
代码:
#divTop{width:962px; margin:0 auto; padding:10px 0 0 0; text-align:left;}
#divTop a{margin:0; padding:0 0 0 0; color:#333; text-decoration: none; font-family: Verdana, sans-serif; font-size:10px; font-weight:bold;}
#divTop a:link {color:#6B695A; text-decoration: none;}
#divTop a:visited {color:#6B695A; text-decoration: none;}
#divTop a:hover {color:#FF6400; text-decoration: underline;}
.divtopleft{float:left;font-size:14px; width:362px;text-align:left;line-height:200%; }
.divtopright{float:left; width:600px;text-align:right;}
#divNavBar{width:100%; margin:0 auto; padding:0; float:left; text-align:left;color: #98C456; font-size:14px; font-weight:bold;}
#divNavBar .Menu{width:962px; margin:0 auto; padding:5px 0 0 0; height:20px; background:#D6CFB5; text-align:left; font-size:12px; color:#6B695A;}
#divNavBar a{font-size:14px; font-weight:bold; text-decoration: none;}
#divNavBar a:link {color: #FFFFFF;}
#divNavBar a:visited {color: #FFFFFF;}
#divNavBar a:hover {color: #98C456;}

.cont{width:962px;text-align:left; font-size:12px; font-weight:bold;}
.hidden{display:none;}
.scrolldoorFrame{width:100%;margin:0;overflow:hidden;background:#6B695A;text-align: center;}
.scrollUl{width:962px;margin:0 auto; overflow:hidden;height:35px;text-align:center;}
.scrollUl li{float:left;border:0px solid #CCC;}
.bor03{border:1px solid #ccc;border-top-width:0px;background:#D6CFB5;}
.sd01{cursor:pointer;border:0px solid #CCC;margin:0 0 0 0;padding:10px;font-weight:bold;}
.sd02{cursor:pointer;border:0px solid #CCC;margin:0 0 0 0;padding:10px;}
四、好了，再回到后台，点链接管理，选导航栏，把里面的全删了，然后把下面的代码复制进去：
复制内容到剪贴板
代码:
<div id="divTop">
<div class="divtopleft">
<a href="<#ZC_BLOG_HOST#>"><img src="<#ZC_BLOG_HOST#>
themes/<#ZC_BLOG_THEME#>/STYLE/IMAGE/logo-tugor.gif" alt="<#ZC_BLOG_NAME#>" border="0" /></a>
<p /><b id="BlogSubTitle"><#ZC_BLOG_SUB_NAME#></b></div>
<div class="divtopright">
<a href="<%=ZC_BLOG_HOST%>blog/4.html" class="topnav">About Us</a> |
<a href="<%=ZC_BLOG_HOST%>guestbook.asp" class="topnav">Contact Us</a> |
<a href="<%=ZC_BLOG_HOST%>guestbook.asp" class="topnav">GuestBook</a> |
<a href="<%=ZC_BLOG_HOST%>Search.asp" class="topnav">Search</a> | <a href="<%=ZC_BLOG_HOST%>tags.asp">Tags</a> | <a href="<%=ZC_BLOG_HOST%>rss.xml">Rss</a>

<form method="post" action="<#ZC_BLOG_HOST#>cmd.asp?act=Search">
<div id="divSearchPanel" style="font-family: Verdana, sans-serif;font-size: 10px;font-weight:bold;"><#ZC_MSG085#>
            <input name="edtSearch" type="text" id="edtSearch" size="30" maxlength="128" /><input type="submit" value="<#ZC_MSG085#>" name="btnPost" id="btnPost" /></div></form></div></div>
<script language="JavaScript" type="text/javascript" src="<#ZC_BLOG_HOST#>themes/
<#ZC_BLOG_THEME#>/SCRIPT/navbar.js">
</script>
<div id="divNavBar">
<div class="scrolldoorFrame">
<div class="scrollUl"><ul>
<li class="sd01" id="m01"><a href="<%=ZC_BLOG_HOST%>">首页</a></li>
<li class="sd02" id="m02"><a href="<%=ZC_BLOG_HOST%>catalog.asp?cate=1">生活记事</a></li>
<li class="sd02" id="m03"><a href="<%=ZC_BLOG_HOST%>catalog.asp?cate=2">吃喝玩乐</a></li>
<li class="sd02" id="m04"><a href="<%=ZC_BLOG_HOST%>catalog.asp?cate=3">相册掠影</a></li>
<li class="sd02" id="m05"><a href="<%=ZC_BLOG_HOST%>catalog.asp?cate=4">影音天地</a></li>
<li class="sd02" id="m06"><a href="<%=ZC_BLOG_HOST%>catalog.asp?cate=7">长篇连载</a></li>
<li class="sd02" id="m07"><a href="<%=ZC_BLOG_HOST%>catalog.asp?cate=8">他山之石</a></li>
<li class="sd02" id="m08"><a href="<%=ZC_BLOG_HOST%>catalog.asp?cate=10">分享书房</a></li>
<li class="sd02" id="m09"><a href="<%=ZC_BLOG_HOST%>catalog.asp?cate=11">法言法语</a></li>
<li class="sd02" id="m10"><a href="<%=ZC_BLOG_HOST%>catalog.asp?cate=9">电脑网络</a></li>
<li class="sd02" id="m11"><a href="<%=ZC_BLOG_HOST%>catalog.asp?cate=5">搜索引擎</a></li>
<li class="sd02" id="m12"><a href="<%=ZC_BLOG_HOST%>catalog.asp?cate=6">网站作坊</a></li>
</ul>
</div>
<div class="bor03">
<div class="cont Menu">
<div id="c01">
非礼勿视
</div>
<div id="c02" class="hidden">
漠然的执着照视黑夜，格瓦拉西的灵魂如此奔放……
</div>
<div id="c03" class="hidden">
巧克力的麻烦是：你把它吃了,它就没了。
</div>
<div id="c04" class="hidden">
相册，那一刹那的风情。
</div>
<div id="c05" class="hidden">
影音</div>
<div id="c06" class="hidden">
长篇
</div>
<div id="c07" class="hidden">
他山之石，可以攻玉。
</div>
<div id="c08" class="hidden">
读书
</div>
<div id="c09" class="hidden">
法律，司法在线，司法考试。</div>
<div id="c10" class="hidden">
电脑网络
</div>
<div id="c11" class="hidden">
SEO，搜索引擎优化。
</div>
<div id="c12" class="hidden">
网站制作。
</div>
</div>
</div>
</div>
</div>
里面的中文自己对应自己的网站修改。中文前面的cate=1中的1就是栏目的ID，这里的M01 C01跟上面的JS的对应，下面用几个，上面就写几个。自己对应修改。改的时候有问题可以到我的BLOG提问。

本文来源:非礼勿视 http://www.falii.com/ , URL：http://www.falii.com/blog/31.html

[ 本帖最后由 aprileee 于 2008-4-1 04:42 编辑 ]
非礼勿视:http://www.falii.com/

TOP

aprileee

新手上路

Rank: 1

金钱
177 ZB 
2# 大 中 小 发表于 2008-4-1 14:18 只看该作者
navbar.js就是原来的导航的JS，可以修改。如果你只是想试试桔子主题的话，可以不把导航条的原来的删掉，而是直接把上面的第三步的代码加的top.asp里面，这样以后如果换主题的话，有主题调用到导航条的话就不会乱。
非礼勿视:http://www.falii.com/

TOP

游魂

DBS用户

Rank: 6Rank: 6

金钱
2360 ZB 
3# 大 中 小 发表于 2008-4-1 20:39 只看该作者
我顶
大脑抽风的时候,思维禁不住乱跑,偶尔随手划划

Z-DBS演示站点：  游魂的部落格
还算有用的东西：火星文在线翻译

TOP

故事

新手上路

Rank: 1

金钱
103 ZB 
4# 大 中 小 发表于 2008-4-1 21:52 只看该作者
看起来不错

TOP

51kkkk

新手上路

Rank: 1

金钱
98 ZB 
5# 大 中 小 发表于 2008-4-1 23:50 只看该作者
谢谢!已经修改!还没完善!
小站:南柯遗梦
欢迎连接!

[ 本帖最后由 51kkkk 于 2008-4-4 01:59 编辑 ]

TOP

green

DBS用户

Rank: 6Rank: 6

金钱
404 ZB 
6# 大 中 小 发表于 2008-5-30 17:37 只看该作者
我的也是桔子主题，不过修改的不是很好，太阳博客
http://www.greensun11.cn 太阳博客

TOP

‹‹ 上一主题 | 下一主题 ››
发新话题