global.css sonuna ekle;
header en alta ekle
demo:
Kod:
#alerts, #content, #promos, #footer, #copyright {
margin: 0 auto;
width: 970px;
}
.yt-alert-default.yt-alert-error, .yt-alert-actionable.yt-alert-error, .yt-alert-naked.yt-alert-error .yt-alert-icon, .yt-alert-small.yt-alert-error {
background-color: #913D37;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#c95145,EndColorStr=#913d37);
background-image: -moz-linear-gradient(top,#C95145 0,#913D37 45px);
background-image: -ms-linear-gradient(top,#C95145 0,#913D37 45px);
background-image: -o-linear-gradient(top,#C95145 0,#913D37 45px);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#C95145),color-stop(45px,#913D37));
background-image: -webkit-linear-gradient(top,#C95145 0,#913D37 45px);
background-image: linear-gradient(to bottom,#C95145 0,#913D37 45px);
}
.yt-alert-actionable, .yt-alert-default, .yt-alert-small {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.5),inset 0 0 1px rgba(0,0,0,.2);
-ms-box-shadow: 0 1px 2px rgba(0,0,0,.5),inset 0 0 1px rgba(0,0,0,.2);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .5),inset 0 0 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .5),inset 0 0 1px rgba(0, 0, 0, .2);
}
.yt-alert {
position: relative;
margin: 5px 0;
padding: 0;
overflow: hidden;
}
.yt-alert-actionable.yt-alert-error .icon, .yt-alert-default.yt-alert-error .icon {
background-position: -36px -18px;
}
.yt-alert-default .icon, .yt-alert-actionable .icon {
width: 32px;
height: 35px;
margin-left: 8px;
}
.yt-alert .icon {
float: left;
cursor: auto;
background: no-repeat url(http://imageshack.us/a/img11/5633/wwwrefreshvflijtcpd.png) -36px -139px;
}
.yt-alert-buttons {
float: right;
overflow: hidden;
}
.yt-alert-actionable .yt-alert-content, .yt-alert-default .yt-alert-content {
padding: 10px;
}
.yt-alert-actionable .yt-alert-content, .yt-alert-actionable .yt-alert-buttons, .yt-alert-default .yt-alert-content, .yt-alert-small .yt-alert-content {
color: white;
font-weight: bold;
text-shadow: 0 -1px 1px rgba(0, 0, 0, .45);
}
.yt-alert .yt-alert-content {
overflow: hidden;
}
.yt-alert .close:hover {
background-color: rgba(0, 0, 0, .15);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.yt-alert .close {
margin: 6px;
border: none;
overflow: hidden;
cursor: pointer;
background: no-repeat url(http://imageshack.us/a/img11/5633/wwwrefreshvflijtcpd.png) -36px -139px;
width: 22px;
height: 22px;
}
.yt-alert .yt-uix-button {
outline: 0;
}
.yt-uix-button {
height: 2.95em;
padding: 0 .91em;
border-width: 1px;
border-style: solid;
outline: 0;
font-weight: bold;
font-size: 11px;
white-space: nowrap;
word-wrap: normal;
vertical-align: middle;
cursor: pointer;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.yt-alert .close .yt-uix-button-content {
display: none;
}header en alta ekle
Kod:
<div class="yt-alert yt-alert-default yt-alert-error" id="error-box">
<div class="yt-alert-icon">
<img src="http://imageshack.us/a/img837/2166/pixelvfl3z5wfwgv.gif" class="icon master-sprite" alt="Alert icon">
</div>
<div class="yt-alert-content" role="alert"><span class="yt-alert-vertical-trick"></span>
<div class="yt-alert-message">
yaziiiiiiii
</div></div></div>demo:
Kod:
http://thefrm.com