https://instagram.com/alphazzers
   
Konuyu Oyla:
  • Toplam: 1 Oy - Ortalama: 3
  • 1
  • 2
  • 3
  • 4
  • 5
3 Adet Duyuru Kutusu Çarpıya Basınca Animasyonlu Olarak Kapanıyor
#1
Anlatıma başlıyoruz...

Temanızın Header Şablonlarında ;

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('http://i1167.photobucket.com/albums/q628/wolfteamcilar/th_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('http://i1167.photobucket.com/albums/q628/wolfteamcilar/th_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('http://i1167.photobucket.com/albums/q628/wolfteamcilar/th_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('http://i1167.photobucket.com/albums/q628/wolfteamcilar/th_warning.png') no-repeat;
}

Caps: ( Forumda daha farklı görünücektır )

dialog.jpg

Alıntıdır. Teşekkür etmeyi unutmayın.
Tekrar Genel Şef...
ÜCRETLİ TASARIM İŞLERİNİZ YAPILIR !
Ara
Cevapla PGM
Teşekkür verenler:
#2
teşekkürler.....
Ara
Cevapla PGM
Teşekkür verenler:
#3
saol knk.
Ara
Cevapla PGM
Teşekkür verenler:
#4
Rica ederim...
Tekrar Genel Şef...
ÜCRETLİ TASARIM İŞLERİNİZ YAPILIR !
Ara
Cevapla PGM
Teşekkür verenler:
#5
(14-08-2012 Saat: 14:07)La$h Nickli Kullanıcıdan Alıntı: teşekkürler.....
“Mazlumun zalimden öcünü alacağı gün,
şüphesiz zalimin zulmettiği günden daha çetin olacaktır !"
Hz. Ali (r.a)

Kuş ölür, sen uçuşu hatırla...
Ara
Cevapla PGM
Teşekkür verenler:
#6
Rica ederim.
Tekrar Genel Şef...
ÜCRETLİ TASARIM İŞLERİNİZ YAPILIR !
Ara
Cevapla PGM
Teşekkür verenler:
#7
Teşekkürler
Ara
Cevapla PGM
Teşekkür verenler:
#8
Rica ederim.
Tekrar Genel Şef...
ÜCRETLİ TASARIM İŞLERİNİZ YAPILIR !
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 2 Ziyaretçi



***

Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping