本帖最后由 az031120103 于 2010-10-30 09:24 编辑
接触DZ有一个星期了,总算了解一点皮毛,昨天突然想把登陆和注册移到顶部,经过百度、google后未果,于是静下心来经过一个上午的研究解决了这个问题,在此同大家进行分享,相信对不少人有帮助吧!好了,闲话不多说了上效果。
未登录的效果:
登录成功后:
下面讲解实现步骤:写的不够明了,希望您仔细阅读核对,您一定能实现最终效果,蓝色字为描述。
一、根据代码的顺序我们首先实现的是登陆成功后的效果。
①用编辑器(Dreamweaver、记事本等等)打开文件template\default\common\header.htm,会看到如下代码
那么我们需要改动的代码如下(这段代码就是登陆注册部分,其他代码直接无视):
- <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[uid]" c="34"><!--{avatar($_G[uid],small)}--></a></div>
- <p>
- <strong><a href="home.php?mod=space&uid=$_G[uid]" class="vwmy" target="_blank" title="{lang visit_my_space}">{$_G[member][username]}</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[member][newprompt]} class="new"{/if}>{lang remind}<!--{if $_G[member][newprompt]}-->($_G[member][newprompt])<!--{/if}--></a><span id="myprompt_check"></span>
- <span class="pipe">|</span><a href="home.php?mod=space&do=pm" id="pm_ntc"{if $_G[member][newpm]} class="new"{/if}>{lang pm_center}<!--{if $_G[member][newpm]}-->($_G[member][newpm])<!--{/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[fid]" 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[member][credits]</a><!--{loop $_G['setting']['extcredits'] $extcreditid $extcredit}--> , {$extcredit[img]}$extcredit[title]: <a href="home.php?mod=spacecp&ac=credit" id="hcredit_$extcreditid"><!--{echo getuserprofile('extcredits'.$extcreditid);}--></a> {$extcredit[unit]}<!--{/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[group][grouptitle]</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>
复制代码
③找到以下的代码(下划线蓝色)
第一段代码
- <h2><a href="./" title="$_G['setting']['bbname']">{BOARDLOGO}</a></h2>
复制代码 这段代码显示logo,logo可以通过编辑你的默认模板进行修改,具体位置在后台-界面-风格管理。根据默认头部的结构这里不能保留这段代码,如果需要logo,可以把这段代码移到第一步中第二段代码的下面(格式为<div>这里放logo代码</div>)logo默认出现在最左边,在这个<div></div>之间可以再加入一个Flash广告什么的,这里需要一点html+css知识
第二段代码
- <div class="avt y"><a href="home.php?mod=space&uid=$_G[uid]" c="34"><!--{avatar($_G[uid],small)}--></a></div>
复制代码 这段代码控制登陆后显示出的头像
第三段代码
- <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[member][credits]</a><!--{loop $_G['setting']['extcredits'] $extcreditid $extcredit}--> , {$extcredit[img]}$extcredit[title]: <a href="home.php?mod=spacecp&ac=credit" id="hcredit_$extcreditid"><!--{echo getuserprofile('extcredits'.$extcreditid);}--></a> {$extcredit[unit]}<!--{/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[group][grouptitle]</a>
- </p>
复制代码 这段代码显示积分以及用户组信息
将以上3段代码删除,删除之后可以看到如下效果。看不到效果的更新缓存,在后台-工具里面。
④看到上面的效果之后,接下来要做的就很明确了,页面没有置顶,要把整个页面往上提。
在
- <div class="hdc cl"> //我是下划线红色
复制代码 的后面加上代码style="margin-top:-40px;"(我的头部用-40px比较合适,具体数值可以根据需要而定。
完整代码如下:
- <div class="hdc cl" style="margin-top:-40px;">
复制代码 到这里登陆成功的效果就实现了。加背景的方法:
- <div class="hdc cl" style="margin-top:-40px;background-color:颜色自定;background:uri(图片路径,注:这里要用ps切出的一小段图片) repeat-x ; "
复制代码 repeat-x的意思是水平填充。
二、下面开始修改未登录的效果。
①找到代码
- <!--{template member/login_simple}-> //我是有下划线的那个
复制代码 代码的意思是导入template/member/login_simple.htm,这个页面就是未登录时的效果,用编辑器打开它,代码如下
- <!--{if CURSCRIPT != 'member'}-->
- <form method="post" autocomplete="off" id="lsform" action="member.php?mod=logging&action=login&loginsubmit=yes&infloat=yes" onsubmit="return lsSubmit()">
- <div class="fastlg cl">
- <span id="return_ls" style="display:none"></span>
- <div class="y">
- <p><a href="member.php?mod=logging&action=login&viewlostpw" onclick="showWindow('login', this.href)" class="xi2">{lang getpassword}</a></p>
- <p><a href="member.php?mod={$_G[setting][regname]}" onclick="showWindow('register', this.href)" class="reglk xi2">$_G['setting']['reglinkname']</a></p>
- </div>
- <div class="fastlg_fm y pns">
- <p>
- <!--{if !$_G['setting']['autoidselect']}-->
- <span class="ftid">
- <select name="fastloginfield" id="ls_fastloginfield" width="45" tabindex="900">
- <option value="username">{lang username}</option>
- <option value="uid">{lang uid}</option>
- <option value="email">{lang email}</option>
- </select>
- </span>
- <script type="text/javascript">simulateSelect('ls_fastloginfield')</script>
- <input type="text" name="username" id="ls_username" autocomplete="off" class="px vm" tabindex="901" />
- <!--{else}-->
- <label for="ls_username">{lang account}</label> <input type="text" name="username" id="ls_username" class="px vm" {if $_G['setting']['autoidselect']} value="UID/{lang username}/Email" onfocus="if(this.value == 'UID/{lang username}/Email') this.value = '';" onblur="if(this.value == '') this.value = 'UID/{lang username}/Email';"{/if} tabindex="901" />
- <!--{/if}-->
- <input type="checkbox" name="cookietime" id="ls_cookietime" class="pc" value="2592000" tabindex="903" /> <label for="ls_cookietime">{lang save_password}</label>
- </p>
- <p>
- <label for="ls_password"{if !$_G['setting']['autoidselect']} class="z psw_w"{/if}>{lang password}</label> <input type="password" name="password" id="ls_password" class="px vm" autocomplete="off" tabindex="902" onfocus="lsShowmore()" />
- <button type="submit" class="pn vm"><em>{lang login}</em></button>
- </p>
- <input type="hidden" name="quickforward" value="yes" />
- <input type="hidden" name="handlekey" value="ls" />
- </div>
- </div>
- <div id="ls_more" style="display:none">
- <h3>
- <em class="y"><a title="{lang close}" onclick="display('ls_more')" class="flbc" href="javascript:;">{lang close}</a></em>
- {lang safety_verification}
- </h3>
- <span class="z"><script type="text/javascript">var ls_sechash = '';</script></span>
- <!--{if $_G['setting']['seccodestatus'] & 2}-->
- {eval
- $seccodechecktmp = !empty($seccodecheck) ? $seccodecheck : false;
- $secqaachecktmp = !empty($secqaacheck) ? $secqaacheck : false;
- $seccodecheck = $_G['setting']['seccodestatus'] & 2;
- $secqaacheck = false;
- $secshow = 0;
- $sectabindex = 904;
- }
- <!--{if $seccodecheck}-->
- <!--{block sectpl}--><div class="mtm mbn c"><em style="display:none"><sec></em><sec></div><div class="pbm bbda xg1 d"><sec></div><!--{/block}-->
- <!--{subtemplate common/seccheck}-->
- <script type="text/javascript">ls_sechash = '$sechash';</script>
- <!--{/if}-->
- <!--{eval $seccodecheck = $seccodechecktmp;$secqaacheck = $secqaachecktmp;}-->
- <!--{/if}-->
- <div class="ftid mtm mbn">
- <select id="ls_questionid" width="131" name="questionid" autocomplete="off" tabindex="905" change="if($('ls_questionid').value > 0) {$('ls_answer').style.display='';$('ls_answer').focus();} else {$('ls_answer').style.display='none';}">
- <option value="0">{lang security_question}</option>
- <option value="1">{lang security_question_1}</option>
- <option value="2">{lang security_question_2}</option>
- <option value="3">{lang security_question_3}</option>
- <option value="4">{lang security_question_4}</option>
- <option value="5">{lang security_question_5}</option>
- <option value="6">{lang security_question_6}</option>
- <option value="7">{lang security_question_7}</option>
- </select>
- <input type="text" name="answer" id="ls_answer" style="display:none" autocomplete="off" size="36" class="px mtn" tabindex="906" />
- </div>
- <script type="text/javascript">simulateSelect('ls_questionid')</script>
- </div>
- </form>
- <!--{/if}-->
复制代码 这个要改动的部分稍微多一些,但也很简单
我们需要修改的代码为以下部分,同样其他代码果断无视
- <!--{if CURSCRIPT != 'member'}-->
- <form method="post" autocomplete="off" id="lsform" action="member.php?mod=logging&action=login&loginsubmit=yes&infloat=yes" onsubmit="return lsSubmit()">
- <div class="fastlg cl">
- <span id="return_ls" style="display:none"></span>
- <div class="y">
- <p><a href="member.php?mod=logging&action=login&viewlostpw" onclick="showWindow('login', this.href)" class="xi2">{lang getpassword}</a></p>
- <p><a href="member.php?mod={$_G[setting][regname]}" onclick="showWindow('register', this.href)" class="reglk xi2">$_G['setting']['reglinkname']</a></p>
- </div>
- <div class="fastlg_fm y pns">
- <p>
- <!--{if !$_G['setting']['autoidselect']}-->
- <span class="ftid">
- <select name="fastloginfield" id="ls_fastloginfield" width="45" tabindex="900">
- <option value="username">{lang username}</option>
- <option value="uid">{lang uid}</option>
- <option value="email">{lang email}</option>
- </select>
- </span>
- <script type="text/javascript">simulateSelect('ls_fastloginfield')</script>
- <input type="text" name="username" id="ls_username" autocomplete="off" class="px vm" tabindex="901" />
- <!--{else}-->
- <label for="ls_username">{lang account}</label> <input type="text" name="username" id="ls_username" class="px vm" {if $_G['setting']['autoidselect']} value="UID/{lang username}/Email" onfocus="if(this.value == 'UID/{lang username}/Email') this.value = '';" onblur="if(this.value == '') this.value = 'UID/{lang username}/Email';"{/if} tabindex="901" />
- <!--{/if}-->
- <input type="checkbox" name="cookietime" id="ls_cookietime" class="pc" value="2592000" tabindex="903" /> <label for="ls_cookietime">{lang save_password}</label>
- </p>
- <p>
- <label for="ls_password"{if !$_G['setting']['autoidselect']} class="z psw_w" {/if}>{lang password}</label> <input type="password" name="password" id="ls_password" class="px vm" autocomplete="off" tabindex="902" onfocus="lsShowmore()" />
- <button type="submit" class="pn vm"><em>{lang login}</em></button>
- </p>
- <input type="hidden" name="quickforward" value="yes" />
- <input type="hidden" name="handlekey" value="ls" />
- </div>
- </div>
复制代码
②将上面代码中的<p>替换成<span>,</p>替换成</span>。(这样是为了让登录等信息水平显示)
接着删除以下代码中的红色部分(都是按钮和文本框的样式,我们不需要)
由于代码里不能改颜色所以写出来
1.reglk
2.class="px vm" (只要是这个都删,button标签里那个pn vm的不要删)
3.class="pc"
4.class="z psw_w"
- <!--{if CURSCRIPT != 'member'}-->
- <form method="post" autocomplete="off" id="lsform" action="member.php?mod=logging&action=login&loginsubmit=yes&infloat=yes" onsubmit="return lsSubmit()">
- <div class="fastlg cl">
- <span id="return_ls" style="display:none"></span>
- <div class="y">
- <p><a href="member.php?mod=logging&action=login&viewlostpw" onclick="showWindow('login', this.href)" class="xi2">{lang getpassword}</a></p>
- <p><a href="member.php?mod={$_G[setting][regname]}" onclick="showWindow('register', this.href)" class="reglk xi2">$_G['setting']['reglinkname']</a></p>
- </div>
- <div class="fastlg_fm y pns">
- <p>
- <!--{if !$_G['setting']['autoidselect']}-->
- <span class="ftid">
- <select name="fastloginfield" id="ls_fastloginfield" width="45" tabindex="900">
- <option value="username">{lang username}</option>
- <option value="uid">{lang uid}</option>
- <option value="email">{lang email}</option>
- </select>
- </span>
- <script type="text/javascript">simulateSelect('ls_fastloginfield')</script>
- <input type="text" name="username" id="ls_username" autocomplete="off" class="px vm" tabindex="901" />
- <!--{else}-->
- <label for="ls_username">{lang account}</label> <input type="text" name="username" id="ls_username" class="px vm" {if $_G['setting']['autoidselect']} value="UID/{lang username}/Email" onfocus="if(this.value == 'UID/{lang username}/Email') this.value = '';" onblur="if(this.value == '') this.value = 'UID/{lang username}/Email';"{/if} tabindex="901" />
- <!--{/if}-->
- <input type="checkbox" name="cookietime" id="ls_cookietime" class="pc" value="2592000" tabindex="903" /> <label for="ls_cookietime">{lang save_password}</label>
- </p>
- <p>
- <label for="ls_password"{if !$_G['setting']['autoidselect']} class="z psw_w" /if}>{lang password}</label> <input type="password" name="password" id="ls_password" class="px vm" autocomplete="off" tabindex="902" onfocus="lsShowmore()" />
- <button type="submit" class="pn vm"><em>{lang login}</em></button>
- </p>
- <input type="hidden" name="quickforward" value="yes" />
- <input type="hidden" name="handlekey" value="ls" />
- </div>
- </div>
复制代码
删除之后将上面代码中下划线部分改为
- <div class="fastlg cl" style="width:670px;margin-top:44px;margin-left:240px;">
复制代码
三、您是否还沉溺在修改代码的欣喜之中?非常抱歉整个效果已经修改完成。
另附:记住密码放到登录按钮前面的办法,把代码<input type="checkbox" name="cookietime" id="ls_cookietime" class="pc" value="2592000" tabindex="903" /> <label for="ls_cookietime">{lang save_password}</label>放到代码
<button type="submit" class="pn vm"><em>{lang login}</em></button>前面即可,2段代码中间可以加点间隔,加个
|