立即注册 登录
彼岸网 返回首页

天香公主的个人空间 http://www.bian-wang.com/discuz/?10005 [收藏] [复制] [分享] [RSS] txgz999@yahoo.com

日志

Discuz功能改进:将登陆注册窗口挪到顶部

热度 6已有 1666 次阅读2015-5-16 01:14 AM |个人分类:Discuz|系统分类:社交网理论与实践

Discuz功能改进:将登陆注册窗口挪到顶部

同意东风网友的看法,注册登陆信息以放在顶部为好。放在头部感觉占的分量过重。


有好多网站都是这么改的,以美中网为例:

你看重要的地方留出来给了广告

这个登陆注册信息定义在模板 common/header_userstatus.htm 里,并被 common/header.htm 调用 : <div id="hd"> <div class="wp"> <div class="hdc cl"> <!--{eval $mnid = getcurrentnav();}--> <h2><!--{if !isset($_G['setting']['navlogos'][$mnid])}-->< a href="{if $_G['setting']['domain']['app']['default']}http://{$_G['setting']['domain']['app']['default']}/{else}./{/if}" title="$_G['setting']['bbname']">{$_G['style']['boardlogo']}</a><!--{else}-->$_G['setting']['navlogos'][$mnid]<!--{/if}--></h2> <!--{template common/header_userstatus}--> </div>
把对这个模板的调用移到顶部: <div id="toptb" class="cl"> <!--{hook/global_cpnav_top}--> <div class="wp"> <div class="z"> <!--{loop $_G['setting']['topnavs'][0] $nav}--> <!--{if $nav['available'] && (!$nav['level'] || ($nav['level'] == 1 && $_G['uid']) || ($nav['level'] == 2 && $_G['adminid'] > 0) || ($nav['level'] == 3 && $_G['adminid'] == 1))}-->$nav[code]<!--{/if}--> <!--{/loop}--> <!--{hook/global_cpnav_extra1}--> </div> <div class="y"> <div style="float: left;"> <!--{template common/header_userstatus}--> </div> 但是结果并不理想:


其主要原因是顶部对其中的元素另有风格定义,因此改变了这个区域的形状,在风格文件 common/common.css 里可以看到有关的风格定义: #toptb a { float: left; padding: 0 4px; height: 28px; } #toptb a.showmenu { padding-right: 15px; } #toptb a.hover { background-color: #FFF; } #toptb .pipe { float: left; display: none; }
为解决这个问题,我们可以在调用登陆注册模板的周围重置这些风格: <div style="float: left;"> <style scoped> a { float: none; padding: 0; height: 28px;} a.showmenu { padding-right: 16px; white-space: nowrap;} .pipe { float: none; display: inline; } #g_upmine { padding-left: 10px; padding-right: 0px; } </style> <!--{template common/header_userstatus}--> </div> 这样原来这个区域就被原封不动的搬到了顶部: 


我们可以对风格略做修改,让这些元素更好的融入顶部: <div style="float: left;"> <style scoped> a { float: none; padding: 0; height: 28px;} a.showmenu { padding-right: 16px; white-space: nowrap;} #g_upmine { padding-left: 10px; padding-right: 0px; } #um {padding-top: 0; } p {display: inline;} img { height: 28px; } </style> <!--{template common/header_userstatus}--> </div>


我们还需要处理未登陆时的状况:

这个区域定义在另一个模板 member/login_simple.htm 里,被 common/header_userstatus.htm 所调用,它里面的元素是放置在 table 里的 <table cellspacing="0" cellpadding="0"> <tr> <!--{if !$_G['setting']['autoidselect']}--> <td> <span class="ftid"> <select name="fastloginfield" id="ls_fastloginfield" width="40" tabindex="900"> <option value="username">{lang username}</option> <!--{if getglobal('setting/uidlogin')}--> <option value="uid">{lang uid}</option> <!--{/if}--> <option value="email">{lang email}</option> </select> </span> <script type="text/javascript">simulateSelect('ls_fastloginfield')</script> </td> <td><input type="text" name="username" id="ls_username" autocomplete="off" class="px vm" tabindex="901" /></td> <!--{else}--> <td><label for="ls_username">{lang account}</label></td> <td><input type="text" name="username" id="ls_username" class="px vm xg1" {if $_G['setting']['autoidselect']} value="{if getglobal('setting/uidlogin')}UID/{/if}{lang username}/Email" onfocus="if(this.value == '{if getglobal('setting/uidlogin')}UID/{/if}{lang username}/Email'){this.value = '';this.className = 'px vm';}" onblur="if(this.value == ''){this.value = '{if getglobal('setting/uidlogin')}UID/{/if}{lang username}/Email';this.className = 'px vm xg1';}"{/if} tabindex="901" /></td> <!--{/if}--> <td class="fastlg_l">< label for="ls_cookietime"><input type="checkbox" name="cookietime" id="ls_cookietime" class="pc" value="2592000" tabindex="903" />{lang login_permanent}</label></td> <td>&nbsp;< a href="javascript:;" onclick="showWindow('login', 'member.php?mod=logging&action=login&viewlostpw=1')">{lang forgotpw}</a></td> </tr> <tr> <td><label for="ls_password"{if !$_G['setting']['autoidselect']} class="z psw_w"{/if}>{lang password}</label></td> <td><input type="password" name="password" id="ls_password" class="px vm" autocomplete="off" tabindex="902" /></td> <td class="fastlg_l"><button type="submit" class="pn vm" tabindex="904" style="width: 75px;"><em>{lang login}</em></button></td> <td>&nbsp;<a href="member.php?mod={$_G[setting][regname]}" class="xi2 xw1" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank" target="_blank">$_G['setting']['reglinkname']</a></td> </tr> </table> 要想把它们放在一行上,得去掉这 table 结构: <!--{if !$_G['setting']['autoidselect']}--> <span > <select name="fastloginfield" id="ls_fastloginfield" width="40" > <option value="username">{lang username}</option> <!--{if getglobal('setting/uidlogin')}--> <option value="uid">{lang uid}</option> <!--{/if}--> <option value="email">{lang email}</option> </select> </span> <input type="text" name="username" id="ls_username" autocomplete="off" class="px vm" /> <!--{else}--> <label for="ls_username">{lang account}</label> <input type="text" name="username" id="ls_username" class="px vm xg1" {if $_G['setting']['autoidselect']} value="{if getglobal('setting/uidlogin')}UID/{/if}{lang username}/Email" onfocus="if(this.value == '{if getglobal('setting/uidlogin')}UID/{/if}{lang username}/Email'){this.value = '';this.className = 'px vm';}" onblur="if(this.value == ''){this.value = '{if getglobal('setting/uidlogin')}UID/{/if}{lang username}/Email';this.className = 'px vm xg1';}"{/if} /> <!--{/if}--> <label for="ls_password"{if !$_G['setting']['autoidselect']} class="psw_w"{/if}>{lang password}</label> <input type="password" name="password" id="ls_password" class="px vm" autocomplete="off" /> <label for="ls_cookietime"><input type="checkbox" name="cookietime" id="ls_cookietime" class="pc" value="2592000" />{lang login_permanent}</label> <button type="submit" class="pn vm" style="width: 75px;"><em>{lang login}</em></button> &nbsp;< a href="javascript:;" onclick="showWindow('login', 'member.php?mod=logging&action=login&viewlostpw=1')">{lang forgotpw}</a> &nbsp;< a href="member.php?mod={$_G[setting][regname]}" class="xi2 xw1">$_G['setting']['reglinkname']</a>
经改动后,现在它就成了



注:本文中的代码里的<符号如果后面的字符是a的话,在它们中间加了一个不应该有的空格,以避免Discuz在保存日志时自动改变日志内容。

发表评论 评论 (20 个评论)

回复 天香公主 2017-8-9 01:15 AM
carry0987: 感謝天香長期以來的指導,這是我透過ajax , php , js 所設計出來的留言板
https://www.nehscsa.com/mgbd/
尤其是php , js 的部分,幾乎可以說是天香教給我的 ...
carry客气了
回复 天香公主 2017-8-9 01:13 AM
loveyou520tw: 感谢。目前这边已经修改回原本样式。我也将toptb给移除了,若后续有在做到此调整会此留言。
目前确定css部分会导致整个页面压缩,只要是图片部分都会,包含幻灯 ...
我把文中的修改加在了我的测试网站上
(修改前)https://ngcorner.com/dz33/portal.php
(修改后)https://ngcorner.com/dz3388/portal.php
请帮我看看变形了吗?还是需要加更多的东西才能显示不同?
回复 carry0987 2017-8-8 02:28 AM
天香公主: 谢谢分享。我记得有其它站长也提到过有问题,但不知其详。
请详细讲讲出现的问题,以及您的改动。最好给张显示出问题的门户页截屏。 ...
感謝天香長期以來的指導,這是我透過ajax , php , js 所設計出來的留言板
https://www.nehscsa.com/mgbd/
尤其是php , js 的部分,幾乎可以說是天香教給我的
回复 loveyou520tw 2017-8-7 09:50 PM
天香公主: 谢谢分享。我记得有其它站长也提到过有问题,但不知其详。
请详细讲讲出现的问题,以及您的改动。最好给张显示出问题的门户页截屏。 ...
感谢。目前这边已经修改回原本样式。我也将toptb给移除了,若后续有在做到此调整会此留言。
目前确定css部分会导致整个页面压缩,只要是图片部分都会,包含幻灯片。
回复 天香公主 2017-8-7 07:20 AM
loveyou520tw: 感谢天香老师的分享。
这边实际依照天香老师代码测试主会发现CSS部分会导致『门户』相关CSS压缩,这边会需要特别去调整一下 ...
谢谢分享。我记得有其它站长也提到过有问题,但不知其详。
请详细讲讲出现的问题,以及您的改动。最好给张显示出问题的门户页截屏。
回复 loveyou520tw 2017-8-7 03:17 AM
感谢天香老师的分享。
这边实际依照天香老师代码测试主会发现CSS部分会导致『门户』相关CSS压缩,这边会需要特别去调整一下
回复 TING 2015-6-8 07:10 PM
真棒
回复 小时候很迷茫 2015-6-5 03:21 AM
涨姿势了   
回复 天香公主 2015-5-17 06:12 PM
忆江南: 是个好主意,等有空时试一下。
其实做成个人空间页顶部那样也不错。一是那顶上直接登录还是点击链接在登录页登录区别有限,二是不同的部分(积分,用户组,头像)也许不放更好
回复 天香公主 2015-5-17 08:04 AM
东风无力: 谢谢您, 这个帖子太有营养了, 从这里,领略到了结构性html以及css的概貌, 太多内容了, 俺是搞路由交换服务器的,猛一上编程,不一会头就大了   ...
对,css 是满有用的,如你前面说的填用户名和密码的输入框过宽,就可以用css调整一下(放在那个<style scoped> 里):
.px        { width: 60px; }
回复 东风无力 2015-5-17 01:57 AM
天香公主:      很高兴你解决了自己的问题。我刚才在忙点别的事,原想说我文中的改动的确只适用于默认风格模板。第三方模板往往提供了自己的头部模板,也许对上面的内 ...
谢谢您, 这个帖子太有营养了, 从这里,领略到了结构性html以及css的概貌, 太多内容了, 俺是搞路由交换服务器的,猛一上编程,不一会头就大了
回复 忆江南 2015-5-16 11:28 PM
是个好主意,等有空时试一下。
回复 天香公主 2015-5-16 11:15 PM
东风无力: 天香老师,哪敢啊,这都在班门数脚指头都数不清啊,我在自己家里的虚拟网站上用的缺省模版,实验上边的,没问题,但是虚拟服务器上的,因为有第三方模版,酒不行 ...
    很高兴你解决了自己的问题。我刚才在忙点别的事,原想说我文中的改动的确只适用于默认风格模板。第三方模板往往提供了自己的头部模板,也许对上面的内容有自己的风格设置。
回复 天香公主 2015-5-16 11:10 PM
东风无力: 才发现彼岸网没有进行SEO, 或许是一种姿态?
好像很多国内网站很强调SEO。美中网在去年也改了页面url的形式,这里就是朋友玩玩,也许不在乎这些。
回复 天香公主 2015-5-16 11:01 PM
东风无力: 终于捣鼓出来了, 但是新问题就是, 这样的话,qq互联以及微信都挤到上面了,排不下,就得停止他们,不然会挤到下面, 主要是挪上去的输入用户名和密码的窗口太 ...
同意,搬到顶部后变成一行后就显得占地太多了,需要精简。你看家园 http://towngain.com/home.php?mod=space&do=blog 把标签变成了watermark就省了不少地方。美中网把标签的字改了下,把用户名改成了帐号,把立刻注册改成了注册
回复 东风无力 2015-5-16 10:30 PM
才发现彼岸网没有进行SEO, 或许是一种姿态?
回复 东风无力 2015-5-16 10:28 PM
终于捣鼓出来了, 但是新问题就是, 这样的话,qq互联以及微信都挤到上面了,排不下,就得停止他们,不然会挤到下面, 主要是挪上去的输入用户名和密码的窗口太宽,甚至可以完全去掉,因为点击登陆会跳出新窗口。
回复 东风无力 2015-5-16 05:28 PM
天香公主: 哈,东风兄说话就是夸张,什么时候也来分享分享你的经验体会?
天香老师,哪敢啊,这都在班门数脚指头都数不清啊,我在自己家里的虚拟网站上用的缺省模版,实验上边的,没问题,但是虚拟服务器上的,因为有第三方模版,酒不行,我再啃啃自己的腳指头
回复 天香公主 2015-5-16 12:27 PM
东风无力: 叩谢啊~眼泪汪汪的!
哈,东风兄说话就是夸张,什么时候也来分享分享你的经验体会?
回复 东风无力 2015-5-16 12:07 PM
叩谢啊~眼泪汪汪的!

facelist doodle 涂鸦板

您需要登录后才可以评论 登录 | 立即注册

小黑屋|Archiver|彼岸网  

Powered by Discuz! X3.1 © 2001-2014 Comsenz Inc.
GMT-4, 2017-11-24 06:28 PM , Processed in 0.067315 second(s), 20 queries.

返回顶部