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).
ByBrown avatar
Konuyu Oyla:
  • Derecelendirme: 3/5 - 2 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 3/5 - 2 oy

3 Adet Duyuru Kutusu Çarpıya Basınca Animasyonlu Olarak Kapanıyor


Sponsor Reklam
media venus

Çevrimdışı ByBrown
 Tarih: 05-08-2012, Saat:14:29
(Son Düzenleme: 05-08-2012, Saat:14:32, Düzenleyen: ByBrown.)
#1
Arakadaşlar ben bunu MyBBe uyarladım.Asıl konu:

Kod:
psdup.com

Demo:
Kod:
bybrown.tk

Öncelikle Ekteki Dosyaları İmages İçine Atıyoruz.Sonra Header Şablonda
Kod:
<div id="panel" >
{$welcomeblock }
</div>

Altına Ekliyoruz:
Kod:
<!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">
<!--
Design: Catalin Bridinel - bridinel.com
Css & Html : Sirzat Aytac - psdup.com
-->
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Psdup - Dialog Boxes</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    
    $('.close').click(function() {
        closeid = $(this).attr('id');
        $('.'+closeid).hide('slow', 0);
    });

});
</script>
</head>

<body>
<div id="center">
<div class="dialog success"><span class="close" id="success"></span><span class="icon"></span><h1>Foruma Hoş Geldiniz</h1><p>Giriş <a href="#">Yapın</a>Ya Da Üye <a href="#">Olun</a></p></div>
<div class="dialog info"><span class="close" id="info"></span><span class="icon"></span><h1>Admin: Yeni Temamız Yüklendi</h1><p>Uzun Süredir Üstünde Çalıştığımız Temayı Sonunda Yükledik <a href="#">Tıkla</a>...</p></div>
<div class="dialog warning"><span class="close" id="warning"></span><span class="icon"></span><h1>Dikkat!</h1><p>İnternette Dolaşan Yeni Bir Virüs Bulundu.Konuya Gitmek İçin <a href="#">Tıkla...</a></p></div>
</div>
</body>

</html>




Bunuda Global CSS En Alta Ekliyeceğiz.
Kod:
body1 {
    margin: 0px;
    background-color: #1b2036;
    font-family:"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
}
h1 {
    font-size: 18px;
    font-weight: bold;
    margin: 0px;
    padding:8px 0px 0px 0px;
}
p {
    margin: 0px;
    font-size:12px;
}
#center {
    width: 960px;
    margin: 15px auto 0px auto;
}

.dialog {
    height: 60px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    margin-bottom: 20px;
    color:#ffffff;

}
.dialog .icon {
    width: 34px;
    height: 34px;
    display: block;
    margin: 12px 14px 0px 14px;
    float:left;
}
.close {
    display:block;
    height:14px;
    width:14px;
    background:transparent url('../images/close.png') no-repeat;
    position:relative;
    float:right;
    margin:5px 5px 0px 0px;
    cursor:pointer;
}
.success {
    background-color: #7f8f19;
    background-image: -moz-linear-gradient(top, #93A11F 0%, #6E8114 100%);
    background-image: linear-gradient(top, #93A11F 0%, #6E8114 100%);
    background-image: -o-linear-gradient(top, #93A11F 0%, #6E8114 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #93A11F), color-stop(1, #6E8114));
    background-image: -webkit-linear-gradient(top, #93A11F 0%, #6E8114 100%);
    background-image: -ms-linear-gradient(top, #93A11F 0%, #6E8114 100%);
    border-top: 1px solid #b9c22a;
}
.success .icon {
    background: transparent url('../images/success.png') no-repeat;
}

.info {
    background-color: #ffc800;
    background-image: -moz-linear-gradient(top, #ffcc00 0%, #ffb500 100%);
    background-image: linear-gradient(top, #ffcc00 0%, #ffb500 100%);
    background-image: -o-linear-gradient(top, #ffcc00 0%, #ffb500 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffcc00), color-stop(1, #ffb500));
    background-image: -webkit-linear-gradient(top, #ffcc00 0%, #ffb500 100%);
    background-image: -ms-linear-gradient(top, #ffcc00 0%, #ffb500 100%);
    border-top: 1px solid #ffe300;
    color:#dd220d;
}
.info .icon {
    background: transparent url('../images/info.png') no-repeat;
}
.info p {
    color:#000000;
}
.warning {
    background-color: #d61c0b;
    background-image: -moz-linear-gradient(top, #dc220d 0%, #d01609 100%);
    background-image: linear-gradient(top, #dc220d 0%, #d01609 100%);
    background-image: -o-linear-gradient(top, #dc220d 0%, #d01609 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #dc220d), color-stop(1, #d01609));
    background-image: -webkit-linear-gradient(top, #dc220d 0%, #d01609 100%);
    background-image: -ms-linear-gradient(top, #dc220d 0%, #d01609 100%);
    border-top: 1px solid #ee3314;
}
.warning .icon {
    background: transparent url('../images/warning.png') no-repeat;
}


Ek Dosyalar
.png   warning.png (Dosya Boyutu: 2.24 KB / İndirme Sayısı: 832)
.png   success.png (Dosya Boyutu: 2.22 KB / İndirme Sayısı: 817)
.png   info.png (Dosya Boyutu: 2.21 KB / İndirme Sayısı: 819)
.png   close.png (Dosya Boyutu: 1.09 KB / İndirme Sayısı: 816)
Cevapla
Bunu Beğenenler:
Sponsor Reklam
sponsor reklam sponsor reklam

İzinli TheLegend
 Tarih: 05-08-2012, Saat:14:37
#2
Eline sağlık Süper
Cevapla
Bunu Beğenenler:

Çevrimdışı xpserkan
 Tarih: 05-08-2012, Saat:14:39
(Son Düzenleme: 05-08-2012, Saat:14:43, Düzenleyen: xpserkan.)
#3
Şimdi bunu ekledikleri zaman çakışma yapacak ve sonra cevap editöründeki butonlar gözükmeyecek.. MyBB'ye uyarladım diyorsunuz fakat çakışmayı önleyici kodu eklememişsiniz, böyle uyarlama olmaz kusura bakmayın hocam. Sonra siteye gelip editör butonlarım gözükmüyor diyorlar anlamayan arkadaşlarımız.. Özellikle jQuery paylaşımlarına çok dikkat edelim ki, kimse çakışma ile uğraşmasın...

Çözümü için ; şu kodları bulun:
Kod:
<script type="text/javascript">
$(document).ready(function(){
    
    $('.close').click(function() {
        closeid = $(this).attr('id');
        $('.'+closeid).hide('slow', 0);
    });

});
</script>

Aşağıdaki ile değiştirin:
Kod:
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
    $('.close').click(function() {
        closeid = $(this).attr('id');
        $('.'+closeid).hide('slow', 0);
    });
});
</script>

Not: Bu tür paylaşımlar yaparken, lütfen çakışmayı önleyici kodu eklemeyi unutmayın. Bu arada teşekkürler..
Cevapla
Bunu Beğenenler: MehmetAliCan

Çevrimdışı Takipcİ
 Tarih: 05-08-2012, Saat:14:41
#4
demo ?
Cevapla
Bunu Beğenenler:

İzinli TheLegend
 Tarih: 05-08-2012, Saat:14:45
#5
(05-08-2012, Saat:14:41)oyun Adlı Kullanıcıdan Alıntı: demo ?

Kod:
bybrown.tk
Cevapla
Bunu Beğenenler:

İzinli Screwy
 Tarih: 05-08-2012, Saat:14:47
#6
Bunu Konu İçinde Uyarı BBCodu İçin Felanda Uyarlıyabilirmiyiz Bence O Şekilde Daha Kullanışlı Olur ?
Cevapla
Bunu Beğenenler:

Çevrimdışı ByBrown
 Tarih: 05-08-2012, Saat:17:08
#7
Birşey değil öncelikle serkan abi ben,m sitede çakışma falan yoktu ondan koymadım özür birdaha olmasa dahi kodu ekleyeceğim.
Cevapla
Bunu Beğenenler:

Çevrimdışı MehmetAliCan
 Tarih: 06-08-2012, Saat:01:02
#8
çakışma mı? Allah yazdıysa bozsun Açık Ağızlı Gülümseme
Cevapla
Bunu Beğenenler:

 


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  [MCTR] MCTR Stil Yeni Gölgeli Duyuru Çubuğu - [Resimli + Sarı] 007combatant 14 5,782 29-12-2015, Saat:12:37
Son Yorum: DeepKreep0x1
  [MCTR - 1.6] Y duyuru sistemi Plugin 007combatant 3 2,509 12-08-2015, Saat:14:32
Son Yorum: synapsem
  [1.6] Bant Şeklinde Süper Duyuru [Kod + Anlatım] BlackCat 14 13,305 10-07-2015, Saat:21:58
Son Yorum: freedoom
  E Chat Süper Chat Kutusu Batuhan5 3 1,753 10-07-2015, Saat:04:37
Son Yorum: freedoom
  Forumexe Benzer Duyuru (Kodlama:wwxd) WWXD 5 2,846 06-12-2014, Saat:15:51
Son Yorum: ForumKarizma



Konuyu Okuyanlar: 1 Ziyaretçi