Css Kod Arşiv! ~ TuaL ~

[TuaL]

Modeler Gitti İş Başa Düştü!=)

Kodlar; Yönetim Paneli >>> Afiş Asmak >>> Renkler ve resimler (altından) > Renkler > CSS Stylesheet (içine)

Görünüm noktalı çerçevedeki gibi;


Forumda kullanılan tüm (fieldset) kodlarını şekillendirir ama sadece firefox için geçerlidir!

Kod:

fieldset {
padding: 10px;
border: 1px solid #ff0000;
-moz-border-radius: 13px;
border-radius: 5px;
}
th {    color: #ffffff;    font-size: 12px;    font-weight : bold;    background-color: #000000;    height: 25px;    padding: 2px 3px;    }

NoT: Ayarlarından istediğiniz gibi değiştirebilirsiniz!

[TuaL]

Kodlar; Yönetim Paneli >>> Afiş Asmak >>> Renkler ve resimler (altından) > Renkler > CSS Stylesheet (içine)

Linklerin üstüne gelince çıkan resimler!

Kod:

a:hover{
 text-decoration: underline;
 color : #000000;
 background-image:url(http://i10.glitter-graphics.org/pub/629/629740trq6seguwh.gif);
 }

NoT: Kodun içinden url(Resim Linki); yerini değiştirebilirsiniz!

[TuaL]

Kodlar; Yönetim Paneli >>> Afiş Asmak >>> Renkler ve resimler (altından) > Renkler > CSS Stylesheet (içine)

Görünüm sarı çizgiler arasındaki;


Forumdaki Profil, Mesaj veya koyduğunuz (HR) kodları yerine resim koymak!

Kod:

hr {
border: 0 none #ffffff;
border-top: 0px solid #000000;
height: 3px;
background-image: url(http://i10.glitter-graphics.org/pub/157/157450y8o7027lgr.gif);
margin: 5px 0;
display: block;
clear: both;
}
hr.dashed {
border-top: 0px dashed #ffffff;
margin: 5px 0;
}

NoT: Kodun içinden url(Resim Linki); yerini değiştirebilirsiniz!

[TuaL]

Kodlar; Yönetim Paneli >>> Afiş Asmak >>> Renkler ve resimler (altından) > Renkler > CSS Stylesheet (içine)
Forum Etrafındaki Çerçeve!
Görünüm siyah çizgiler arasındaki noktalama gibi;


Noktalı;

Kod:

.bodyline{
border-width: 2px;  border-style: dotted; border-color: red;
}

Kesik Çizgili;

Kod:

.bodyline{
border-width: 2px;  border-style: dashed; border-color: red;
}

Sürekli Çizgili;

Kod:

.bodyline{
border-width: 2px;  border-style: solid; border-color: red;
}

İkili Çizgili;

Kod:

.bodyline{
border-width: 4px;  border-style: double; border-color: red;
}

Kalın 3d Çizgili;

Kod:

.bodyline{
border-width: 4px;  border-style: inset; border-color: red;
}

NoT: Kodların içinden red yazan yerdeki rengi değiştirebilirsiniz!

[TuaL]

Kodlar; Yönetim Paneli >>> Afiş Asmak >>> Renkler ve resimler (altından) > Renkler > CSS Stylesheet (içine)

Resimleri otomatik küçültmek!

Kod:

.postbody img{max-width:800px;}

NoT: Kodun içinden max-width:800px; olan yeri değiştirebilirsiniz!

[TuaL]

Kodlar; Yönetim Paneli >>> Afiş Asmak >>> Renkler ve resimler (altından) > Renkler > CSS Stylesheet (içine)

Forum için iç arka plan yani logo arkası denilebilir!

Kod:

.bodyline {
   BACKGROUND-IMAGE: url('http://i69.servimg.com/u/f69/13/59/49/82/002110.gif')
}


NoT: Kodun içinden url('Resim Linki'); yerini değiştirebilirsiniz!

[TuaL]

Kodlar; Yönetim Paneli >>> Afiş Asmak >>> Renkler ve resimler (altından) > Renkler > CSS Stylesheet (içine)

Forum için sabit arka plan yapımı!

Kod:

body
{
background-image: url('http://i69.servimg.com/u/f69/13/59/49/82/arkapl10.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
}

NoT: Kodun içinden url('Resim Linki'); yerini değiştirebilirsiniz!

[TuaL]

Kodlar; Yönetim Paneli >>> Afiş Asmak >>> Renkler ve resimler (altından) > Renkler > CSS Stylesheet (içine)

Katagoriler, Forumlar, İstatistikler gibi yazı yerlerinin arka planına resim eklemek!

Kod:

td.row1{
 background-color: trasparent;
background-image: url("http://i69.servimg.com/u/f69/13/59/49/82/002110.gif");
background-attachment:
 }
td.row2{
 background-color: trasparent;
background-image: url("http://i69.servimg.com/u/f69/13/59/49/82/002110.gif");
background-attachment:
 }
td.row3{
 background-color: trasparent;
background-image: url("http://i69.servimg.com/u/f69/13/59/49/82/002110.gif");
background-attachment:
 }

TD.row4 {
   BACKGROUND-IMAGE: url('http://i69.servimg.com/u/f69/13/59/49/82/002110.gif')
}

TD.row5 {
   BACKGROUND-IMAGE: url('http://i69.servimg.com/u/f69/13/59/49/82/002110.gif')
}

NoT: Kodun içinden Tüm url('Resim Linki'); yerini değiştirebilirsiniz!

[TuaL]

Kodlar; Yönetim Paneli >>> Afiş Asmak >>> Renkler ve resimler (altından) > Renkler > CSS Stylesheet (içine)

Görünüm, forumun herhangi biyerine uyarı mesajı eklemek!

Kod:

.alert {
   background: #fff6bf url(http://2img.net/i/fa/i/smiles/icon_exclaim.gif) center no-repeat;
   background-position: 15px 50%; /* x-pos y-pos */
   text-align: left;
   padding: 5px 20px 5px 45px;
   border-top: 2px solid #ffd324;
   border-bottom: 2px solid #ffd324;
   }

NoT: Kodun tam çalışması için aşşağıdaki gibi forumun istediğiniz yerinde kullanmalısınız! Mesajlarda kullanmak için HTML kodlarının açık olması lazım!...

Kod:

<p class="alert"> HoşGeldiniz... </p>

[TuaL]

Kodlar; Yönetim Paneli >>> Afiş Asmak >>> Renkler ve resimler (altından) > Renkler > CSS Stylesheet (içine)

Konulara liste oluştururken başındaki nokta yerine resim koymak!

Kod:

.post ul {list-style-image: url('http://doyalar2.biz.uz/subforumoldkt2.gif');}

NoT: Kodun içinden url('Resim Linki'); yerini değiştirebilirsiniz!

[TuaL]

Kodlar; Yönetim Paneli >>> Afiş Asmak >>> Renkler ve resimler (altından) > Renkler > CSS Stylesheet (içine)

Menü tasarımı forumun istediğiniz bir yerinde kullanıla bilir!

Kod:

.menu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px;
}

.menu li a{
display: block;
width: 100%;
padding: 2px 4px;
text-decoration: none;
font-weight: bold;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
text-decoration:none;
}

.menu li a:hover{
color: black;
background-color: #FFE271;
border-style: outset;
}

html>body .menu li a:active{ /* Apply mousedown effect (non IE browsers only) */
border-style: inset;
}

NoT: Kodun tam çalışması için aşşağıdaki gibi forumun istediğiniz yerinde kullanmalısınız!

Kod:

<ul class="menu">
    <li><a href="1.Link">1.İsim</a></li>
    <li><a href="2.Link">2.İsim</a></li>
    <li><a href="3.Link">3.İsim</a></li>
    <li><a href="4.Link">4.İsim</a></li>
    <li><a href="5.Link">5.İsim</a></li>
    <li><a href="6.Link">6.İsim</a></li>
</ul>

[TuaL]

Kodlar; Yönetim Paneli >>> Afiş Asmak >>> Renkler ve resimler (altından) > Renkler > CSS Stylesheet (içine)

Alıntıları Invision temadaki gibi kullanmak!

Kod:

.quote {
BORDER-RIGHT: #aaa 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaa 1px solid; PADDING-LEFT: 40px; FONT-SIZE: x-small; BACKGROUND: url(http://img585.imageshack.us/img585/9179/quoteicon.gif) #f0f3fc no-repeat 0px 5px; PADDING-BOTTOM: 10px; MARGIN: 1px; BORDER-LEFT: #aaa 1px solid; COLOR: #000000; LINE-HEIGHT: 1.4em; PADDING-TOP: 10px; BORDER-BOTTOM: #aaa 1px solid
}

[TuaL]

Kodlar; Yönetim Paneli >>> Afiş Asmak >>> Renkler ve resimler (altından) > Renkler > CSS Stylesheet (içine)

Link renklerini css'den ayarlamak!

Kod:

a.postlink:link { text-decoration: none; color : #ff0000}
a.postlink:hover { text-decoration: underline; color : #a601a6}

NoT: Kodun içindeki; a.postlink:link (normal link rengi) ve a.postlink:hover (mause ile üstüne gelindiğindeki rengi) bunların sonundaki color : #RenkKodu renk kodlarını istediğiniz gibi ayarlaya bilirsiniz!

[TuaL]

Kodlar; Yönetim Paneli >>> Afiş Asmak >>> Renkler ve resimler (altından) > Renkler > CSS Stylesheet (içine)

Resimleri Küçültmek! Mause İle Üzerine Gelince Büyütür!

Kod:

/*Dj-TuaL---------------------------*/
.postbody img{max-width:400px;}
.postbody img:hover{
max-width:800px;
overflow:auto;
}

NoT: Kodun içinden max-width:400px(resmin maximum küçültme boyutu) yada 800px(resmin maximum büyülme boyutu); olan yerleri değiştirebilirsiniz!

[TuaL]

kodlar versiyon en sağlam "phpbb2"de çalışır! yorumlar için teşekkürler!=)