MyBBDepo - Türkiyenin MyBB Deposu Forumuna Hoşgeldiniz
Eğer sitemize yaptığınız ilk ziyaretiniz ise, lütfen öncelikle Forum Kurallarını okuyunuz. Forumumuzda bilgi alışverişinde bulunabilmeniz için Kayıt olmalısınız. Üye olmayanlar forumumuzdan yararlanamazlar.
Eğer zaten kayıtlı kullanıcı iseniz, lütfen kullanıcı adınız ve şifreniz ile, Giriş yapınız. (Sitemize üyelik ücretsizdir).
BlackCat avatar
Konuyu Oyla:
  • Derecelendirme: 5/5 - 1 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 5/5 - 1 oy

MyBB Temanıza Login Box Yapımı - Detaylı Anlatım


Sponsor Reklam
media venus

İzinli BlackCat
 Tarih: 15-08-2012, Saat:18:23
(Son Düzenleme: 01-01-2013, Saat:14:34, Düzenleyen: BlackCat.)
#1
*** BU KONU ORJİNAL KONUDUR. *** *** Resmi MyBB Sitesinden Kodlar Düzenlenerek Buraya Eklenmiştir ***

Selamün aleyküm diyerek konuyu açıyorum arkadaşlar. Biliyorumki artık tüm mybb kullanıcılarının gözdesi oldu login box. Girişe basınca çok şık bir açılışta arkayı karartarak giriş sayfası çıkıyor karşınıza. Bence de güzel bir modifikasyon. Bunu yapmakta sizin elinizde.

İsterseniz konuyu uzatmadan işlemlere başlayalım yavaştan.
Şimdi öncelikle admin paneline girmelisiniz. Bütün işimiz orada çünkü ;
index şablonunu açın <head> tagının hemen altına aşağıdaki kodu girin :
Kod:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
Bunu yapmamızın amacı jquery kodlarını çağırmak.
Altınada aşağıdaki kodu ekleyin ve burada işimizi biterelim.
Kod:
<script type="text/javascript">
/**
* Modal Boxes JS
*
* @author Euan T. <euan@euantor.com>
* @version 1.0.0
*/

jQuery.noConflict();

jQuery(document).ready(function($)
{
    // Make the jQuery modal login redirect you back to the page you're currently on //
    $('#loginModal input[name="url"]').attr("value", window.location);
    // /Login redirect //

    // Modal Boxes //
    $('a[name="modal"]').on('click', function(event)
    {
        event.preventDefault();
        
        var target = $(this).attr('rel');
        
        // Set up the shadowing
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        $('#mask').css({'width': maskWidth, 'height': maskHeight});
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow", 0.8);  
        
        // Position the actual modal
        var winH = $(window).height();
        var winW = $(window).width();
        $(target).css('top',  (winH / 2) - ($(target).height() / 2));
        $(target).css('left', (winW / 2) - ($(target).width() / 2));
        $(target).fadeIn(2000);
    });
    
    $('.modalBox a[rel="closeModal"]').on('click', function(event)
    {
        event.preventDefault();
        $('#mask, .modalBox').hide();
    });
    
    $('#mask').on('click', function ()
    {
        $(this).hide();
        $('.modalBox').hide();
    });
    // /Modal Boxes //
});
</script>
Kaydedip çıkalım. Merak etmeyin kodlarla fazla işimiz olmayacak Gülümseme

ve geldik artık login boxun en önemli kısmına. Şimdi header_welcomeblock_guest'e girelim ve tümünü bu kodlarla değişelim ;
Kod:
<div id="mask"></div>
Welcome guest! Please <a href="{$mybb->settings['bburl']}/member.php?action=login" name="modal" rel="#loginModal">{$lang->welcome_login}</a> or <a href="{$mybb->settings['bburl']}/member.php?action=register">{$lang->welcome_register}</a>
<div id="loginModal" class="modalBox loginModalBox">
    <div class="thead">
        Login at {$mybb->settings['bbname']}
    </div>
    <div class="modalContent loginModalContent">
        <form method="post" action="member.php">
            <table border="0" width="100%">
                <tr>
                    <td>
                        <label for="login_username">Username:</label>
                    </td>
                    <td>
                        <input type="text" value="" style="width: 200px;" maxlength="30" size="25" name="username" class="textbox" id="login_username" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="login_password">Password:</label>
                    </td>
                    <td>
                        <input type="password" value="" style="width: 200px;" size="25" name="password" class="textbox" id="login_password" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="smalltext" title="If ticked, your login details will be remembered on this computer, otherwise, you will be logged out as soon as you close your browser."><input type="checkbox" value="yes" checked="checked" name="remember" class="checkbox"> Remember?</label>
                    </td>
                    <td>
                        <input type="submit" value="Login" name="submit" class="button" />
                    </td>
                </tr>
            </table>
            <input type="hidden" value="do_login" name="action" />
            <input type="hidden" value="" name="url" />
        </form>
    </div>
</div>
Kaydettikten sonra son bir işlemimiz kaldı. Css yi eklemek. Temanızın gelişmiş css sine girin ve en aşağıya aşağıdaki kodu ekleyin.
Kod:
#mask {
    position: absolute;
    z-index: 9010;
    background-color: #000000;
    display: none;
    top: 0;
    left: 0;
}

.modalBox {
    position: fixed;
    width: 440px;
    display: none;
    z-index: 9015;
    background: #ffffff;
    border: 1px solid #000000;
    -webkit-box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.81);
    -moz-box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.81);
    box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.81);
}
    .modalBox .thead {
        font-weight: bold;
    }
    .modalBox .modalContent {
        padding: 5px 10px;
    }

Bu kadar anlatım yaptık. Bir resimsizde olmaz öyle değilmi Gülümseme Buyrun ekran görüntümüz
resim

Takıldıgınız bir yer olursa buradan sorabilirsiniz. İyi çalışmalar diliyorum.
BlackCat

Orjinal konu :
Kod:
http://community.mybb.com/thread-117646.html

Son Düzenleme : 15 Ağustos : 18.35
Cevapla
Sponsor Reklam
sponsor reklam sponsor reklam

Çevrimdışı ByMekan
 Tarih: 15-08-2012, Saat:18:30
(Son Düzenleme: 15-08-2012, Saat:18:30, Düzenleyen: ByMekan.)
#2
http://mybbrehberi.10tl.net/index.php Bakın Böyle OLdu
Cevapla
Bunu Beğenenler:

Çevrimdışı ßy Yunus
 Tarih: 15-08-2012, Saat:18:30
#3
Teşekkürler.. Gerçekten güzel bir paylaşım.. Süper
Cevapla
Bunu Beğenenler:

İzinli BlackCat
 Tarih: 15-08-2012, Saat:18:31
#4
(15-08-2012, Saat:18:30)ByMekan Adlı Kullanıcıdan Alıntı: http://mybbrehberi.10tl.net/index.php Bakın Böyle OLdu

Sanırım css yi eklemediniz hocam?
Cevapla
Bunu Beğenenler:

İzinli Lord
 Tarih: 15-08-2012, Saat:18:32
#5
Ellerine sağlık abi. Kısa ve öz olmuş.
Cevapla
Bunu Beğenenler:

Çevrimdışı ByMekan
 Tarih: 15-08-2012, Saat:18:32
#6
Ekledim Ama Sanırsam Css Kodunda Eksiklik Var Bakın

#mask {
position: absolute;
z-index: 9010;
background-color: #000000;
display: none;
top: 0;
left: 0;
}

.modalBox {

Gerisi Yok
Cevapla
Bunu Beğenenler:

İzinli BlackCat
 Tarih: 15-08-2012, Saat:18:34
(Son Düzenleme: 15-08-2012, Saat:18:35, Düzenleyen: BlackCat.)
#7
Alıntı:Ekledim Ama Sanırsam Css Kodunda Eksiklik Var Bakın

#mask {
position: absolute;
z-index: 9010;
background-color: #000000;
display: none;
top: 0;
left: 0;
}

.modalBox {

Gerisi Yok

Css kodları değiştirilmiştir. Yardımcı oldugunuz için teşekkür ederim hocam Gülümseme
İyi çalışmalar.
Cevapla
Bunu Beğenenler:

Çevrimdışı ByMekan
 Tarih: 15-08-2012, Saat:18:35
#8
Şimdide Giriş Yeri Gelmiyor..
Cevapla
Bunu Beğenenler:

 


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  MyBB - Forumunuza Sağda Açılan Facebook Beğen Kutusu Eklemek BlackCat 10 5,883 28-09-2016, Saat:14:04
Son Yorum: rojinam
  [MCTR - 1.6] Mybb Alıntı,Kod Arka Plan Rengi Değiştirmek EmreKarakaya 9 6,198 05-07-2016, Saat:11:57
Son Yorum: 1907fb
Bigi Düzgün bir Mybb Sitesi Açmak için Neler Yapılmalıdır? MeleDiYe 2 340 01-07-2016, Saat:01:14
Son Yorum: MeleDiYe
  Mybb Kategori Ve forum İsmi Neon Işık Efekti Keskin 1 1,760 19-05-2016, Saat:15:51
Son Yorum: Dumpces1
  MyBB Google SEO - 404 Not Found Hatası ve Çözümleri BlackCat 10 5,392 15-02-2016, Saat:15:34
Son Yorum: pashaernn



Konuyu Okuyanlar: 1 Ziyaretçi