MyBB Temalarınız İçin Dinamik Slider [Aranan Konu]

[Hatake]

Öncelikle demo verelim;

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

https://codepen.io/r34lity/pen/LkJoGW

Resimlerin üstüne gelin açıklamalar büyür.

Sorunsuzdur. Ne kadar açıklama yazsanız da bozulmaz. Açıklamanızın bir kısmı gözükür sadece.
Kuruluma geçmek gerekirse;

Temanızın index şablonlarını açıp

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

{$header}

Kodunun hemen altına bu kodu ekleyin;

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

<style>
@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,500);

body {margin: 0px;}

#slide {
 position: relative;
 margin: 1px 0px 20px 0px;
 float: left;
}

#slide ul {
 padding: 0px;
 margin: 0px;
 list-style-type: none;
}

#slide ul li {
   display: inline-block;
   float: left;
   width: calc( 25% - 2px );
   height: 150px;
   overflow: hidden;
   cursor: pointer;
   border-left: 1px solid #fff;
}

#slide ul li:nth-child(1) {
border-left: 0px solid;
}

#slide ul li img {
 width: 100%;
 height: 150px;
 float: left;
}

#slide ul li .aciklama {
 color: #fff;
 line-height: 21px;
 text-shadow: 0px 2px 1px black;
 font-weight: bold;
 text-overflow: ellipsis;
 overflow: hidden;
 font-family: Ubuntu;
 margin: 90px 0px;
 height: 30px;
 width: calc( 25% - 42px );
 padding: 15px 20px;
 position: absolute;
 /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,000000+100&0+0,1+100 */
background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
 transition: all 250ms;
}

#slide ul li:hover .aciklama {
 margin: 70px 0px;
 height: 50px;
}
</style>


<div id="slide">
 <ul>
   <li><a href="#"><img src="https://www.mobilofon.com/blog/wp-content/uploads/2016/04/Samsung-Galaxy-S7-Edge-Fiyat%C4%B1-200-D%C3%BC%C5%9Ft%C3%BC.jpg"><div class="aciklama">Son Döneme Damgasını Vuran 5 İlginç Teknolojik Ürün! Fazla kelimelerde böyle oluyor işte deneme için uzun yazmam lazım gördüğün gibi</div></a></li>
     <li><a href="#"><img src="https://www.mobilofon.com/blog/wp-content/uploads/2016/04/Samsung-Galaxy-S7-Edge-Fiyat%C4%B1-200-D%C3%BC%C5%9Ft%C3%BC.jpg"><div class="aciklama">Son Döneme Damgasını Vuran 5 İlginç Teknolojik Ürün! Fazla kelimelerde böyle oluyor işte deneme için uzun yazmam lazım gördüğün gibi</div></a></li>
        <li><a href="#"><img src="https://www.mobilofon.com/blog/wp-content/uploads/2016/04/Samsung-Galaxy-S7-Edge-Fiyat%C4%B1-200-D%C3%BC%C5%9Ft%C3%BC.jpg"><div class="aciklama">Son Döneme Damgasını Vuran 5 İlginç Teknolojik Ürün! Fazla kelimelerde böyle oluyor işte deneme için uzun yazmam lazım gördüğün gibi</div></a></li>
           <li><a href="#"><img src="https://www.mobilofon.com/blog/wp-content/uploads/2016/04/Samsung-Galaxy-S7-Edge-Fiyat%C4%B1-200-D%C3%BC%C5%9Ft%C3%BC.jpg"><div class="aciklama">Son Döneme Damgasını Vuran 5 İlginç Teknolojik Ürün! Fazla kelimelerde böyle oluyor işte deneme için uzun yazmam lazım gördüğün gibi</div></a></li>
 </ul>
</div>

Ve gerekli kısımları düzenleyin.

[QuitterTR]

Tasarıma bakmadım ancak, @import kodu ne oluyor?
Css de html isimlerini mi başlık yazıyoruz mesela:
#slide ul li .aciklama {
color: #fff
}

Burdaki slide ul li. Aciklama kısmı gibi

[Enes Bayraktar]

@import kodu ile css dosyana farklı bir css dosyası çağırıp ekleyebilirsin örnek @import url; yani a.css in içinde b.css'in kodlarını barındıp a.css'in kodlarını ekleyebilirsin..

[Hatake]

Evet öyle yapıyoruz import ilede başka bir css dosyasını onun içine çağırmış gibi oluyorsun.

https://fonts.googleapis.com/css?family=Ubuntu:400,500

bu sayfadaki kodları css dosyasının içine yazıp dosyayı büyütmek yerine tek satırda hallediyorsun işi. Font çağırdım ben orada anlayacağın.

[QuitterTR]

Teşekkürler @hatake @enes bayraktar

[#Captain]

Ellerine sağlık.

[Enes Bayraktar]

Dinamik'den kastın nedir tam anlamadım güzel olmuş ancak responsive değil...

[Hatake]

Dinamik'den kastın nedir tam anlamadım güzel olmuş ancak responsive değil...

Dinamiği hareketli anlamında kullandım. Göze hoş gelen anlamında. Ayrıca cihazdan cihaza kayma yapmadığı sürece sorun yok :D Responsive yazılmadı zaten

[NameLessWarrior]

Başarılı :) Eline sağlık.