Simple Machines Community Forum

Tek Tek Resimli Olarak style.css kodlarının nereye ait olduğunu size aks etmeye çalışacağım. ayrıca ufak tüyolar vereceğim size. ve ayrıca sadece kırmızı renk kullanacağım anlatım sıfır defult temadan alınan bir style.css ile anlatılmıştır. Takıldığınız her noktada yanınızdayım.

1-

/* Normal, standard links. */
a:link
{
color: #476C8E;
text-decoration: none;
}


Burdaki Renk Kodunu #476C8E (red) olarak Değiştirdim yani kırmızı sonuç olarak

Katagori Başlıklarınız,Alt Katagoriler,Konu başlıklarımız tıklamadığımız bütün linkler kısacası kırmızılaştı resimde göründüğü gibi.

Resim 1.






2-

a:visited
{
color: #476C8E;
text-decoration: none;
}

Burdaki Renk Kodunu #476C8E (red) yaptığımızda ise bu sefer linklerdeki tıkladığımız yerler kırmızılaştı.yani yukardakini kırmızı bunu sarı yaptıkmı olur sarı kırmızı :)

Resim. 2




3-

/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
color: #000000;
text-decoration: none;
}


Bu kısımda #000000 renk kodunu (red) yaptığımızda ise link ağaç uzantısı kırmızı oldu.

Resim 3.



4-
/* By default (td, body..) use verdana in black. */
body, td, th , tr
{
color: #000000;
font-size: small;
font-family: verdana, sans-serif;
}


Bu kısımda #000000 renk kodunu (red) yaptığımızda ise Yazılmış olan konulardaki cevaplar konuların içi ve resimdede göründüğü gibi sayfa numaraları kırmızılaştı :)

Resim 4. ve 5.



&



5-

/* The main body of the entire forum. */
body
{
background-color: #E5E5E8;
margin: 0px;
padding: 12px 30px 4px 30px;
}


Bu kısımda #E5E5E8 renk kodunu (red) yaptığımızda ise resimde görüldüğü gibi arka plan rengimiz kırmızı oldu.

Resim 5.



6-

/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea, button
{
color: #000000;
font-family: verdana, sans-serif;
}
input, button
{
font-size: 90%;
}

textarea
{
font-size: 100%;
color: #000000;
font-family: verdana, sans-serif;
}



Bu kısımda #000000 renk kodunu (red) yaptığımızda ise resimde görüldüğü gibi butonların arkasındaki font kırmızı oluyor.

Resim 6.




tectarea kısmındaki #000000 renk kodunu (red) yaptığımızda ise resimde görüldüğü gibi mesaj yazdığımız alandaki yazı rengi kırmızı oldu.

resim 9.



7-
/* Selects are a bit smaller, because it makes them look even better 8). */
select
{
font-size: 90%;
font-weight: normal;
color: #000000;
font-family: verdana, sans-serif;
}


Bu kısımda #000000 renk kodunu (red) yaptığımızda ise resimde görüldüğü gibi arka linklerin kırmızılaştığını göreceksiniz


resim 10.


8-

/* Standard horizontal rule.. ([hr], etc.) */
hr, .hrcolor
{
height: 1px;
border: 0;
color: #666666;
background-color: #666666;
}



Bu kısımda #666666 renk kodunu (red) yaptığımızda ise resimde görüldüğü gibi konular içerisindeki renkler kırmızılaşıyor.

resim 10




9-

/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg, #preview_body
{
color: #000000;
background-color: #ECEDF3;
}




Bu kısımda ise color: #000000; kısmını red ( yaptığımızda ) resimde görülen alanlar ve iç kısımları yazılar kırmızı oluyor
background-color: #ECEDF3 burdakinide (blue) mavi yaptığımızda resimdeki alanlar ve iç kısımlar mavi oluyor :)

11-12-13-14 resim


&



&



&




10-

.windowbg2
{
color: #000000;
background-color: #F6F6F6;
}



bu kısımdaki color: #000000; (red) kırmızı yağtığımızda yazılar kırmızı background-color: #F6F6F6; blue mavi yaptığımızda görüldüğü gibi mavi oluyor.


15-16-17-18-19.resim

&

&

&

&



11-
.windowbg3
{
color: #000000;
background-color: #E0E1E8;
}

bu kısımda ise color: #000000; kırmızı yani red yaptığımızda kitli konuların sabit konuların yazıları kırmızı background-color: #E0E1E8 blue yaptığımızda ise ekranda görüldüğü gibi hover veriyor :)

20-21.resim.


&




12-

/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td
{
color: black;
font-style: normal;
background: url(images/titlebg.jpg) #E9F0F6 repeat-x;
border-bottom: solid 1px #9BAEBF;
border-top: solid 1px #FFFFFF;
padding-left: 10px;
padding-right: 10px;
}


bu kısımda ise color: black;  buradaki renk kodunu kırmızı yaptığımızda resimdeki görülen rumuz ve saat alanları kırmızı olmuştur.


resim 22.


13-

.titlebg, .titlebg a:link, .titlebg a:visited
{
font-weight: bold;
color: black;
font-style: normal;
}



bu kısımda ise color: black; değiştirip red yaptığımızda resimdeki konu başlıkları alanı kırmızı olmuştur.

resim 23.



14-

/* This is used for categories, page indexes, and several other areas in the forum.
.catbg and .catbg2 is for boardindex, while .catbg3 is for messageindex and display headers*/
.catbg , tr.catbg td , .catbg3 , tr.catbg3 td
{
background: url(images/catbg.jpg) #F2F2F2 repeat-x;
color: #ffffff;
padding-left: 10px;
padding-right: 10px;
}



bu kısımdaki renk color: #ffffff; değiştirdiğimizde red yaptığımızda resimdeki alan görünecekdir.

resim 24.


15-

.catbg, .catbg2, .catbg3
{
border-bottom: solid 1px #F2F2F2;
}

bu kısımdaki renk kodunu #F2F2F2 (red) yaptığımızda resimde görüldüğü gibi çerçeve çizgisi kırmızılaşıyor


resim 25.



16-

.catbg a:link, .catbg a:visited , .catbg2 a:link, .catbg2 a:visited
{
color: white;
text-decoration: none;
}

bu kısımdaki color: white; renk konudu (red) yaptığımızda ise resimde görüldüğü gibi katagori başlıkları renkleniyor.

resim 26


17-

/* This is used for tables that have a grid/border background color (such as the topic listing.) */
.bordercolor
{
background-color: #ADADAD;
padding: 0px;
}


bu kısımdaki background-color: #ADADAD; renk kodunu (red) olarak değiştirdiğimde forumumun heryerinin çerçeve içine alarak kırmızı ince bir çizgi oluştuğunu resimdeki gibi gördünüz :)

resim.27.



18-

/* This is used on tables that should just have a border around them. */
.tborder
{
padding: 1px;
border: 1px solid #696969;
background-color: #FFFFFF;
}

bu kısımdaki #696969; renk kodunu (red ) yaptığımda resimdeki görünen alanlar kırmızı, #FFFFFF renk koduna blue yani mavi yaptığımda resimdeki görüntüyü elde ediyoruz.

resim 28-29 .



&



19-

/* how links behave in main tab. */
.maintab_back a:link , .maintab_back a:visited, .maintab_active_back a:link , .maintab_active_back a:visited
{
color: white;
text-decoration: none;
}




burdaki renk kodunu color: white; değiştirip red yazdığımda aşşağıdaki gibi konular butonlar renkleniyor.

resim 30.



20-

.maintab_back a:hover, .maintab_active_back a:hover
{
color: #e0e0ff;
text-decoration: none;
}



burdaki renk kodunu color: #e0e0ff; (red) yaptığımda ise ekranda göründüğü gibi butonlara geldiğimde ekran rengi kırmızılaşıyor.

resim 31.



21-

/* how links behave in mirror tab. */
.mirrortab_back a:link , .mirrortab_back a:visited, .mirrortab_active_back a:link , .mirrortab_active_back a:visited
{
color: white;
text-decoration: none;
}


bu kısımdaki color: white; renk kodunu deyiştirdiğimizde red yaptıkmı aşağıdaki görüntüdeki olay gerçekleşiyor.

resim 32.













Evet Arkadaşlar tam 4 saat 39 dakkika + 1 Saat 39 Dakika uğraştım arada bir aşşağı bir yukarı oldu ama hemen hemen her işe yarayacak ve hiç biryerde olmayan .style.css açıklamasını yapmaya çalıştım smf.gen.tr harici hiç bir sitede yayınlanmasını istemiyorum .


Emeğe Saygı

Selametle.


Arkadaşlar resimler patlamıştı tekrar yeniden ele aldım ve dahada geliştirerek editledim hiç bir editleme yapmadan sadece style.css nizle harikalar yaratabilirsiniz.

Ellerin dert görmesin ne kadar faydalı bir konu?

Bu menü buton alanını nasıl değişecek tam fark edemedim?

1.1.x sürümlerinde maintab ve mirrortab, 2.0 sürümlerinde buttonlist

eline sağlık, ama her resmin linkini de resmin altında verirsen harika olur. çünkü smf boyutlandırıyor resimleri çoğu şey belli olmuyor emeğine yazık olmasın =)

Tamam hocam . :)  yeniden upload ederim.

Quote from: Php Coder Turkish on June 27, 2009, 02:26:13 PM
Tamam hocam . :)  yeniden upload ederim.

Yeniden upload etmene gerk yok ya. Yazıda img tagları içinde olan linkleri birde tagsız koy (:

:) bu 2.0 ya bu destek sitesine alışmaya çalışıyorum sory hocam :)

ama bundan sonra burdada bildiklerimi paylaşacağım.

Tebrikler! Harika bir makale ancak bu sanırım Dökümantasyonlar'a daha çok yakışır.. Bir Türkçe bölümündeyiz:)

Quote from: Php Coder Turkish on June 27, 2009, 02:34:04 PM
sory hocam :)

Quote from: akbora on June 27, 2009, 07:39:25 AM
Ellerin dert görmesin ne kadar faydalı bir konu?

Bu menü buton alanını nasıl değişecek tam fark edemedim?

buttonliste baktım da anasayfa menü background hangisidir bulamadım?

O da .buttonlist. images/maintab ile başlayan tüm dosyalar o bölümün arkaplanıdır.

Güzel çalışma tbrk ler. İpuçlarına alınmayı hakeden bir konu.

İngilizceyedemi çevirsem acaba hocam ? gerçi onları biliyordurda

Quote from: Php Coder Turkish on June 28, 2009, 12:43:34 PM
İngilizceyedemi çevirsem acaba hocam ? gerçi onları biliyordurda

Onlar nerden bilsin. İngiliz fransız ne farkeder, bilen biliyodur bilmeyen bilmiyodur. O yüzden çevir bence ;)

resimler uçmuş

güncellenmiştir selametle.

çok teşekkürler süper oldu :)

hayırlı olsun kardeşim.

Emeğin için teşekkürler, 5 numaralı çalışmanda yani forum arka plan rengini değiştirme bölümü 2.0 da değişmiş sanırım belki arkadaşlara yardımcı olur.

Arayacağınız yer style.css dosyasında

/* set a fontsize that will look the same in all browsers. */

olmalı

Bu anlatım 1.1.X serisi içindir hocam.

Ellerine sağlık ,çok güzel anlatım olmuş.

Quote from: Gurbet_1907 on October 03, 2009, 09:01:02 PM
Ellerine sağlık ,çok güzel anlatım olmuş.

Teşekkürler elimizden geldiğince güzel bir makale yapmaya çalıştık işte.

2.0 ve Wordpress yakında yayımlayayacağım.

eline sağlık kardeşim  çok yararlı oldu

rica ederim kardeşim....

çok teşekkür ederim kardeşim bana yararlı oldu hemen hemen sorularımın yanıtı gibi :)

Merhaba oncelikle basarilar guzel bi konuya deginmisniz yureginize saglik..

Resimleri göremedim açılmadı bende ?

Quote from: AS21 on March 31, 2010, 08:56:26 PM
Resimleri göremedim açılmadı bende ?

Resimler ölmüş. Allah rahmet eylesin...

Quote from: grafitus on April 01, 2010, 12:11:46 PM

Quote from: AS21 on March 31, 2010, 08:56:26 PM
Resimleri göremedim açılmadı bende ?

Resimler ölmüş. Allah rahmet eylesin...

Amin ne diyelim bir gönüllü çıksada güncellese... ;)

//Güncel...

resimler mefta olsada yinede işe yarar.