The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Sliding login panel

View previous topic View next topic Go down

Sliding login panel

Post by iamzildjian on August 28th 2012, 5:10 am

Any tutorial for this? www.xcodezz.com/h26-log-in-slide# my forum version is phpbb2. thanks

iamzildjian
Forumember

Male Posts : 154
Reputation : 1
Language : english

http://www.ragemu.forumtl.com

Back to top Go down

Re: Sliding login panel

Post by iamzildjian on August 29th 2012, 5:04 pm

i follow the tutorial but i cant find the <body> from overall header. my forum version is phpbb2

iamzildjian
Forumember

Male Posts : 154
Reputation : 1
Language : english

http://www.ragemu.forumtl.com

Back to top Go down

Re: Sliding login panel

Post by DarkGlow on August 29th 2012, 5:16 pm

It's:

<body

Not <body>

DarkGlow
Forumember

Male Posts : 629
Reputation : 92
Language : English | Hebrew | Arabic
Location : Israel

Back to top Go down

Re: Sliding login panel

Post by DarkGlow on August 29th 2012, 5:24 pm

Rideem3 wrote:
@DarkGlow wrote:It's:

<body

Not <body>

What? The HTML tag for body is <body>, not <body .
In the template, he has to locate ''<body'', not actually ''<body>''. Because there are various stuff already written after <body.

DarkGlow
Forumember

Male Posts : 629
Reputation : 92
Language : English | Hebrew | Arabic
Location : Israel

Back to top Go down

Re: Sliding login panel

Post by DarkGlow on August 29th 2012, 5:29 pm

Rideem3 wrote:Nera said to find <body> Wink
It doesn't matter really, he needs to find the word <body> so that he can place content directly after that.

Correct, my friend, however that's what my template has, also another guy had the same Wink

DarkGlow
Forumember

Male Posts : 629
Reputation : 92
Language : English | Hebrew | Arabic
Location : Israel

Back to top Go down

Re: Sliding login panel

Post by iamzildjian on August 30th 2012, 3:21 pm

when i am trying to paste this code to my css there is an error
Code:
/*
Name: Sliding Login Panel with jQuery 1.3.2
Author: Jeremie Tisseau
Author URI: http://web-kreation.com/
Date: March 26, 2009
Version: 1.0
*/

/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}

/* Panel Tab/button */
.tab {
    background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/tab_b.png) repeat-x 0 0;
  height: 42px;
  position: relative;
    top: 0;
    z-index: 999;
}

.tab ul.login {
  display: block;
  position: relative;
    float: right;
    clear: right;
    height: 42px;
  width: auto;
    font-weight: bold;
  line-height: 42px;
  margin: 0;
  right: 150px;
    color: white;
    font-size: 80%;
  text-align: center;
}

.tab ul.login li.left {
    background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/tab_l.png) no-repeat left 0;
    height: 42px;
  width: 30px;
  padding: 0;
  margin: 0;
    display: block;
  float: left;
}

.tab ul.login li.right {
    background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/tab_r.png) no-repeat left 0;
    height: 42px;
  width: 30px;
  padding: 0;
  margin: 0;
    display: block;
  float: left;
}

.tab ul.login li {
    text-align: left;
    padding: 0 6px;
  display: block;
  float: left;
  height: 42px;
    background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/tab_m.png) repeat-x 0 0;
}

.tab ul.login li a {
  color: #15ADFF;
}

.tab ul.login li a:hover {
  color: white;
}

.tab .sep {color:#414141}

.tab a.open, .tab a.close {
  height: 20px;
  line-height: 20px !important;
  padding-left: 30px !important;
  cursor: pointer;
  display: block;
  width: 100px;
  position: relative;
  top: 11px;
}

.tab a.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_close.png) no-repeat left -19px;}

/* sliding panel */
#toppanel {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#panel {
  width: 100%;
  height: 270px;
  color: #999999;
  background: #272727;
  overflow: hidden;
  position: relative;
  z-index: 3;
  display: none;
}

#panel h1 {
  font-size: 1.6em;
  padding: 5px 0 10px;
  margin: 0;
  color: white;
}

#panel h2{
  font-size: 1.2em;
  padding: 10px 0 5px;
  margin: 0;
  color: white;
}

#panel p {
  margin: 5px 0;
  padding: 0;
}

#panel a {
  text-decoration: none;
  color: #15ADFF;
}

#panel a:hover {
  color: white;
}

#panel a-lost-pwd {
  display: block;
  float: left;
}

#panel .content {
  width: 960px;
  margin: 0 auto;
  padding-top: 15px;
  text-align: left;
  font-size: 0.85em;
}

#panel .content .left {
  width: 280px;
  float: left;
  padding: 0 15px;
  border-left: 1px solid #333;
}

#panel .content .right {
  border-right: 1px solid #333;
}

#panel .content form {
  margin: 0 0 10px 0;
}

#panel .content label {
  float: left;
  padding-top: 8px;
  clear: both;
  width: 280px;
  display: block;
}

#panel .content input.field {
  border: 1px #1A1A1A solid;
  background: #414141;
  margin-right: 5px;
  margin-top: 4px;
  width: 200px;
  color: white;
  height: 16px;
}

#panel .content input:focus.field {
  background: #545454;
}

/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
  display: block;
  float: left;
  clear: left;
  height: 24px;
  text-align: center;
  cursor: pointer;
  border: none;
  font-weight: bold;
  margin: 10px 0;
}

#panel .content input.bt_login {
  width: 74px;
  background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_login.png) no-repeat 0 0;
}

#panel .content input.bt_register {
  width: 94px;
  color: white;
  background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery//images/bt_register.png) no-repeat 0 0;
}

#panel .lost-pwd {
  display: block;
  float:left;
  clear: right;
  padding: 15px 5px 0;
  font-size: 0.95em;
  text-decoration: underline;
}





and this is my over all header

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

   <!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {
         var w_cont = $('#fa_ticker_container').width();

         if (w_cont > 0)
         {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">//<![CDATA[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         pm.focus();
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         report.focus();
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

   <a name="top"></a>
   {JAVASCRIPT}

   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br /> </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>

            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>

            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                     <tbody>
                        <tr>
                           <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
</body>
</html>
<!-- END html_validation -->

can you please help me where should i start and where to replace the code?

iamzildjian
Forumember

Male Posts : 154
Reputation : 1
Language : english

http://www.ragemu.forumtl.com

Back to top Go down

Re: Sliding login panel

Post by xDroiidx on August 30th 2012, 3:46 pm

Hello please post your CSS

xDroiidx
Forumember

Posts : 95
Reputation : 2
Language : English

http://www.epicstep.forumotion.com

Back to top Go down

Re: Sliding login panel

Post by iamzildjian on August 30th 2012, 6:10 pm

Wait before that, where should i insert the first code? nera said just find <body> or <body but which part? i already posted my overall header. help me sir

iamzildjian
Forumember

Male Posts : 154
Reputation : 1
Language : english

http://www.ragemu.forumtl.com

Back to top Go down

Re: Sliding login panel

Post by iamzildjian on September 1st 2012, 7:10 am

Bump!!!!!!!!!!!!!!!

iamzildjian
Forumember

Male Posts : 154
Reputation : 1
Language : english

http://www.ragemu.forumtl.com

Back to top Go down

Re: Sliding login panel

Post by DarkGlow on September 1st 2012, 2:39 pm

remove the CSS you used and put this instead:

Code:

/*
Name: Sliding Login Panel with jQuery 1.3.2
Author: Jeremie Tisseau
Author URI: http://web-kreation.com/
Date: March 26, 2009
Version: 1.0
*/

/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}

/* Panel Tab/button */
.tab {
    background: url(http://i49.tinypic.com/19bg4o.png) repeat-x 0 0;
  height: 42px;
  position: relative;
    top: 0;
    z-index: 999;
}

.tab ul.login {
  display: block;
  position: relative;
    float: right;
    clear: right;
    height: 42px;
  width: auto;
    font-weight: bold;
  line-height: 42px;
  margin: 0;
  right: 150px;
    color: white;
    font-size: 80%;
  text-align: center;
}

.tab ul.login li.left {
    background: url(http://i50.tinypic.com/2llk56p.png) no-repeat left 0;
    height: 42px;
  width: 30px;
  padding: 0;
  margin: 0;
    display: block;
  float: left;
}

.tab ul.login li.right {
    background: url(http://i49.tinypic.com/35j9t84.png) no-repeat left 0;
    height: 42px;
  width: 30px;
  padding: 0;
  margin: 0;
    display: block;
  float: left;
}

.tab ul.login li {
    text-align: left;
    padding: 0 6px;
  display: block;
  float: left;
  height: 42px;
    background: url(http://i47.tinypic.com/ip8g2f.png) repeat-x 0 0;
}

.tab ul.login li a {
  color: #15ADFF;
}

.tab ul.login li a:hover {
  color: white;
}

.tab .sep {color:#414141}

.tab a.open, .tab a.close {
  height: 20px;
  line-height: 20px !important;
  padding-left: 30px !important;
  cursor: pointer;
  display: block;
  width: 100px;
  position: relative;
  top: 11px;
}

.tab a.open {background: url(http://i48.tinypic.com/30w3w5z.png) no-repeat left 0;}
.tab a.close {background: url(http://i47.tinypic.com/2nlw7z4.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://i48.tinypic.com/30w3w5z.jpg) no-repeat left -19px;}
.tab a:hover.close {background: url(http://i47.tinypic.com/2nlw7z4.jpg) no-repeat left -19px;}

/* sliding panel */
#toppanel {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#panel {
  width: 100%;
  height: 270px;
  color: #999999;
  background: #272727;
  overflow: hidden;
  position: relative;
  z-index: 3;
  display: none;
}

#panel h1 {
  font-size: 1.6em;
  padding: 5px 0 10px;
  margin: 0;
  color: white;
}

#panel h2{
  font-size: 1.2em;
  padding: 10px 0 5px;
  margin: 0;
  color: white;
}

#panel p {
  margin: 5px 0;
  padding: 0;
}

#panel a {
  text-decoration: none;
  color: #15ADFF;
}

#panel a:hover {
  color: white;
}

#panel a-lost-pwd {
  display: block;
  float: left;
}

#panel .content {
  width: 960px;
  margin: 0 auto;
  padding-top: 15px;
  text-align: left;
  font-size: 0.85em;
}

#panel .content .left {
  width: 280px;
  float: left;
  padding: 0 15px;
  border-left: 1px solid #333;
}

#panel .content .right {
  border-right: 1px solid #333;
}

#panel .content form {
  margin: 0 0 10px 0;
}

#panel .content label {
  float: left;
  padding-top: 8px;
  clear: both;
  width: 280px;
  display: block;
}

#panel .content input.field {
  border: 1px #1A1A1A solid;
  background: #414141;
  margin-right: 5px;
  margin-top: 4px;
  width: 200px;
  color: white;
  height: 16px;
}

#panel .content input:focus.field {
  background: #545454;
}

/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
  display: block;
  float: left;
  clear: left;
  height: 24px;
  text-align: center;
  cursor: pointer;
  border: none;
  font-weight: bold;
  margin: 10px 0;
}

#panel .content input.bt_login {
  width: 74px;
  background: transparent url(http://i49.tinypic.com/bh9g2.png) no-repeat 0 0;
}

#panel .content input.bt_register {
  width: 94px;
  color: white;
  background: transparent url(http://i47.tinypic.com/23r0okn.png) no-repeat 0 0;
}

#panel .lost-pwd {
  display: block;
  float:left;
  clear: right;
  padding: 15px 5px 0;
  font-size: 0.95em;
  text-decoration: underline;
}

DarkGlow
Forumember

Male Posts : 629
Reputation : 92
Language : English | Hebrew | Arabic
Location : Israel

Back to top Go down

Re: Sliding login panel

Post by iamzildjian on September 1st 2012, 4:45 pm

Css code is now working but how about the first code? i mean the overall header?where should i put that code. look at my overall head code above. help me sir darkglow

iamzildjian
Forumember

Male Posts : 154
Reputation : 1
Language : english

http://www.ragemu.forumtl.com

Back to top Go down

Re: Sliding login panel

Post by DarkGlow on September 1st 2012, 6:48 pm

Go to your administration panel, click on the advanced mode.

Do you know where your templates are at?

1) ACP.
2) Advanced mode.
3) Display tab.
4) Templates box > General.
5) Overall_header.
6) Type ''<body" in the search bar above.
7) After you've located it, add the code after "<body". Press ENTER then add the code.
Cool Save.
9) Go back to your templates page (in general once again) and hit Add to publish your template.

DarkGlow
Forumember

Male Posts : 629
Reputation : 92
Language : English | Hebrew | Arabic
Location : Israel

Back to top Go down

Re: Sliding login panel

Post by iamzildjian on September 2nd 2012, 3:23 pm

i already logged in but still my log in control panel look like this >

iamzildjian
Forumember

Male Posts : 154
Reputation : 1
Language : english

http://www.ragemu.forumtl.com

Back to top Go down

Re: Sliding login panel

Post by DarkGlow on September 2nd 2012, 4:33 pm

You have to ''hide'' it for registered users and display it for guests only by inserting your code you copied in the overall_header between the following triggers:

Code:
<!-- BEGIN switch_user_logged_out -->
CODE HERE
<!-- END switch_user_logged_out -->

DarkGlow
Forumember

Male Posts : 629
Reputation : 92
Language : English | Hebrew | Arabic
Location : Israel

Back to top Go down

Re: Sliding login panel

Post by iamzildjian on September 2nd 2012, 10:08 pm

from which part of my overall header should i put that code?

iamzildjian
Forumember

Male Posts : 154
Reputation : 1
Language : english

http://www.ragemu.forumtl.com

Back to top Go down

Re: Sliding login panel

Post by DarkGlow on September 3rd 2012, 3:45 pm

@iamzildjian wrote:from which part of my overall header should i put that code?

Copy the code you used in the overall_header template between the triggers.

Do not create a double, wherever you've posted that code in your overall header (which has to be after <body), put the first trigger before it, and the second trigger after it.

DarkGlow
Forumember

Male Posts : 629
Reputation : 92
Language : English | Hebrew | Arabic
Location : Israel

Back to top Go down

Re: Sliding login panel

Post by nextlevelgaming on September 3rd 2012, 3:54 pm

You need to post your code that you are trying to use here

Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
You see how
Code:
<body
is not closed right away? so don't search <body> search <body I'm not sure what is confusing ya, no offense, just stating that I myself can only show you where that section is, other than that you are on your own, PS i haven't looked at the tutorial so I just know where that is

nextlevelgaming
Forumember

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

Re: Sliding login panel

Post by iamzildjian on September 3rd 2012, 3:57 pm

can u insert this code
Code:
<!-- BEGIN switch_user_logged_out -->
CODE HERE
<!-- END switch_user_logged_out -->
to my new overall header with sliding log in
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

   <!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {
         var w_cont = $('#fa_ticker_container').width();

         if (w_cont > 0)
         {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">//<![CDATA[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         pm.focus();
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         report.focus();
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
</head>
<body
  <!-- Login --><div id="toppanel">
  <div id="panel">
      <div class="content clearfix">
        <div class="left">
            <h1>Welcome to Hax Activity</h1>
            <h2>The Home of facebook hacks and other online games hack</h2>     
            <p class="grey">Please Login or Register now! thank you</p>
            <h2>Benefits of Registering?</h2>
            <p class="grey">You will get unlimited access to the forums, You will get to see the codes section when ever you want, and you get to chat with other members, and our site is #1 for leaking codes</p>
        </div>
        <div class="left">
            <center><h1>Login</h1></center>
<form class="c3" action="/login.forum" method="post">
<table class="c2" border="0" cellpadding="3" cellspacing="1">
<tbody>
<tr>
<td align="right" width="45%">Username:</td>
<td><input name="username" size="25" maxlength="40" class="c1" type="text"></td>
</tr>
<tr>
<td align="right">Password:</td>
<td><input name="password" size="25" maxlength="32" class="c1" type="password"></td>
</tr>
<tr align="center">
<td colspan="2">Log me on automatically each visit: <input name="autologin" checked="true" type="checkbox"></td>
</tr>
<tr align="center">
<td colspan="2"><input class="mainoption" name="login" value="Log in" type="submit"> <input name="redirect" type="hidden" value="/h1-redirect-page"></td>
</tr>
</tbody>
</table>
</form>
        </div>
        <div class="left right">
            <form action="#" method="post">
              <h1>Not a member yet? Register!</h1> 
<br>       
              <center><a href="http://haxactivity.forum.com.bz/register">Click here to Register now!</a></center>
                                    <center> You will be Redirected to the Login Page</center>

            </form>
        </div>
      </div>
  </div> <!-- /login --> 

    <!-- The tab on top --> 
  <div class="tab">
      <ul class="login">
          <li class="left"> </li>
          <li>Hello Using php in posts is called being a smart [Language]... Stop it!</li>
        <li class="sep">|</li>
        <li id="toggle">
            <a id="open" class="open" href="#">Log In | Register</a>
            <a id="close" style="display: none;" class="close" href="#">Close Panel</a>       
        </li>
          <li class="right"> </li>
      </ul>
  </div> <!-- / top -->
 
</div> <!--panel -->
  background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

   <a name="top"></a>
   {JAVASCRIPT}

   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br /> </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>

            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>

            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                     <tbody>
                        <tr>
                           <td valign="top" width="100%">
                              <div id="center">
                                <!-- BEGIN giefmod_index1 -->
                                {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                <!-- END giefmod_index1 -->
                              </div>
                          </td></tr><tr>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
</body>
</html>
<!-- END html_validation -->


can u edit my template?? i dont know what is trigger or etc Sad

iamzildjian
Forumember

Male Posts : 154
Reputation : 1
Language : english

http://www.ragemu.forumtl.com

Back to top Go down

Re: Sliding login panel

Post by DarkGlow on September 3rd 2012, 4:00 pm

Haha, not a problem.

Go to your overall_header, search ''<body".

Add this just right after <body:

Code:

<!-- BEGIN switch_user_logged_out -->
      <!-- Login --><div id="toppanel">
          <div id="panel">
              <div class="content clearfix">
                <div class="left">
                    <h1>Welcome to xCoDeZz</h1>
                    <h2>The Home of CSS, Wii, And PSP Codes</h2> 
                    <p class="grey">Please Login or Register now! thank you</p>
                    <h2>Benefits of Registering?</h2>
                    <p class="grey">You will get unlimited access to the forums, You will get to see the codes section when ever you want, and you get to chat with other members, We try our best, posting codes, quick and fast, so that you can enjoy your experience here @ xCoDeZz</p>
                </div>
                <div class="left">
                    <center><h1>Already a Member? Login Below</h1></center>
        <form action="/login.forum" method="post">
        <table border="0" cellpadding="3" cellspacing="1">
        <tbody>
        <p>
                <label for="username">Username: </label>
                          <input type="text" name="username" /><br>
                <label for="lastname">Password: </label>
                          <input type="password" name="password"><br>
        </p>
        <tr align="center">
          <br>
        <td colspan="2">Log me on automatically each visit: <input name="autologin" checked="true" type="checkbox"></td>
        </tr>
       
        <td colspan="2"><input class="mainoption" name="login" value="Log in" type="submit"> <input name="redirect" type="hidden" value="/h1-redirect-page"></td>
          <a href="http://www.xcodezz.com/profile?mode=sendpassword">Forgot Your Password?</a>
        </tbody>
        </table>
        </form>
                </div>
                <div class="left right">
                      <h1>Not a member yet? Register!</h1>
            <form action="/register?agreed=true&amp;step=2" method="post">
                <p>
                <label for="username">Username: </label>
                          <input type="text" name="username" /><br>
                <label for="lastname">Password: </label>
                          <input type="password" name="password"><br>
                <label for="email">E-mail: </label>
                          <input type="text" name="email"><br><br>
                <input type="submit" name="submit" id="submit" value="Save" />  <input type="reset" />
                </p>
            </form>
                </div>
              </div>
          </div> <!-- /login -->
    <!-- The tab on top -->
          <div class="tab">
              <ul class="login">
                  <li class="left"> </li>
                  <li>Hello Guest!</li>
                <li class="sep">|</li>
                <li id="toggle">
                    <a id="open" class="open" href="#">Log In | Register</a>
                    <a id="close" style="display: none;" class="close" href="#">Close Panel</a>   
                </li>
                  <li class="right"> </li>
              </ul>
          </div> <!-- / top -->
     
        </div> <!--panel -->
          <!-- END switch_user_logged_out -->

Do not forget to remove the code you got in your overall_header over there and replace it with the one I gave above or you'll mix up.

Those are called triggers, by the way:

Code:

<!-- BEGIN switch_user_logged_out -->
 <!-- END switch_user_logged_out -->

DarkGlow
Forumember

Male Posts : 629
Reputation : 92
Language : English | Hebrew | Arabic
Location : Israel

Back to top Go down

Re: Sliding login panel

Post by iamzildjian on September 3rd 2012, 4:30 pm

wow..thanks sir darkglow.. i owe you alot..i wont forget your name Smile thank you again..

iamzildjian
Forumember

Male Posts : 154
Reputation : 1
Language : english

http://www.ragemu.forumtl.com

Back to top Go down

Re: Sliding login panel

Post by DarkGlow on September 3rd 2012, 9:12 pm

Was my pleasure to assist.

DarkGlow
Forumember

Male Posts : 629
Reputation : 92
Language : English | Hebrew | Arabic
Location : Israel

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum