Tekil Mesaj gösterimi - Temanıza bootstrap tarzı buton, input, uyarı alanlarını ekleyin

Konu Temanıza bootstrap tarzı buton, input, uyarı alanlarını ekleyin

02-07-2014, 03:53:08

Merhabalar,

- Birkaç hafta önce bootstrap giydirmeye çalıştım vBulletin'e ancak zamanım olmadığı için giydirmeden bıraktım ancak bunun yerine bootstrap ile gelen input, buton, uyarı alanlarını çok sevdiğim için sisteme ekledim. Bunu sizlerlede paylaşmak istedim.

- Ekran görüntüleri

Inputa basılmadan

Inputa basıldıktan sonra

Buton takımları

Eklentilerdeki dosya seçim alanındaki hali.

Uyarı alanlarını eklemek isterseniz, hata, uyarı, bilgi, başarılı olarak kullanabilirsiniz. Aşağıdaki CSS kodlarını Temanızın ek-ilave Css kısmıne eklemeniz yeterli.

.alert { padding: 8px 35px 8px 14px; margin-bottom: 20px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); background-color: #fcf8e3; border: 1px solid #fbeed5; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.alert,
.alert h4 { color: #c09853; margin: 0; }
.alert-success { color: #468847; background-color: #dff0d8; border-color: #d6e9c6; }
.alert-success h4 { color: #468847; }
.alert-danger,
.alert-error { color: #b94a48; background-color: #f2dede; border-color: #eed3d7; }
.alert-danger h4,
.alert-error h4 { color: #b94a48; }
.alert-info { color: #3a87ad; background-color: #d9edf7; border-color: #bce8f1; }
.alert-info h4 { color: #3a87ad; }
.alert-block { padding-top: 14px; padding-bottom: 14px; }
.alert-block > p,
.alert-block > ul { margin-bottom: 0; }
.alert-block p + p { margin-top: 5px; }

Aşağıdaki gibi kullanabilirsiniz.

<div class="alert alert-success">
    <h4>Başlık</h4>
    <div class="smallfont">İçerik</div>
</div>

Input ve button alanlarını eklemek isterseniz aşağıdaki CSS kodlarını temanızın ek-ilave CSS kısmına ekleyerek onlarıda kullanabilirsiniz.
- Bu kodları kullanabilmek için <input veya da submit kısmına sadece button olarak kullanmak isterseniz button clasını yazmanız yeterlidir.
- Eğer mavi gözükmesini isterseniz classda yazan button yanına bi boşluk bırakıp btn-primary yazıp mavi olarak gözükmesini sağlayabilirsiniz.

.button {
  display: inline-block; *display: inline; padding: 4px 12px; margin-bottom: 0; *margin-left: .3em;
  font-size: 12px; line-height: 20px; color: #333333; text-align: center; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle; cursor: pointer; background-color: #f5f5f5; *background-color: #e6e6e6;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); background-repeat: repeat-x; border: 1px solid #cccccc;
  *border: 0; border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-bottom-color: #b3b3b3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  *zoom: 1; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.button:hover, .button:focus { color: #333333; background-color: #e6e6e6; *background-color: #d9d9d9; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; }
.button:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); }
.headbutton { background: url(vbt5/buttonbg.png) repeat-x; color: #fff; border: 1px solid #2a87c8; padding: 3px 12px; cursor: pointer; font-size: 12px; font-family: Helvetica; margin-bottom: 4px; font-weight: bold; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
.btn-primary {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #006dcc;
  *background-color: #0044cc;
  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
  background-image: linear-gradient(to bottom, #0088cc, #0044cc);
  background-repeat: repeat-x;
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
  color: #ffffff;
  background-color: #0044cc;
  *background-color: #003bb3;
}

.btn-primary:active,
.btn-primary.active {
  background-color: #003399 \9;
}

Paylaşım yapacaksanız altına kaynakça olarak vBulletin-Turkiye'yi ekleyin.

Geliştirme: HasanHuseyin
Kaynak: http://www.vbulletin-turkiye.com/sho...=1160#post1160