Arakadaşlar ben bunu MyBBe uyarladım.Asıl konu:
Demo:
Öncelikle Ekteki Dosyaları İmages İçine Atıyoruz.Sonra Header Şablonda
Altına Ekliyoruz:
Bunuda Global CSS En Alta Ekliyeceğiz.
Kod:
psdup.comDemo:
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;
}