Choose from our various pricing plans. There is a package for everyone!


How to add slide Log In panel

Page 1 of 2 1, 2  Next

View previous topic View next topic Go down

Tutorial How to add slide Log In panel

Post by Th1nK on Wed Sep 05, 2012 4:48 pm

Hello,
today I will show you how to add log in panel like here:
DEMO
You can download the files from HERE
BACKUP YOUR OVERALL_HEADER BEFORE START!
To install it in your forum, got to your templates and open overall_header
. Note:
If you want to be visible only for guests, paste the code betweeen
Code:
<!-- END switch_user_logged_out -->
tags.
STEP#1:
Here is the full code, just paste it and edit the links:
Code:

<<div id="toppanel">
 <div id="panel">
 <div class="content clearfix">
 <div class="left">
 <h1>Welcome to Web-Kreation</h1>
 <h2>Sliding login panel Demo with jQuery</h2>
<p class="grey">You can put anything you want in this sliding panel: videos, audio, images, forms... The only limit is your imagination!</p>
 <h2>Download</h2>
 <p class="grey">To download this script go back to <a href="http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery" title="Download">article »</a></p>
 </div>
 <div class="left">
 <!-- Login Form -->
 <form class="clearfix" action="#" method="post">
 <h1>Member Login</h1>
 <label class="grey" for="log">Username:</label>
 <input class="field" type="text" name="log" id="log" value="" size="23" />
 <label class="grey" for="pwd">Password:</label>
 <input class="field" type="password" name="pwd" id="pwd" size="23" />
             <label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" />  Remember me</label>
         <div class="clear"></div>
 <input type="submit" name="submit" value="Login" class="bt_login" />
 <a class="lost-pwd" href="#">Lost your password?</a>
 </form>
 </div>
 <div class="left right">
<!-- Register Form -->
 <form action="#" method="post">
 <h1>Not a member yet? Sign Up!</h1>
<label class="grey" for="signup">Username:</label>
 <input class="field" type="text" name="signup" id="signup" value="" size="23" />
 <label class="grey" for="email">Email:</label>
 <input class="field" type="text" name="email" id="email" size="23" />
 <label>A password will be e-mailed to you.</label>
 <input type="submit" name="submit" value="Register" class="bt_register" />
 </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">&nbsp;</li>
 </ul>
</div> <!-- / top -->
 
</div> <!--panel -->

Save and publish.
STEP#2
Add the CSS codes:
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

 Copyright 2009 Jeremie Tisseau
 "Sliding Login Panel with jQuery 1.3.2" is distributed under the GNU General Public License version 3:
 http://www.gnu.org/licenses/gpl-3.0.html
*/

/***** 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(../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(../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(../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(../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(../images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(../images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(../images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(../images/bt_close.png) no-repeat left -19px;}

/* sliding panel */
#toppanel {
    position: absolute;   /*Panel will overlap  content */
    /*position: relative;*/   /*Panel will "push" the content down */
    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(../images/bt_login.png) no-repeat 0 0;
}

#panel .content input.bt_register {
 width: 94px;
 color: white;
 background: transparent url(../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:
Code:
/*
Name: Sliding Login Panel with jQuery 1.3.2
Author: Jeremie Tisseau
Author URI: http://web-kreation.com/
Script URI: http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/
Date: March 26, 2009
Version: 1.0

 Copyright 2009 Jeremie Tisseau
 "Sliding Login Panel with jQuery 1.3.2" is distributed under the GNU General Public License version 3:
 http://www.gnu.org/licenses/gpl-3.0.html

*/      

html, body {border: 0; margin: 0; padding: 0;}

body {
   font: 85%/0.9 arial, helvetica, sans-serif;
 background: #99A989 url(../images/bg.jpg) repeat 0 0;
   line-height: 130%;
   width: 100%;
   min-width: 970px;
   color: black;
}

a {
 color: #0099CC;
 text-decoration: none;
}

a:hover {
 color: #00CCFF;
}

a img {
  border: none;/*remove border for linked images*/
}

h1 {
 font-size: 1.6em;
 height: 20px;
 padding-top: 0;
}

h2{
 font-size: 1.2em;
 height: 20px;
 padding-top: 0;
}

.highlight {background-color:#FF9D9D;border-bottom:#F30 1px solid;border-top:#F30 1px solid;padding: 4px 10px}

/***** Main Layout ****/
#container {
   width: 100%;
   height: 100%;
   text-align: center;/* IE fix to center the page */
}

#content {
   width: 740px;
   margin: 0 auto;/* center the page in Firefox */
   text-align: left;
 padding: 20px;
}
You wii see where to upload the images (Download the script from the site i give you)
Save.
STEP#3
Upload the images and replace them in the CSS Codes and change the links in the codes in overall_header.
If you have questions ask me!
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by Leo on Thu Sep 06, 2012 1:29 am

I'm gonna try this code. I've seen this used on other boards, will this work on Forumotion?
avatar
Leo
Member
Member

Age : 20
Posts : 196
Join date : 2012-07-10
Reputation : 4

View user profile

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by Nathan Adhitya on Thu Sep 06, 2012 6:46 am

Sure it work on blaanyway it's not my forum there o.O
Avoid advertising!
Edited by Th1nK!
avatar
Nathan Adhitya
Member
Member

Age : 17
Posts : 35
Join date : 2012-07-08
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by Th1nK on Thu Sep 06, 2012 8:59 am

Yes, this work on FM.
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by Leo on Fri Sep 07, 2012 1:39 am

I can't find this in the overall header

Code:
<!-- END switch_user_logged_out -->
avatar
Leo
Member
Member

Age : 20
Posts : 196
Join date : 2012-07-10
Reputation : 4

View user profile

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by Th1nK on Fri Sep 07, 2012 5:04 pm

Your forum version?
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by Leo on Fri Sep 07, 2012 9:40 pm

@Th1nK wrote:Your forum version?

My forum version is PunBB
avatar
Leo
Member
Member

Age : 20
Posts : 196
Join date : 2012-07-10
Reputation : 4

View user profile

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by Th1nK on Sat Sep 08, 2012 1:11 pm

Post your overall_header here!
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by Leo on Sat Sep 08, 2012 7:45 pm

[quote="Th1nK"]Post your overall_header here![/quote

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 width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});

            if (width_max > 0)
            {
                $('#fa_ticker_content').css('display','block');

                $('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).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);
                  }
                });

                if (slid_vert)
                {
                  var height_max = h_perso;

                  $('ul#fa_ticker_content li').each( function () {
                      if ($(this).height() > height_max)
                      {
                        height_max = $(this).height();
                      }
                  } );

                  $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
                  $('ul#fa_ticker_content li').height(height_max);
                }

                $('#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 = false, 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"]);

        (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>
      <!-- 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" class="module main">
          <div id="login_popup_title" class="main-head">
            <div class="h3">{SITENAME}</div>
          </div>
          <div class="main-content">
            {LOGIN_POPUP_MSG}
            <div id="login_popup_buttons">
                <form action="{S_LOGIN_ACTION}" method="get">
                  <input type="submit" class="button2" value="{L_LOGIN}" />
                  <input type="button" class="button2" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                  <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
                </form>
            </div>
          </div>
      </div>
      <!-- END switch_login_popup -->

      <a id="top" name="top" accesskey="t"></a>

      <div class="minwidth_IE">
          <div class="layout_IE">
            <div class="container_IE">
                              <div id="pun_out">
                                <div class="pun">
                  <div id="pun-intro" class="clearfix">
                      <a href="{U_INDEX}" id="pun-logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>

                      <!-- BEGIN switch_h1 -->
                      <div id="pun-title">{switch_h1.MAIN_SITENAME}</div>
                      <!-- END switch_h1 -->

                      <!-- BEGIN switch_desc -->
                      <p id="pun-desc">{switch_desc.SITE_DESCRIPTION}</p>
                      <!-- END switch_desc -->
                  </div>
                  <div id="pun-head">
                      <div id="pun-navlinks">
                        <ul class="clearfix">
                            <li>{GENERATED_NAV_BAR}</li>
                        </ul>
                      </div>
                  </div>
                        <div id='search' class='right'>
      <form id="search-box" method="post" action="/search">

            <label for='main_search' class='hide'>Search</label>
            <a href='/search' title='Advanced Search' accesskey='4' rel="search" id='adv_search' class='right'>Advanced</a>
            <span id='search_wrap' class='right'>
            <input type="text" tabindex="6" size="17" class="" name="search_keywords" id="main_search" placeholder="Search...">
            <input type='submit' class='submit_input clickable' value='Search' />
            </span>
      </form>
    </div>

                  <!-- BEGIN switch_ticker_new -->
                  <div id="fa_ticker_block" style="padding-top:4px;">
                      <div class="module main">
                        <div class="main-content clearfix">
                            <div id="fa_ticker_container">
                              <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display: none;width: 100%;">
                                  <!-- BEGIN ticker_row -->
                                  <li>{switch_ticker.ticker_row.ELEMENT}</li>
                                  <!-- END ticker_row -->
                              </ul>
                            </div>
                        </div>
                      </div>
                  </div>
                  <!-- END switch_ticker_new -->

                  <!-- BEGIN switch_ticker -->
                  <div id="fa_ticker_block" style="padding-top:4px;">
                      <div class="module main">
                        <div class="main-content clearfix">
                            <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>
                        </div>
                      </div>
                  </div>
                  <!-- END switch_ticker -->

                  <div id="page-body">
                      <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                        <div id="outer-wrapper">
                            <div id="wrapper">
                              <div id="container">
                                  <div id="content">
                                    <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>
                                    <div id="main">
                                        <div id="main-content">

    <!-- BEGIN html_validation -->
                                        </div>
                                    </div>
                                  </div>
                              </div>
                            </div>
                        </div>
                      </div>
                  </div>
                </div>
            </div>
          </div>
      </div>
    </body>
    </html>
    <!-- END html_validation -->
                     
avatar
Leo
Member
Member

Age : 20
Posts : 196
Join date : 2012-07-10
Reputation : 4

View user profile

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by BlackNite on Sun Sep 16, 2012 1:56 pm

I cant find
Code:
<!-- END switch_user_logged_out -->
forum version is PUNBB
avatar
BlackNite
Member
Member

Posts : 86
Join date : 2012-04-07
Reputation : 4

View user profile http://designforums.forumtl.com/

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by Th1nK on Sun Sep 16, 2012 4:03 pm

Paste your Template here.
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by Leo on Sun Sep 16, 2012 4:36 pm

I posted my overall header but you didn't respond?
avatar
Leo
Member
Member

Age : 20
Posts : 196
Join date : 2012-07-10
Reputation : 4

View user profile

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by Th1nK on Sun Sep 16, 2012 5:39 pm

Oh, sorry, this post wasn't for here. Add this:
Code:
<!-- END switch_user_logged_out -->
whenever you want and paste the codes there. You haven't that in your template, me too. Add it and your slide log in will be visible only for guests to log in!
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by Leo on Sun Sep 16, 2012 10:12 pm

Can you provide me with the full code for the overall_header?
I'm confused and it gave me an error.
avatar
Leo
Member
Member

Age : 20
Posts : 196
Join date : 2012-07-10
Reputation : 4

View user profile

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by kazmok on Mon Sep 24, 2012 6:04 am

I have followed this exact tutorial,
but I have two problems

http://ingenmarket.forummotions.com/


How do I link my Log In / Register button?

and

when im loading my page, i usually get this image, is there a way to get rid of it?
avatar
kazmok
Member
Member

Age : 24
Posts : 9
Join date : 2012-09-13
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by Th1nK on Mon Sep 24, 2012 7:26 pm

kazmok,
everything works fine for me. In the picture you give me I can't see the CSS code.
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by kazmok on Mon Sep 24, 2012 11:17 pm

@Th1nK wrote:kazmok,
everything works fine for me. In the picture you give me I can't see the CSS code.



it is okay,
http://help.forumotion.com/t115188-ugly-loading-webpage-problem#753286

I got it fixed from DarkGlow, everything works perfectly now, appreciate your concern, and keep up the good work mate.

BTW, do you know how to delete this login?
avatar
kazmok
Member
Member

Age : 24
Posts : 9
Join date : 2012-09-13
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by ÆDesign on Tue Sep 25, 2012 3:52 am

Nice tutorial!
avatar
ÆDesign
Member
Member

Age : 19
Posts : 1
Join date : 2012-09-22
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by J0k3R^ on Thu Apr 25, 2013 4:44 pm

Im using PunBB too. the code
Code:
<!-- END switch_user_logged_out -->
is on Index_Body. The Tutorial is perfect, great job i installed it in my forum Smile
avatar
J0k3R^
Member
Member

Age : 24
Posts : 25
Join date : 2013-04-25
Forum Version : PunBB
Reputation : 1

View user profile http://fmplanet.forumgreek.com/

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by Mati™ on Thu Apr 25, 2013 4:46 pm

Glad you like it J0k3R^! Smile
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by J0k3R^ on Thu Apr 25, 2013 4:53 pm

just a question man. i followed the tutorial step-by-step, it looks nice in my forum but it doesnt open the slide panel. when i press it my adrss goes ".com/#". u know how kazmok did it to work perfect? i just visited his forum.
avatar
J0k3R^
Member
Member

Age : 24
Posts : 25
Join date : 2013-04-25
Forum Version : PunBB
Reputation : 1

View user profile http://fmplanet.forumgreek.com/

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by Mati™ on Thu Apr 25, 2013 4:59 pm

Please provide your forum URL ?
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by J0k3R^ on Thu Apr 25, 2013 5:03 pm

no reason now, i turned off the JS codes and backed up my Templates.
In first post, it says replace the links but what links to put in? this is a live menu no links needed, im confused blink
avatar
J0k3R^
Member
Member

Age : 24
Posts : 25
Join date : 2013-04-25
Forum Version : PunBB
Reputation : 1

View user profile http://fmplanet.forumgreek.com/

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by Th1nK on Fri Apr 26, 2013 8:00 pm

OK listen now. Here is the ready code from my forum. DEMO of this code
Code:
 <!-- Login --><div id="toppanel">
      <div id="panel">
          <div class="content clearfix">
            <div class="left">
                <h1>YOUR TITLE HERE</h1>
                <h2>Second title here</h2>     
                <p class="grey">Please Login or Register now!</p>
                <h2>Benefits of Registering?</h2>
                <p class="grey">You will get unlimited access to the forums, TEXT TEXT TEXT TEXT TEXT TEXT TEXT</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="/forum"></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="/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 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 -->
You can use this ready code. Paste it in your overall_header and tell me if it is working.
avatar
Th1nK
Administrator
Administrator

Posts : 468
Join date : 2012-04-06
Reputation : 43

View user profile http://www.csshelp.net

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by J0k3R^ on Mon Apr 29, 2013 5:32 pm

didnt work Sad
avatar
J0k3R^
Member
Member

Age : 24
Posts : 25
Join date : 2013-04-25
Forum Version : PunBB
Reputation : 1

View user profile http://fmplanet.forumgreek.com/

Back to top Go down

Tutorial Re: How to add slide Log In panel

Post by Sponsored content


Sponsored content


Back to top Go down

Page 1 of 2 1, 2  Next

View previous topic View next topic Back to top


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