When I clicked log in, it pop out I saw images in the username and password and I loved it. So, I wish you could help me with such a code.

Hello,

I'm not the admin at this homepage.But i will try to help you..

Go to ACP>>Display>>Colors>>CSS Stylesheet

Paste this code:

Code:

#LGoverlay {
  position: fixed;
  top: 0px;
  left: 0px;
  min-height: 101%;
  width: 100%;
  background-color: #000;
  opacity: 0.7;
  filter:Alpha(opacity=70);
  z-index: 999;
}
#LGlogin {
  background: #EEE;
  color: #777;
  left: 25%;
  position: fixed;
  top: 30%;
  width: 50%;
  z-index: 999;
  box-shadow: 10px 10px 40px black;
  -moz-box-shadow: 10px 10px 40px black;
  -webkit-box-shadow: 10px 10px 40px black;
  font-family: sans-serif;
  text-shadow: 0px 1px 1px white;
  color: #666;
}
#LGlogin h1 {
  background: #CCC;
  margin-top: 0;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #888;
}
#LGlogin form {
  margin: 10px auto;
  width: 90%;
}
#LGlogin img.closebutton {
  float: right;
  margin: 10px;
  background: url('http://i45.servimg.com/u/f45/16/95/07/69/bt_clo10.png') no-repeat 0 -20px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
#LGlogin img.closebutton:hover {background: url('http://i45.servimg.com/u/f45/16/95/07/69/bt_clo10.png') 0 0px;}
#LGlogin ul {
  list-style-type: none;
}
#LGlogin ul li {
  float: left;
  width: 50%;
  font-size: 1.2em;
}
#LGlogin li input {
  padding: 4px;
  background: #fff;
  border: 1px solid #CCC;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}
#LGlogin .login-submit {
  display: block;
  margin: 15px auto;
  background: #CCC;
  border: 1px solid;
  color: #666;
  padding: 5px 10px;
  font-weight: bold;
  text-shadow: 0px 1px 1px #fff;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  cursor: pointer;
}
#LGlogin .login-submit:hover {
  color: #AAA; 
}
#LGloginbtn {
  background: #CCC;
  border: 1px solid;
  color: #555;
  font-weight: bold;
  font-size: 1.4em;
  padding: 10px 30px;
  position: fixed;
  right: 10px;
  text-shadow: 0 1px 1px white;
  top: 5px;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  box-shadow: 4px 8px 25px #444;
  -webkit-box-shadow: 4px 8px 25px #444;
  -moz-box-shadow: 4px 8px 25px #444;
  cursor: pointer;
}
#LGloginbtn:hover {
  color: #888;
}

And go to ACP>>Modules>>HTML Management

Paste this code:

Code:

<div id="LGoverlay" onclick="LGlogin()" style="display:none"></div>
<div id="LGloginbtn" onclick="LGlogin();">Log In</div>
<div id="LGlogin" style="display:none">
  <img src="http://2img.net/i/fa/empty.gif" class="closebutton" width="20px" height="20px" onclick="LGlogin();"/>
  <h1>Log In</h1>
  <form action="/login.forum" method="post">
    <ul>
      <li><label for="username">Username</label></li>
      <li><input type="text" name="username" size="25" /></li>
      <li><label for="password">Password</label></li>
      <li><input type="password" name="password" size="25" /></li>
      <li>Remember me?</li>
      <li><input type="checkbox" name="autologin" checked="checked" /></li>
    </ul>
    <div style="clear:left"></div>
    <input type="submit" class="login-submit" name="login" value="Log in" />
    <input name="redirect" type="hidden" value="">
  </form>
</div>

and go to ACP>>Modules>>Javascript Management

Tick "In All Pages",then paste this code:

Code:

function LGlogin() {
  var x = document.getElementById('LGlogin'); 
  if (x.style.display == 'none') {
      jQuery(x).add('#LGoverlay').fadeIn('slow');
      var r = x.getElementsByTagName('form')[0].redirect;
      r.value = window.location.href;
  }
  else {
      jQuery(x).add('#LGoverlay').fadeOut('slow');
  }
}
jQuery(function(){ if(document.getElementById('logout')) document.getElementById('LGloginbtn').style.display = 'none'; });


Thank you very much

Hello, rhe above code is not working

Xflint wrote:Hello, rhe above code is not working

Hhmm...That's weird....Can you provide me your forum link,and a test account?

my site url: http://www.favouriteforum.com/

Oooh i understand

Ok,so,go to ACP>>Display>>Templates>>General>>index_body

Copy the code of the template,and paste it with this code:

Code:

{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
  <ul>
        <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
        <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
      <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
      <li><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
  </ul>
  <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
  <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->
<!-- BEGIN message_admin_index -->
<div class="main">
  <!-- BEGIN message_admin_titre -->
  <div class="main-head">
      <h1 class="page-title">{message_admin_index.message_admin_titre.MES_TITRE}</h1>
  </div>
  <!-- END message_admin_titre -->
  <!-- BEGIN message_admin_txt -->
  <div id="pun-announcement">
      <p>{message_admin_index.message_admin_txt.MES_TXT}</p>
  </div>
  <!-- END message_admin_txt -->
</div>
<!-- END message_admin_index -->
<!-- BEGIN switch_user_login_form_header -->
<div class="main">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
  <div class="user_login_form main-box center">
      <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username" /></label> 
      <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password" /></label> 
      <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> 
      {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
      <!-- BEGIN switch_fb_connect -->
      <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
      <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
      <!-- END switch_fb_connect -->
  </div>
</form>
</div>
<!-- END switch_user_login_form_header -->
{CHATBOX_TOP}
{BOARD_INDEX}
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
  <div id='board_stats'>     
     
        <li>
            <span class='value'><span class="FORUMCOUNTPOST"></span></span>
            Total Posts
        </li>
        <li>
            <span class='value'><span class="FORUMCOUNTOPIC"></span></span>
            Total Threads
        </li>
                        <li>
            <span class='value'><span class="FORUMCOUNTUSER"></span></span>
            Total Members
        </li>
        <li>
            <span class="value"><span class="FORUMLASTUSERLINK"></span></span>
            Newest Member
        </li>
        <li>
            <span class='value'><span class="FORUMONLINEUSER"></span></span>
            Most Online
        </li>
     
  </div>
<!-- BEGIN disable_viewonline -->
<div id='board_statistics' class='statistics clearfix'>
        <img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" />
        <p class="right">
            <!-- BEGIN switch_viewonline_link -->
            <a href="/search?search_id=activetopics">Today's active topics</a> <a href="/memberlist?mode=today_posters">Today's top 20 posters</a> <a href="/memberlist?mode=overall_posters">Overall top 20 posters</a> <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
            <!-- END switch_viewonline_link -->
            <!-- BEGIN switch_viewonline_nolink -->
            {L_WHO_IS_ONLINE}
            <!-- END switch_viewonline_nolink -->
        </p>
        <p>{TOTAL_USERS_ONLINE}<br />
        {RECORD_USERS}
        <br />
        {LOGGED_IN_USER_LIST}
        {L_ONLINE_USERS}
        {L_CONNECTED_MEMBERS}<br />
        {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
        <div class="clear"></div>
        <p>{LEGEND} : {GROUP_LEGEND}</p>
      <!-- BEGIN switch_chatbox_activate -->
      <div id="onlinechat">
        <p class="page-bottom">
        {TOTAL_CHATTERS_ONLINE} :
        {CHATTERS_LIST}<br />
        <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
            <script type="text/javascript">
              insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
            </script>
        <!-- END switch_chatbox_popup -->
        </p>
      </div>
      <!-- END switch_chatbox_activate -->
</div>
<!-- END disable_viewonline -->
<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
  <div class="user_login_form main-box center">
      <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username"/></label> 
      <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password"/></label> 
      <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> 
      {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
      <!-- BEGIN switch_fb_connect -->
      <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
      <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
      <!-- END switch_fb_connect -->
  </div>
</form>
<!-- END switch_user_login_form_footer -->
{CHATBOX_BOTTOM}
<!-- BEGIN switch_legend -->
<ul id="pun-legend">
  <li>
      <img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /> {L_NEW_POSTS}
      <img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /> {L_NO_NEW_POSTS}
      <img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /> {L_FORUM_LOCKED}
  </li>
</ul>
<!-- END switch_legend -->
{AUTO_DST}
<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
  appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
    status: true,
    cookie: true,
    xfbml: true,
  oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->

Paste the old code at your notepad

Thank you Hope this help you a little bit

Hhm..That's odd...Well,i'm already tried to modified the template,and tried to write something like HTML,jQuery,CSS,Javascript,and others..But still no code are working...I think we have to wait the forum administrator to answer this question...

Topic Archived!

Hey there Xflint, sorry to tell this but your topic is archived because this topic is not answered for 1 year long. We're so sorry to tell this.

Locked.