[FOORUM] Libisev sisselogimise paneel

Vaata eelmist teemat Vaata järgmist teemat Go down

Tonight
Tonight

[FOORUM] Libisev sisselogimise paneel Vetera11
Liitus : 19/02/2012
Postitusi : 17991

PostitamineTonight 06.10.12 1:07

NB! TÖÖTAB AINULT PHPBB2 JA PUNBB FOORUMITES!

See näeb välja SELLINE (kliki peale)!

1. Mine AP > Display > Templates > Overall_header ja leia ülesse
Kood:
<body>
Kohe selle järgi kleebi:
Kood:
    <!-- 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, 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="/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 -->
NB! See on inglisekeelne versioon. Soovitan tõlkida eesti keelde!
Salvesta see ning Publish, vajutades rohelisele ristile.

2. Mine AP > Display > Colors > CSS ja sisesta sinna see:
Kood:
    /*
    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;
    }

3. AP > Modules > Javascript codes management > Vaata, et on sees! > Create a new
☑ In all pages
Kood:
    $(document).ready(function(){$("#open").click(function(){$("div#panel").slideDown("slow");});$("#close").click(function(){$("div#panel").slideUp("slow");});$("#toggle a").click(function(){$("#toggle a").toggle();});});

----
Kõik asjad, mis sa tahad, et oleksid nähtavad ainult kasutajatele, pane sinna:
Kood:
<!-- BEGIN switch_user_logged_in -->
SIIA
<!-- END switch_user_logged_in -->
Kui see CSS keerab foorumi laiuse untsu, kustuta järgmine osa:
Kood:
    #content {
        margin: 0 auto;
        padding: 20px;
        text-align: left;
        width: 740px;
    }
Rechine
Rechine

Liitus : 07/06/2012
Postitusi : 2680

PostitamineRechine 06.10.12 1:32

PHPbb3'el võiks ka olla siis saaks siia foorumile ; )
Rechine
Rechine

Liitus : 07/06/2012
Postitusi : 2680

PostitamineRechine 15.10.12 22:12

Kodulehtedel töötab ka: http://supakas.kisakast.eu/
Näiteks lisasin oma mängule + Sain tervele mängule sellest aretada uue disaini ; )
Tonight
Tonight

[FOORUM] Libisev sisselogimise paneel Vetera11
Liitus : 19/02/2012
Postitusi : 17991

PostitamineTonight 15.10.12 22:27

Näeb väga kena välja :) (Sul väikesed kirjavead ka seal muidu)
Rechine
Rechine

Liitus : 07/06/2012
Postitusi : 2680

PostitamineRechine 15.10.12 23:28

Haigelt hea disain kaasnes sellega (Y) Aga kus kirjavead ? Ja aitaksid üldse parandada pisikesi vigu ? Ja värke ?
Tonight
Tonight

[FOORUM] Libisev sisselogimise paneel Vetera11
Liitus : 19/02/2012
Postitusi : 17991

PostitamineTonight 15.10.12 23:30

Sa saad hakata valgmaad mängima! -> Sa saad hakata Valgamaad mängima!
Siis näita seda sisse logides, või registreerudes! -> Või eest võta koma ära
Valgamaa paaris kohas veel väikese tähega ;)
Võin aidata küll, aga kahjuks täna ei viitsi eriti.
Alive
Alive

[FOORUM] Libisev sisselogimise paneel Vetera11
Liitus : 19/02/2012
Postitusi : 6118

PostitamineAlive 16.10.12 16:27

Suht hea näeb välja.

Vaata eelmist teemat Vaata järgmist teemat Tagasi üles

Soovid vestluses osaleda?

Selleks logi sisse või tee endale kasutaja.

Liitu foorumiga

Tee endale kasutaja ning osale aruteludes.


Tee uus kasutaja

Logi sisse

Omad foorumis juba kasutajat? Logi sisse.


Logi sisse

 
Permissions in this forum:
Sa ei saa vastata siinsetele teemadele