[phpbb3 tarzı kategori] Yeni Css ler

[infazcı_kafkef_61]

Tüm Kodların Konulacak tek yeri

Yönetim paneli--afiş asmak--(solda)renkler.. css styleer

lılıllı..Kategorileri Phpbb3 gibi oval yapmak..ıllılıl

SADECE MOZİLLADA GEÇERLİDİR

Kod:

th {
   color: #ffa34f;
   font-size: 11px;
   font-weight : bold;
   background-color: blue;
   height: 25px;
-moz-border-radius: 15px;

   }
.forumline{
    background-color: #ffffff;
-moz-border-radius: 15px;
border-color: red;
}


red=kenarlık rengi

lılıllı..Sadece kategorileri tablolarını oval yapmak için..ıllılıl

Kod:

.forumline{
    background-color: #ffffff;
-moz-border-radius: 15px;
border-color: red;
}

red= kenarlık rengi

lılıllı..Profil kutusunun Arkasına resim koyma..ıllılıl

önce



sonra

Kod:

fieldset{
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 11px;
line-height: 125%;
background-image: url("http://i44.servimg.com/u/f44/12/44/30/06/header10.png");
border: red;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px}

Verdana,Arial,Helvetica,sans-serif=> yerine yazı fontu koyabilirsniz
https://i.servimg.com/u/f44/12/44/30/06/header10.png=> yerine istediğiniz resmin url si..
red=> kutu çerçeve rengidir.yerine istediğiniz rengi koyabilirsiniz.
11=>yazı boyutu
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px} kalınlıklar..

çalışması için;

Kod:

<fieldset><b><legend>sıra adı</legend>

sıra adını silip rütbe adını koyacaksınız.. mesela adminse..

Kod:

<fieldset><b><legend>Admin</legend>

flash varsa

http://s4b.directupload.net/images/090521/375vrq26.swf

__________________________________________
renkli isim istiyorsanız..bunu koyacaksınız

Kod:

<fieldset><b><legend><font color="red">Admin</font></legend>

red yerine istediğiniz renk
______________________________________________
iki renk istiyorsanız

Kod:

<fieldset><b><legend><font color="red">1yazı</font><font color="red">2.yazı</font></legend>

gerekli yerleri düzeltin

______________________________________________

vs...

iyi haber..eğer güzel bir resim yapabilirseniz vs ayarlamalar.. süper bir profil yapabilirsiniz.. .. o en sevdiğiniz not defterli vs.. ayarlayabilirsiniz.. uzun sürer ama yaparsınzı

[not=tüm fieldset kodlarının arkasına resim koyar..]

lılıllı..Profil kutusunu çerçeveleme..ıllılıl

önce



sonra



kod

Kod:

fieldset{
-moz-border-radius: 20px;
background-color : #fff;
padding-left : 7px;
padding-right : 7px;
border-right: red 15px outset; border-top: red 15px outset; border-left: red 15px outset; border-bottom: red 15px outset
}

15=>çizgi kalınlığı..değiştirebilirsiniz..4ünüde
#fff=> arka plan rengi.. şuan transparandır..isterseniz renk koyabilirsiniz.
red=> renktir.. istediğiniz rengi koyabilirsiniz..otomatikmen diğer 2 rengi açar..yani gölgeli gibi olur

lılıllı..Linklerin altından çizgileri kaldırma..ıllılıl

önce



sonra



kod

Kod:

a:link{text-decoration:none}

a:visited{text-decoration:none}

a:active{text-decoration:none}

a:hover{
    text-decoration: none !important;
    color : #dd6900;
    }

lılıllı..Profili değiştirme..ıllılıl

önce



sonra

Kod:

.postdetails{
    font-size : 10px;
    color : red;
        font-family : Comic Sans MS;
          }

10 = yazı büyüklüğü
red = cevapların rengi(nerden,doğum tarihi vs..)
Comic Sans MS => yazı fontu

bunları değiştirebilirsiniz

lılıllı..Profil kutusunun rengini değiştirme..ıllılıl

Kod:

fieldset { border:5px solid green }
legend {
  padding: 0.2em 0.5em;
  border:3px solid red;
  font-size:90%;
  text-align:right;
  }

5=> tabloların kalınlığı... arttırabilir veya azaltabilirsiniz..
green=>tabloların rengi... değiştirebilirsiniz..
3=> kutucuğun kalınlığı... arttırabilir veya azaltabilirsiniz..
red=>kutucuğun rengi... değiştirebilirsiniz..

önce



sonra

lılıllı..Ön Profile Arkaplan koyma..ıllılıl

Spoiler:

Kod:

/* Advanced profile */
#profile-advanced-avatar .module, #profile-advanced-points .module, #profile-advanced-reputation .module, #profile-advanced-details {
   margin-right: 3px;
   background-image: url("http://img149.imageshack.us/img149/7673/flash61trabzonspor16001gl4.gif");
   }
#profile-advanced-avatar .module, #profile-advanced-points .module, #profile-advanced-reputation .module, #profile-advanced-right .module {
   margin-bottom: 3px;
   background-image: url("http://img149.imageshack.us/img149/7673/flash61trabzonspor16001gl4.gif");
   }
#profile-advanced-button {
   padding: 1px;
   background-image: url("http://img149.imageshack.us/img149/7673/flash61trabzonspor16001gl4.gif");
   }
#profile-advanced-details {
   overflow: hidden;
   background-image: url("http://img149.imageshack.us/img149/7673/flash61trabzonspor16001gl4.gif");
   }
#profile-advanced-details ol {
   margin: 0;
   padding: 0;
   list-style: none;
   background-image: url("http://img149.imageshack.us/img149/7673/flash61trabzonspor16001gl4.gif");
   }
#profile-advanced-details ol li {
   display: block;
   margin-bottom: 4px;
   background-image: url("http://img149.imageshack.us/img149/7673/flash61trabzonspor16001gl4.gif");
   }
#profile-advanced-details .avatar {
   float: left;
   background-image: url("http://img149.imageshack.us/img149/7673/flash61trabzonspor16001gl4.gif");
   }

https://2img.net/r/ihimizer/img149/7673/flash61trabzonspor16001gl4.gif=> yerine istediğiniz resmin url sini koyun ..

HER RESİM AYRI BİR SAYFA SEÇENEĞİDİR(istatistikler,,profil vs..) HER SAYFAYA FARKLI RESİM KOYABİLİRSİNİZ

lılıllı..Sayfa konumunu silme..ıllılıl

Kod:

.nav{
    font-weight: bold;
    font-size: 0px;
    color : #536482;
    }


Önce



Sonra

lılıllı..BBCODE leriİ Değiştirme..ıllılıl

Kod:

button.button2, input.button2 {

   font-size: 0.7em;
   border: 1px solid #BCBCBC;
   width: auto !important;
   padding: 1px 0px;
   font-family: Arial,Verdana,Tahoma,sans-serif;
   color: #000000;
   background-repeat: repeat-x;
   background-image: url("http://i44.servimg.com/u/f44/12/44/30/06/header10.png");
   background-position: top;
   overflow: visible;
   vertical-align:middle;
-moz-border-radius: 15px;
border : 1px solid green;
font-family : "Courier New", Courier, monospace;
font-size : 12px;
padding-left : 7px;
padding-right : 7px;
   }


button.bbcode {
   background-image: url("http://www.trabzonspor.org.tr/Upload/Sporcu/buyuk/alanzinho.jpg");
-moz-border-radius: 15px;
border : 1px solid red;
font-family : "Courier New", Courier, monospace;
font-size : 12px;
padding-left : 7px;
padding-right : 7px;
  }


https://i.servimg.com/u/f44/12/44/30/06/header10.png=> basılmadan önceki resim.
http://www.trabzonspor.org.tr/Upload/Sporcu/buyuk/alanzinho.jpg=>basıldıktan sonraki resim.

green=> basılmadan önceki kenarlık rengi
red=>basıldıktan sonraki i kenarlık rengi

lılıllı..Nicki Şekillendirin...ıllılıl

Kod:

.name{
    font-size : 11px;
    color : #fcfcfc;
-moz-border-radius: 15px;
background-image: url("http://i44.servimg.com/u/f44/12/44/30/06/header10.png");
border : 1px solid #000000;
font-family : Bleeding Cowboys;
font-size : 12px;
padding-left : 7px;
padding-right : 7px;
  }


font-size : 11px; boyutudur..büyütebilirsiniz..

https://i.servimg.com/u/f44/12/44/30/06/header10.png :> yerine istediğğiniz remi koyabilirsiniz..

Bleeding Cowboys;=> yerine herhangi bir yazı fontu

arka plana renk koymak istiyorsanız

Kod:

.name{
    font-size : 11px;
    color : #fcfcfc;
-moz-border-radius: 15px;
   background-color: red;
border : 1px solid #000000;
font-family : Bleeding Cowboys;
font-size : 12px;
padding-left : 7px;
padding-right : 7px;
  }

red=> yerine herhangi bir renk koyabilirsiniz..

lılıllı..Hızlı Mesaj Kutusunu Oval Yapma....ıllılıl

Kod:

form#quick_reply textarea#text_editor_textarea {
  width: 100% !important;
  height: 100%;
-moz-border-radius: 15px;
background-image: url("http://i44.servimg.com/u/f44/12/44/30/06/header10.png");
border : 1px solid #000000;
font-family : "Courier New", Courier, monospace;
font-size : 12px;
padding-left : 7px;
padding-right : 7px;
  }

Kod:

http://i44.servimg.com/u/f44/12/44/30/06/header10.png

bunun yerine istediğiniz resmi koyabilrsiniz

#000000=>buda kenarlık rengi.. istediğiniz rengi koyabilirsiniz..

SADECE MOZİLLA DA ÇALIŞIR

lılıllı..Dikdörtgen Seçenekleri Oval Yapma....ıllılıl[/center]



___Mozilla___

Kod:

input{
-moz-border-radius: 15px;
background-color : #eaf9ff;
border : 1px solid #000000;
font-family : "Courier New", Courier, monospace;
font-size : 12px;
padding-left : 7px;
padding-right : 7px;
}

SADECE MOZİLLA DA ÇALIŞIR

lılıllı..Mesaj yazılarını değiştirme.ıllılıl

önce



sonra

Kod:

.postbody{
    font-size : 12px;
    line-height: 18px;
        color:red;
        font-family: Comic Sans MS;
    font-weight: bold;
        }


12=yazının büyüklüğü..değiştirebilirisniz
18= yazıyla imza arasındaki mesafe..değiştirebilirisniz
red=imza çizgisi ve yazı rengi..değiştirebilirsiniz..ama ayrı ayrı değil..ikiside aynı renk olur
Comic Sans MS=yazı fontu..değiştirebilirisniz
font-weight: bold;=kalın yazı... çıkartabilirsiniz..

[infazcı_kafkef_61]

lılıllı..Butonları şekillendirme..ıllılıl

Kod:

input.mainoption {
   background-color : ;
   background-color: red;

   font-weight : bold;
-moz-border-radius: 15px;
   background-color: red;

border : 1px solid #000000;
font-family : Bleeding Cowboys;
font-size : 12px;
padding-left : 7px;
padding-right : 7px;
  }
input.liteoption {
   background-color: red;
   font-weight : normal;
-moz-border-radius: 15px;
   background-color: red;
border : 1px solid #000000;
font-family : Bleeding Cowboys;
font-size : 12px;
padding-left : 7px;
padding-right : 7px;
  }


Bleeding Cowboys yerine yazı fontu

red yerine ingilizce renk

lılıllı..Mesaj Yazılan Yerin Arkplanını Değiştirme..ıllılıl

Kod:

#text_editor_textarea {
background-image: url('http://img42.imageshack.us/img42/1532/screenshot002v.png');
}


https://2img.net/r/ihimizer/img42/1532/screenshot002v.png

yerine herhangi bir resim url si

lılıllı..Mesaj Yazılan Yerin Arkplanını Değiştirme(Sadece Hızlı Cevap için)..ıllılıl

Kod:

form#quick_reply textarea#text_editor_textarea {
   width: 100% !important;
   height: 100%;
background-image: url("http://img42.imageshack.us/img42/1532/screenshot002v.png");
   }

https://2img.net/r/ihimizer/img42/1532/screenshot002v.png

yerine herhangi bir resim url si

lılıllı.."Alıntı" arkaplanınız istediğiniz resim olsun..ıllılıl

Kod:

.quote{
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 11px;
        background-image: url("http://www.turkiyemiz.gen.tr/turkiye-b.jpg");
    color: #444444;
    line-height: 125%;
    border: #d1d7dc;
    border-style: solid;
    border-left-width: 1px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    }

http://www.turkiyemiz.gen.tr/turkiye-b.jpg => resmimiz..istediğiniz resmi koyabilirsiniz..
Verdana,Arial,Helvetica,sans-serif => yazı fontları... değiştirebilirsiniz..
11px; => yazı büyüklüğü.. değiştirebilirsiniz..
line-height: 125%; => genişlik.. Ayarlayabilirsiniz..küüçültürseniz daha iyi olur
color: #444444; => yazı rengi.. #444444 yerine renk html kodu..yada ingilizce renk koyabilirsiniz
border: #d1d7dc; => kenarlık rengi . #d1d7dc yerine renk html kodu..yada ingilizce renk koyabilirsiniz

border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;

=> bunlar kenarlığın kalınlıkları.. arttırırsanız kalınlaşır..yani 1 leri yükseltin..

Code için.. üsttekilerin aynısı geçerli...

Kod:

.code{
    font-family: Courier,Courier New,sans-serif;
    font-size: 11px;
        background-image: url("http://www.turkiyemiz.gen.tr/turkiye-b.jpg");
    color: #006600;
   background-color: #fafafa;
    border: #d1d7dc;
    border-style: solid;
   border-left-width: 1px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px}

lılıllı..Nick Büyütme..ıllılıl

Kod:

.name{
    font-size : 12px;
    color : #707070;
   }

12px; bunu ayarlayıın

lılıllı..Chatbox Arkaplanına resim koyma..ıllılıl

Kod:

/* Chatbox */
body.chatbox {
   min-width: 550px !important;
   background-image: url("http://i44.servimg.com/u/f44/12/44/30/06/header10.png");
   padding: 0;
   margin: 0;
   background-color: #000000;
   }

https://i.servimg.com/u/f44/12/44/30/06/header10.png = kodda bunun yerine istediğiniz resmin url sini koyabilirsinz.

lılıllı..Resimlere oval arkaplan..ıllılıl

Kod:

img{
   border:0;
-moz-border-radius: 15px;
background-image: url("http://i44.servimg.com/u/f44/12/44/30/06/header10.png");
border : 1px solid #000000;
font-size : 12px;
padding-left : 7px;
padding-right : 7px;
  }

https://i.servimg.com/u/f44/12/44/30/06/header10.png=> yerine istediğiniz resmin url si.

Not: TÜM RESİMLER İÇİN GEÇERLİDİR

[infazcı_kafkef_61]

lılıllı..Hızlı Cevap Kutusunun Boyunu Ayarlama..ıllılıl

Kod:

form#quick_reply textarea#text_editor_textarea {
   width: 100% !important;
   height: 100%;
   }

100 leri isteğe göre ayarlayın

[infazcı_kafkef_61]

lılıllı..Herşeyi Kutu İçine Alma..ıllılıl

Kod:

table{
-moz-border-radius: 10px;
background-color : #FFFFFF;
border : 1px solid #000000;
font-family : Arial, Verdana, Helvetica, sans-serif;
font-size : 12px;
padding-left : 3px;
padding-right : 3px;
}

[infazcı_kafkef_61]

lılıllı..Widgetleri,Kenarlıkları vs. Çervceve İçine Alma..ıllılıl

Kod:

/* This is the outline round the main forum tables */ .forumline { background-color: #fff; border: 18px solid; border-color: red blue;
}


red =>birinci renk...red yerine harhangi bir renk yada renk kodu

blue=>İkinci renk...blue yerine harhangi bir renk yada renk kodu

18 => Kalınlık..değiştirebilirsiniz

arka plan isterseniz..

kodda ki bu

#fff

nun yerine harhangi bir renk yada renk kodu koyabilirsiniz..

lılıllı..Kırmızı ve yeşil olan rep renklerini değiştirme..ıllılıl

Kod:

.vote .vote-bar {
   width: 3px;
   height: 50px;
   margin: 0 auto;
   border: 1px solid white;
   font-size: 0;
   }
.vote .vote-no-bar {
   letter-spacing:-2px;
   margin-left:-2px;
   white-space:nowrap;
   }
.vote .vote-bar-plus {
   background-color: green;
   }
.vote .vote-bar-minus {
   background-color: red;
   }


solid white; => white... kenarlık rengi... istediğiniz gibi renk kodu yada ingilizce renk kullanabilirsiniz...

background-color: green; => green... olumlu rep rengi... istediğiniz gibi renk kodu yada ingilizce renk kullanabilirsiniz...

background-color: red;=> red... olumsuz rep rengi... istediğiniz gibi renk kodu yada ingilizce renk kullanabilirsiniz...

html renkleri için Buraya Tıkla

lılıllı.."Alıntı" ve "code" renklerini değiştirme..ıllılıl

bu kod için

Kod:

.code{
    font-family: Courier,'CourierNew',sans-serif;
    font-size: 11px;
    color: #859875;
   background-color: #d9a164;
    border: #212121;
    border-style: solid;
   border-left-width: 1px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px}

color: #859875; => bu yazı rengi.. bunu istediğiniz renk yapabilirsiniz..
background-color: #d9a164; => bu arka plan rengi.. bunu istediğiniz renk yapabilirsiniz..
border: #212121; => buda kenarlık rengi bunu istediğiniz renk yapabilirsiniz.
font-family: Courier,'CourierNew',sans-serif; => bu yazı fontları..değiştirebilrsiniz.
font-size: 11px; =>bu yazı boyutu..değiştirebilirsiniz..


buda alıntı için

özellikleri yukardaki gibi

Kod:

.quote{
    font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
    font-size: 11px;
    color: #555555;
    line-height: 125%;
   background-color: #d9a164;
    border: #212121;
    border-style: solid;
   border-left-width: 1px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px}

[infazcı_kafkef_61]

lılıllı..Moderatör Yazısının Rengini Değiştirme..ıllılıl

Kod:

.mod-text {
   font-weight: bold;
   color : red;
   }

red yerine herhangi bir renk

lılıllı..Moderatör yazısnı kaldırma..ıllılıl

Kod:

.mod-text {
   font-weight: bold;
        font-size: 0px;
   }

İNVİSİON İÇİN KODLAR

lılıllı..Profilin Arkasına Resim koyma..ıllılıl

Kod:

/* ************************Posts************************ */
.post {
   background-image: url('http://img198.imageshack.us/img198/7281/mansaremuro61.gif');
  border-bottom: 10px solid #990202;
  }

https://2img.net/r/ihimizer/img198/7281/mansaremuro61.gif

yerine istediğiniz resmi koyabilrsiniz

lılıllı..Kategorileri kutu içine alma..ıllılıl

Kod:

.row1,.row2 {
   border-bottom: 1px solid #131313 !important;
   }
.row1 {

        background-repeat: repeat-x;
   border-left: solid 1px #404040;
   border-right: solid 1px #121212;
   border-top: solid 1px #3C3C3C;
   border-bottom: solid 1px #131313;
   }

.row2 {
        background-repeat: repeat-x;
   border-left: solid 1px #404040;
   border-right: solid 1px #121212;
   border-top: solid 1px #3C3C3C;
   border-bottom: solid 1px #131313;
   }

Önce



Sonra

lılıllı..Navigasyon arkasına resim koyma..ıllılıl

Kod:

/* Submenu */
#submenu {
background-image: url('http://i72.servimg.com/u/f72/12/12/58/19/nav10.png');
border-left: 1px solid #fffff;;
border-bottom: 1px solid #fffff;;
border-right: 1px solid #fffff;
border-top: 1px solid #fffff;
background-repeat: repeat-x;
height: 30px;
margin-bottom: -14px;
   color: #fffff;

   }

https://i.servimg.com/u/f72/12/12/58/19/nav10.png

bunun yerine istediğiniz resmi koyabilirsiniz..

Muro dan sevgiler