fiyta12 发表于 2010-9-30 11:23:01

DZX头部修改教程!高手飘过......

本帖最后由 fiyta12 于 2011-10-18 21:22 编辑

给大家介绍一下如果修改DZX的默认头部!
首先大家要知道头部模板的默认存放位置:wwwroot\template\default\common\header.htm;
找到这个模板之后就可以修改了!
1.首先,把这个模板复制一份【复制 header.htm】以备查看,然后删除header.htm内所有代码把你自己的HTML头部代码写进去!

2.修改头部:打开上一步你备份的【复制 header.htm】,把


<!--{subtemplate common/header_common}-->
<link href=".../NewDefault.css" rel="stylesheet" type="text/css" />
<link href=".../newTop2.css" rel="stylesheet" type="text/css" />
<!--{if defined('CURMODULE') && ($_G['basescript'] == 'forum' || $_G['basescript'] == 'group') && (CURMODULE == 'index' || CURMODULE == 'forumdisplay' || CURMODULE == 'group')}-->$rsshead<!--{/if}-->
<!--{if $_G['basescript'] == 'forum' || $_G['forum']['status'] == 3}-->
<!--{if !empty($_G['cookie']['widthauto']) && empty($_G['disabledwidthauto'])}-->
   <link rel="stylesheet" id="css_widthauto" type="text/css" href="data/cache/style_{STYLEID}_widthauto.css?{VERHASH}" />
   <script type="text/javascript">HTMLNODE.className += ' widthauto'</script>
<!--{/if}-->
<script type="text/javascript" src="{$_G}forum.js?{VERHASH}"></script>
<!--{elseif $_G['basescript'] == 'home' || $_G['basescript'] == 'userapp'}-->
<script type="text/javascript" src="{$_G}home.js?{VERHASH}"></script>
<!--{elseif $_G['basescript'] == 'portal'}-->
<script type="text/javascript" src="{$_G}portal.js?{VERHASH}"></script>
<!--{/if}-->
<!--{if $_G['basescript'] != 'portal' && $_GET['diy'] == 'yes' && ($_G == 'topic' || $_G) && !empty($_G['style']['tplfile'])}-->
<script type="text/javascript" src="{$_G}portal.js?{VERHASH}"></script>
<!--{/if}-->
<!--{if $_GET == 'yes' && ($_G == 'topic' || $_G) && !empty($_G['style']['tplfile'])}-->
<link rel="stylesheet" type="text/css" href="data/cache/style_{STYLEID}_css_diy.css?{VERHASH}" />
<!--{/if}-->
</head>
添加到你header.htm的<head>内,以前的删除!
注:
<link href=".../NewDefault.css" rel="stylesheet" type="text/css" />

<link href=".../newTop2.css" rel="stylesheet" type="text/css" />
这2段代码是自己头部的CSS文件!其他部分便是默认头部的HEAD;

3.添加<body>为
<body id="nv_{$_G}" class="pg_{CURMODULE}" onkeydown="if(event.keyCode==27) return false;">
4.在<body>下添加这段代码:
<div id="append_parent"></div><div id="ajaxwaitid"></div>这段代码是必须要的!为整站的AJAX调用;

5.这一步就是添加头部登陆框了;头部登陆框可以自己修改位置,我是直接在<head>内添加一段CSS,绝对定位这个登陆框!想在在什么地方放在什么地方!^ _^!
在第四步的代码下面添加:

<div class="hdc cl">
<h2><a href="./" title="$_G['setting']['bbname']">{BOARDLOGO}</a></h2>

<!--{if $_G['uid']}-->
<div id="um">
<div class="avt y"><a href="home.php?mod=space&uid=$_G" c="34"><!--{avatar($_G,small)}--></a></div>
<p>
<strong><a href="home.php?mod=space&uid=$_G" class="vwmy" target="_blank" title="{lang visit_my_space}">{$_G}</a></strong>
<!--{if $_G['group']['allowinvisible']}-->
<span id="loginstatus" class="xg1">
<a href="member.php?mod=switchstatus" title="{lang login_switch_invisible_mode}" onClick="ajaxget(this.href, 'loginstatus');doane(event);">
<!--{if $_G['session']['invisible']}-->
{lang login_invisible_mode}
<!--{else}-->
{lang login_normal_mode}
<!--{/if}-->
</a>
</span>
<!--{/if}-->
<span class="pipe">|</span><span id="usersetup" class="showmenu" onMouseOver="showMenu(this.id);"><a href="home.php?mod=spacecp">{lang setup}</a></span>
<!--{hook/global_usernav_extra1}-->
<span class="pipe">|</span><a href="home.php?mod=space&do=notice" id="myprompt"{if $_G} class="new"{/if}>{lang remind}<!--{if $_G}-->($_G)<!--{/if}--></a><span id="myprompt_check"></span>
<span class="pipe">|</span><a href="home.php?mod=space&do=pm" id="pm_ntc"{if $_G} class="new"{/if}>{lang pm_center}<!--{if $_G}-->($_G)<!--{/if}--></a>
<span class="pipe">|</span><a href="home.php?mod=space&do=friend">{lang friends}</a> <!--{if $_G['setting']['regstatus'] > 1}--><a href="home.php?mod=spacecp&ac=invite" class="xg1">{lang invite}</a> <!--{/if}-->

<!--{if $_G['setting']['taskon']}-->
<span class="pipe">|</span>
<!--{if empty($_G['cookie']['taskdoing_'.$_G['uid']])}-->
<a href="home.php?mod=task&item=new">{lang task}</a>
<!--{else}-->
<a href="home.php?mod=task&item=doing" id="task_ntc" class="new">{lang task_doing}</a>
<!--{/if}-->
<!--{/if}-->
<!--{hook/global_usernav_extra2}-->
<!--{if $_G['group']['allowmanagearticle'] || $_G['group']['allowdiy'] || $_G['group']['allowauthorizedblock'] || $_G['group']['allowauthorizedarticle']}-->
<span class="pipe">|</span><a href="portal.php?mod=portalcp">{lang portal_manage}</a>
<!--{/if}-->
<!--{if $_G['uid'] && $_G['group']['radminid'] > 1}-->
<span class="pipe">|</span><a href="forum.php?mod=modcp&fid=$_G" target="_blank">{lang forum_manager}</a>
<!--{/if}-->
<!--{if $_G['uid'] && ($_G['group']['radminid'] == 1 || $_G['member']['allowadmincp'])}-->
<span class="pipe">|</span><a href="admin.php" target="_blank">{lang admincp}</a>
<!--{/if}-->
<span class="pipe">|</span><a href="member.php?mod=logging&action=logout&formhash={FORMHASH}">{lang logout}</a>
</p>
<p>
<!--{eval $upgradecredit = $_G['uid'] && $_G['group']['grouptype'] == 'member' && $_G['group']['groupcreditslower'] != 999999999 ? $_G['group']['groupcreditslower'] - $_G['member']['credits'] : false;}-->
{lang credits}: <a href="home.php?mod=spacecp&ac=credit">$_G</a><!--{loop $_G['setting']['extcredits'] $extcreditid $extcredit}--> , {$extcredit}$extcredit: <a href="home.php?mod=spacecp&ac=credit" id="hcredit_$extcreditid"><!--{echo getuserprofile('extcredits'.$extcreditid);}--></a> {$extcredit}<!--{/loop}--> , {lang usergroup}: <a href="home.php?mod=spacecp&ac=usergroup"{if $upgradecredit !== 'false'} id="g_upmine" class="xi2" onMouseOver="showMenu({'ctrlid':this.id, 'pos':'21'});"{/if}>$_G</a>
</p>
</div>
<!--{elseif !empty($_G['cookie']['loginuser'])}-->
<p>
<strong><a id="loginuser" class="noborder">$_G['cookie']['loginuser']</a></strong>
<span class="pipe">|</span><a href="member.php?mod=logging&action=login" onClick="showWindow('login', this.href);hideWindow('register');">{lang activation}</a>
<span class="pipe">|</span><a href="member.php?mod=logging&action=logout&formhash={FORMHASH}">{lang logout}</a>
</p>
<!--{elseif !IS_ROBOT}-->
<!--{template member/login_simple}-->
<!--{/if}-->
</div>

<!--{if !IS_ROBOT}-->
删除:
<h2><a href="./" title="$_G['setting']['bbname']">{BOARDLOGO}</a></h2>这段代码是调用LOGO的,你自己的HTML里面肯定已经有LOGO了,如果你想用他默认的话,也可以,但是需要修改它的样式!

以上操作就添加了TOP登陆框。

6.这一步就来修改导航,我的HTML导航是这样的


<div class="menu">
<ul>
<li class="select"><a href=http://www.a700.cn/ hidefocus="true" >首页</a></li>
<li><a href="http://www.a700.cn/zatan/" hidefocus="true" >杂谈</a></li>
<li><a href="http://www.a700.cn/qiushi/" hidefocus="true" >糗事</a></li>
<li><a href="http://www.a700.cn/yulu/" hidefocus="true" >语录</a></li>
<li><a href="http://www.a700.cn/tupian/" hidefocus="true" >图片</a></li>
<li><a href="http://www.a700.cn/xiaohua/" hidefocus="true" >笑话</a></li>
<li><a href="http://www.a700.cn/dianying/" hidefocus="true" >电影</a></li>

</div>..
<li class="select"><a href=http://www.a700.cn/hidefocus="true" >首页</a></li>
<li><a href="http://www.a700.cn/zatan/" hidefocus="true" >杂谈</a></li>
<li><a href="http://www.a700.cn/qiushi/" hidefocus="true" >糗事</a></li>
<li><a href="http://www.a700.cn/yulu/" hidefocus="true" >语录</a></li>
<li><a href="http://www.a700.cn/tupian/" hidefocus="true" >图片</a></li>
<li><a href="http://www.a700.cn/xiaohua/" hidefocus="true" >笑话</a></li>
<li><a href="http://www.a700.cn/dianying/" hidefocus="true" >电影</a></li>
一般都是<ul><li>制作的导航!
然后把上面代码内的所有<LI>换成

<!--{eval $mnid = getcurrentnav();}-->
<!--{loop $_G['setting']['navs'] $nav}-->
<!--{if $nav['available'] && (!$nav['level'] || ($nav['level'] == 1 && $_G['uid']) || ($nav['level'] == 2 && $_G['adminid'] > 0) || ($nav['level'] == 3 && $_G['adminid'] == 1))}--><li {if $mnid == $nav}class="select" {/if}$nav></li><!--{/if}-->
<!--{/loop}-->这里面的class=“select”是导航focus,就是该栏目的导航背景(不知道怎么表达。。。你懂的!)
这里面定义之后,系统内部有个JS可以自动通过ID判断该出是不是focus;

OK,大功造成!头部就完全修改完了!看看我的头部吧!


教程结束!这是简单的教程,高手就飘过吧!:lol

fiyta12 发表于 2010-9-30 11:28:08

(EM:131:)

我非平凡 发表于 2010-9-30 11:28:22

学习了 帮你顶一个

ooo0772 发表于 2010-9-30 12:17:09

不会CSS啊,好可怜啊

ooo0772 发表于 2010-9-30 12:17:48

回复 fiyta12 的帖子

楼主,能不能写一个CSS教程啊,菜鸟向你致敬啦。

fiyta12 发表于 2010-9-30 12:22:49

本帖最后由 fiyta12 于 2010-9-30 12:25 编辑

.hdc {position:absolute; width:230px; left:980px; top:0px; font-size:12px; z-index:999999; }
.top-login {position:absolute; left:0px; top:10px; width:350px; }

hdc 就是对应class。position:absolute是绝对定位!width:230px; 是模块的宽度,left是配合position用的,就是距 距离上一级(上一级必有position属性)左边距离!z-index是重叠的次序,CSS要系统的学习啊!有时间再写个CSS教程吧!

OCEANSTUDIO 发表于 2010-9-30 12:58:28

这个很需要 谢谢!!!(EM:154:)

hellokai 发表于 2010-9-30 16:34:57

llslovexgh 发表于 2010-9-30 16:48:55

没文化真可怕,没看懂(EM:145:):lol

J16988 发表于 2010-9-30 16:51:18

菜鸟来学习
页: [1] 2 3 4 5 6 7 8 9 10
查看完整版本: DZX头部修改教程!高手飘过......