Horizontal logon box added to top of zhimeng CMS

Source: Internet
Author: User

DedeCMS tutorial 5. add horizontal navigation to the top. This section uses the DedeCMS default style as an example. If your site is not using the default template, you must modify it flexibly.

1. In the default DedeCMS style, there is a paragraph on the left of the top "zhimeng CMS-easily build the site from now on! ", Many friends want to change this line to a horizontal logon box, just like the top of dedecms8.com.

  

 

Figure DedeCMS tutorial 5-1

2. Open the public template file templets/default/head.htm in the header and find the following Chinese characters:

  

 

Figure DedeCMS tutorial 5-2

Replace the Chinese character with the following code:

<Div id = "_ userlogin">

<Form name = "userlogin" action = "{dede: global. pai_memberurl/}/index_do.php" method = "POST">

<Input type = "hidden" name = "dopost" value = "login"/>

<Span> User name: </span>

<Input type = "text" name = "userid" size = "10" class = "ipt-txt"/>

<Span> password: </span>

<Input type = "password" name = "pwd" size = "10" 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"/>

';}

{/Dede: php}

<Button type = "submit" class = "btn-1"> login </button>

<A href = "{dede: global. cmd_memberurl/}/index_do.php? Fmdo = user & dopost = regnew "> register an account </a> <a href =" {dede: global. Alibaba _memberurl/}/resetpassword. php "> forgot password? </A>

</Form>

</Div>

<Script language = "javascript" type = "text/javascript"> CheckLogin (); </script>

After modification:

  

 

Figure DedeCMS tutorial 5-3

In fact, this code is not enough. The following code is required to help achieve the effect:

 

 

<Script language = "javascript" type = "text/javascript" src = "{dede: global. cfg_cmsurl/}/include/dedeajax2.js "> </script> <script language =" javascript "type =" text/javascript "> <! -- Function CheckLogin () {var taget_obj = document. getElementById ('_ userlogin'); myajax = new DedeAjax (taget_obj, false, false, ''); myajax. sendGet2 ("{dede: global. pai_cmspath/}/member/ajax_loginsta.php "); DedeXHTTP = null ;}--> </script>

So why didn't I add this code here? This is because the code is included in the "index.htm" template file of the primary page. If no one exists or is deleted by the operator, please refer to index.htm before.

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

  

 

Figure DedeCMS tutorial 5-4

The code in the red box indicates that user information is returned after logon is successful. Most of the time, the navigation on the top is not too wide to display the data. It is unnecessary for all the information to be returned. You can reduce the number of items and beautify the div, to provide a beautiful experience. Here, make the following adjustments:

  

 

Figure DedeCMS tutorial 5-5

Download the attachment: www.dedecms8.com/dedecms/dedecms-ad/41032_2.html

After the update is generated, you can see the following results:

  

 

Figure DedeCMS tutorial 5-6

OK, so that a horizontal logon box on the top is created. For more information, see [zhimeng]. Thank you for your cooperation. Welcome to join DedeCMS8-QQ group: 63671447 exchange learning.

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.