Açılır/Kapanır Konu Görüntüleme Paneli

[Ripbyrustavi]

Biraz kodlama yapayım dedim buyrun demolar ve yapılışı

Normal hali :



Üstüne gelince :



Yapılışı :

Temalar şablonlar > Temanız > Css oluştur > Stil adı acilirkapanirdurum.css > Genel stil seçili olsun > Kendi içeriğimi yazmak istiyorum

Kod: Tümünü Seç Tümünü Kopyala

@import url('https://fonts.googleapis.com/css?family=Open+Sans:700|Pacifico');

.istegidiyorumbirseydemeden {
background: #457fca; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #457fca, #5691c8); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #457fca, #5691c8); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
text-align:center;
font-family: 'Pacifico', cursive;
color:white;
border-radius: 4px 4px 4px 0px;
-moz-border-radius: 4px 4px 4px 0px;
-webkit-border-radius: 4px 4px 4px 0px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
font-size:20px;
}

.acilkapan{
background: #457fca; /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #457fca, #5691c8); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #457fca, #5691c8); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
width:200px;
color:white;
font-size:16px;
border-radius: 0px 0px 4px 4px;
-moz-border-radius: 0px 0px 4px 4px;
-webkit-border-radius: 0px 0px 4px 4px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
text-align:center;
font-family: 'Open Sans', sans-serif;
}
.acilkapan:hover span{display:block;}

.acilkapan span{
  display:none;

Oluştur diyelim ve sonra


Temalar şablonlar > şablonlar > temanız > konu gösterimi şablonlar > showthread > {$header} bul altına ekle

Kod: Tümünü Seç Tümünü Kopyala

<div class="istegidiyorumbirseydemeden">   Konu Başlığı : {$thread['subject']}

</div>
<div class="acilkapan"><b>Diğer Bilgiler
 <span> <div style="background: #F09819;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #EDDE5D, #F09819);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #EDDE5D, #F09819); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
width:200px;
font-family: 'Open Sans', sans-serif;
font-size:14px;
height:100px;
color:black;
border-radius: 0px 0px 4px 4px;
-moz-border-radius: 0px 0px 4px 4px;
-webkit-border-radius: 0px 0px 4px 4px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);">
Konu sahibi : {$thread['username']}<br>
Görüntüleme : {$thread['views']}<br>
Yorum Sayısı : {$thread['replies']}<br>
 </div> </span>
</div>

<br>

Hayırlı olsun.

[baransahinkaya]

Eline sağlık.

[haydardx]

güzel ama altın rengi pek uymamış gibi ama başarılı

[Neşeli Üye]

demo site var mı bakabileceğimiz.

[yakdoreee]

Basit bir kodlama olmuş. Eline sağlık

[Muratbaykam]

Gelişebilir

[kaanware]

Bence işlevsel olarak gayet başarılı, fakat bunun çok farklı ve göze hoş gelen bir tasarımla yapılması gerekiyor.
En azından ben öyle düşünüyorum. :)

Teşekkürler.

[hipolito]

Eline sağlık hocam..

[Escobar]

Bence işlevsel olarak gayet başarılı, fakat bunun çok farklı ve göze hoş gelen bir tasarımla yapılması gerekiyor.
En azından ben öyle düşünüyorum. :)

Teşekkürler.