Aktualny czas: 22.02.2012, 19:53 Witaj!
Logowanie Rejestracja

Dyskusja (0)Zwijany Panel Logowania jquery
W headerinclude dodaj na końcu:
Kod PHP:
<!-- PNG FIX for IE6 -->
      <!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
    <!--[if lte IE 6]>
        <script type="text/javascript" src={$mybb->settings['bburl']}/jscripts/pngfix/supersleight-min.js"></script>
    <![endif]-->
     
    <!-- jQuery - the core -->
    <script src="{$mybb->settings['bburl']}/jscripts/jquery-1.3.2.min.js" type="text/javascript"></script>
    <!-- Sliding effect -->
    <script src="{$mybb->settings['bburl']}/jscripts/slide.js" type="text/javascript"></script> 
utwórz slide css:
Kod PHP:
/*
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;
} 


w header :
znajdź i usuń : {welcomblock}
dodaj na poczÄ…tku:
Kod PHP:
    <!-- Panel -->
<div id="toppanel">
    <div id="panel">
        <div class="content clearfix">
            <div class="left">
                <h1>Witamy na </h1>
                <h2>twoja treść(można usunąć)</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 &raquo;</a></p>
            </div>
            <div class="left">
                <!-- Login Form -->
<!-- Login Form -->

        {welcomblock}
            <div class="left right">            
                <!-- Register Form -->
                <form action="#" method="post">
                    <h1>Nie masz konta? Zarejestruj sie to proste</h1>                
                       <A href="{$mybb->settings['bburl']}/member.php?action=register">A by przejść do rejestracji kliknij tu</a>
                </form>
            </div>
        </div>
</div> <!-- /login -->    

    <!-- The tab on top -->    
    <div class="tab">
        <ul class="login">
        <li class="left">&nbsp;</li>
        <li>Witaj na ....</li>
        <li class="sep">|</li>
        <li id="toggle">
        <a id="open" class="open" href="#">Zaloguj | zarejestruj</a>
        <a id="close" style="display: none;" class="close" href="#">Zamknij Panel</a>            
        </li>
        <li class="right">&nbsp;</li>
        </ul>
    </div> <!-- / top -->
    
</div> <!--panel --> 

zawartość header_welcomeblock_guest zamień na:
Kod PHP:
        <form class="clearfix" action="member.php" method="post">
                    <h1>Member Login</h1><input type="hidden" name="action" value="do_login" />
                    <label class="grey" >Username:</label>
                    <input class="field" type="text"  name="username" title="{$lang->login_username}" value=""  size="23" />
                    <label class="grey" >Password:</label>
                    <input class="field" type="password" name="password" title="{$lang->login_password}"  size="23" />
                    <label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> &nbsp;ZapamiÄ™taj</label>
                    <div class="clear"></div>
                    <input type="submit" name="submit" value="Login" class="bt_login" />
                    <a class="lost-pwd" href="{$mybb->settings['bburl']}/member.php?action=lostpw">ZgubiÅ‚eÅ› hasÅ‚o?</
Możliwości
Ostatnia zmiana: 06.09.2011, 23:31
Ostatnie zmiany - Wszystkie - Kategorie

Powered by MyBB-Wiki, © 2006-2012 Dragon - Icons

Kontakt | Portal MyBB PL | Wróć do góry | Wróć do forów | Wersja bez grafiki | RSS