2'li Duyuru Kutusu Kodu

[Hatake]

Öncelikle kodlama fikri @karanlık-61 e aittir. D10'un eski versiyon temasında kullanılmıştı yanlış hatırlamıyorsam. Tabii ki aynı kodlar değil, baştan kodladım. Flat ve göz alıcı bu duyuru panosunu eminim siz de beğeneceksiniz.

DEMO: http://codepen.io/anon/pen/bEgqep

Kurulum;
Global.css gir sonuna ekle:

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

#ilkkutu {
 float: left;
 width: 300px;
 background: #fceda4;
 border: 1px solid #fcd200;
 margin-right: 20px;
}

#ikincikutu {
 float: left;
 width: 300px;
 background: #a8ffcf;
 border: 1px solid #00ff72;
 margin-right: 20px;
}

.baslik {
 padding: 10px;
 text-align: center;
 color: #fff;
 font-family: 'Exo 2', Sans-serif;
}

.kirmizi {
 background: #bf0000;
}

.mavi {
 background: #005ebc;
}

.duyuru {
 margin-left: 10px;
 margin-top: 10px;
 margin-bottom: 10px;
 list-style-type: none;
 font-family: 'Exo 2', Sans-Serif;
}

.duyuru li a {
 text-decoration: none;
 color: #bf0000;
 -webkit-transition: all 450ms;
}

.duyuru li a:hover {
 margin-left: 10px;
}

.duyuru2 {
 margin-left: 10px;
 margin-top: 10px;
 margin-bottom: 10px;
 list-style-type: none;
 font-family: 'Exo 2', Sans-Serif;
}

.duyuru2 li a {
 text-decoration: none;
 color: #005ebc;
 -webkit-transition: all 450ms;
}

.duyuru2 li a:hover {
 -webkit-transform: rotate(1deg);
}

Headerinclude şablonuna gir sonuna ekle:

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

<link href='https://fonts.googleapis.com/css?family=Exo+2:500' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Kutuların gözükmesini istediğiniz yere de bu kodları ekleyin.

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

<div id="ilkkutu">
 <div class="baslik kirmizi"><i class="fa fa-info-circle"></i>
Forum Hakkında</div>
 <div class="duyuru">
   <li><a href="/index.php"><i class="fa fa-comments"></i> Yetkililer hakkında bilgilendirme</a></li>
   <li><a href="/index.php"><i class="fa fa-comments"></i> Yeni kayıt olanlar için kurallar</a></li>
   <li><a href="/index.php"><i class="fa fa-comments"></i> Eski tema hakkında bilgilendirme</a></li>
 </div>
</div>
<div id="ikincikutu">
 <div class="baslik mavi"><i class="fa fa-file-archive-o"></i> En Yeni Sürümler</div>
 <div class="duyuru2">
   <li><a href="/index.php"><i class="fa fa-globe"></i>
MyBB 2.0 Çıktı!</a></li>
   <li><a href="/index.php"><i class="fa fa-globe"></i>
Türkçe Dil Paketini İndir!</a></li>
   <li><a href="/index.php"><i class="fa fa-globe"></i>
Eklenti Paketi Yayımlandı!</a></li>
 </div>
</div>

[#Captain]

Mybb resmi destek sitesindekilerede benzemiş. Ellerine sağlık, teşekkürler.

[Hatake]

Mybb resmi destek sitesindekilerede benzemiş. Ellerine sağlık, teşekkürler.

Önemli değil, işinize yaradıysa ne mutlu bana.

[#Power]

O tema çok az kullanılmıştı ya özledim açıkçası o temayı. Yapılışını izlemiştim. Aynen benzemiş güzel de olmuş eline sağlık.

[kaRanLık-61]

Güzel olmuş eline sağlık.

[Subjeq]

Çok güzel olmuş eline sağlık.