Dream of dreaming CMS top Add horizontal Login box

Source: Internet
Author: User
Keywords Login CMS

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

Dream (dedecms8.com) Dedecms Tutorial 5, add horizontal navigation to the top. This section takes the DEDECMS default style as an example, so if your site is not using the default template, modify it flexibly.

1, dedecms default style, the top left there is a phrase "dream cms-Easy to build the station from now on!", many friends want to change this phrase into a horizontal login box, like weaving Dream Bar (dedecms8.com) at the top of the same.

  

Figure Dedecms Self-study tutorial 5-1

2, open the Head common template file templets/default/head.htm, find the following characters:

  

Figure Dedecms Self-study tutorial 5-2

Replace the characters in the above image with the following code:

<div id= "_userlogin" >

<form name= "Userlogin" action= "{dede:global.cfg_memberurl/}/index_do.php" method= "POST" >

<input type= "hidden" name= "dopost" value= "Login"/>

<span> username:</span>

<input type= "text" name= "userid" "size=" class= "Ipt-txt"/>

<span> Password:</span>

<input type= "password" name= "pwd" "size=" class= "Ipt-txt"/>

{dede:php}

if (Preg_match ("#2 #", $safe _gdopen)) {

Echo '

<span> Verification Code:</span>

<input type= "text" name= "Vdcode" size= "8" class= "Ipt-txt"/>

<img id= "Vdimgck" align= "Absmiddle" onclick= "this.src=this.src+\" ' style= ' cursor:pointer;margin-left:0px; Text-transform:uppercase "alt=" can't see clearly? Click to replace "src=" $cfg _cmspath. /include/vdimgck.php "/>";}

{/dede:php}

<button type= "Submit" class= "btn-1" > Login </button>

<a href= "{dede:global.cfg_memberurl/}/index_do.php?fmdo=user&dopost=regnew" > registered account </a> <a href= " {dede:global.cfg_memberurl/}/resetpassword.php > Forgot password?</a>

</form>

</div>

<script language= "javascript" type= "Text/javascript" >checklogin ();</script>

After the change:

  

Figure Dedecms Self-study tutorial 5-3

In fact, only this piece of code is not enough, but also need the following code to help to achieve the effect:

&lt;script language= "javascript" type= "Text/javascript" src= "{dede:global.cfg_cmsurl/}/include/dedeajax2.js" &gt;&lt;/script&gt; &lt;script language= "javascript" type= "Text/javascript" &gt; &lt;!--function checklogin () {var Taget_obj = document.getElementById (' _userlogin '); Myajax = new Dedeajax (Taget_obj,false,false, ', ', ', '); Myajax. SendGet2 ("{dede:global.cfg_cmspath/}/member/ajax_loginsta.php"); Dedexhttp = null; }--&gt; &lt;/script&gt;

So why didn't I add this code here? This is because the default home page template file, index.htm, already includes this code. If not, or deleted by yourself, please add it before index.htm.

3, open the member/ajax_loginsta.php file, find the following code,

  

Figure Dedecms Self-study tutorial 5-4

Code in the red box above, which returns user information after successful login. Most of the time, our top navigation is not too wide to display this data, all completely unnecessary to return this information, you can appropriately reduce a few items, and to beautify the div to achieve a beautiful experience. Here, simply make the adjustment as follows:

  

Figure Dedecms Self-study tutorial 5-5

Download the attached image: www.dedecms8.com/dedecms/dedecms-ad/10832_2.html

After you update the build, you can see the following effects:

  

Figure Dedecms Self-study tutorial 5-6

OK, so one of the top horizontal login boxes is finished. Reprint please indicate the source "dream-weaving", thank you for your cooperation. Welcome to add DEDECMS8-QQ Group: 63671447 Exchange Learning.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.