Advertisement:

Author Topic: Style.Css (Resimli Uygulamalı Geniş Anlatım.)  (Read 36493 times)

Offline Sevgiformu.com

  • Semi-Newbie
  • *
  • Posts: 93
  • Gender: Male
    • Sevgiformu.com
Style.Css (Resimli Uygulamalı Geniş Anlatım.)
« on: June 27, 2009, 06:56:56 AM »
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-

Code: [Select]
/* 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-

Code: [Select]
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-

Code: [Select]
/* 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-
Code: [Select]
/* 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-

Code: [Select]
/* 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-

Code: [Select]
/* 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-
Code: [Select]
/* 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-

Code: [Select]
/* 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-

Code: [Select]
/* 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-

Code: [Select]
.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-
Code: [Select]
.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-

Code: [Select]
/* 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-

Code: [Select]
.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-

Code: [Select]
/* 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-

Code: [Select]
.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-

Code: [Select]
.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-

Code: [Select]
/* 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-

Code: [Select]
/* 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-

Code: [Select]
/* 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-

Code: [Select]
.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-

Code: [Select]
/* 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.



« Last Edit: September 27, 2009, 03:00:10 AM by Php Coder Turkish »

Offline akbora

  • Sr. Member
  • ****
  • Posts: 960
    • Anında Tepki
Re: Style.Css (Resimli Uygulamalı Geniş Anlatım.)
« Reply #1 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?



SMF 2.0.13
Default Theme
Utf8 Turkish
---------------

Offline Yağız...

  • SMF Super Hero
  • *******
  • Posts: 10,811
  • Gender: Male
    • MMO Browser
Re: Style.Css (Resimli Uygulamalı Geniş Anlatım.)
« Reply #2 on: June 27, 2009, 07:50:48 AM »
1.1.x sürümlerinde maintab ve mirrortab, 2.0 sürümlerinde buttonlist

Offline Özgür

  • SMF Hero
  • ******
  • Posts: 3,924
  • Gender: Male
  • Özgür | jQuery Lover
    • ozgurce on Facebook
    • @ozgurce on Twitter
    • Özgür Yalçın
Re: Style.Css (Resimli Uygulamalı Geniş Anlatım.)
« Reply #3 on: June 27, 2009, 01:03:46 PM »
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 =)

Offline Sevgiformu.com

  • Semi-Newbie
  • *
  • Posts: 93
  • Gender: Male
    • Sevgiformu.com
Re: Style.Css (Resimli Uygulamalı Geniş Anlatım.)
« Reply #4 on: June 27, 2009, 02:26:13 PM »
Tamam hocam . :)  yeniden upload ederim.

Offline Özgür

  • SMF Hero
  • ******
  • Posts: 3,924
  • Gender: Male
  • Özgür | jQuery Lover
    • ozgurce on Facebook
    • @ozgurce on Twitter
    • Özgür Yalçın
Re: Style.Css (Resimli Uygulamalı Geniş Anlatım.)
« Reply #5 on: June 27, 2009, 02:33:07 PM »
Tamam hocam . :)  yeniden upload ederim.
Yeniden upload etmene gerk yok ya. Yazıda img tagları içinde olan linkleri birde tagsız koy (:

Offline Sevgiformu.com

  • Semi-Newbie
  • *
  • Posts: 93
  • Gender: Male
    • Sevgiformu.com
Re: Style.Css (Resimli Uygulamalı Geniş Anlatım.)
« Reply #6 on: June 27, 2009, 02:34:04 PM »
:) bu 2.0 ya bu destek sitesine alışmaya çalışıyorum sory hocam :)

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

Offline grafitus

  • SMF Hero
  • ******
  • Posts: 3,034
    • beratdogan on GitHub
    • beratdogan on LinkedIn
    • @beratdgan on Twitter
Re: Style.Css (Resimli Uygulamalı Geniş Anlatım.)
« Reply #7 on: June 27, 2009, 04:19:44 PM »
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:)
sory hocam :)

Offline akbora

  • Sr. Member
  • ****
  • Posts: 960
    • Anında Tepki
Re: Style.Css (Resimli Uygulamalı Geniş Anlatım.)
« Reply #8 on: June 27, 2009, 07:31:59 PM »
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?
SMF 2.0.13
Default Theme
Utf8 Turkish
---------------

Offline Yağız...

  • SMF Super Hero
  • *******
  • Posts: 10,811
  • Gender: Male
    • MMO Browser
Re: Style.Css (Resimli Uygulamalı Geniş Anlatım.)
« Reply #9 on: June 28, 2009, 05:01:51 AM »
O da .buttonlist. images/maintab ile başlayan tüm dosyalar o bölümün arkaplanıdır.

Offline Minare

  • Sophist Member
  • *****
  • Posts: 1,233
  • Gender: Male
  • Yapayalnız Kalmak İskelelerde !
    • Meryemce
Re: Style.Css (Resimli Uygulamalı Geniş Anlatım.)
« Reply #10 on: June 28, 2009, 07:34:25 AM »
Güzel çalışma tbrk ler. İpuçlarına alınmayı hakeden bir konu.
O güzel Râsulu Yesrip yolunda
Hicret coşkusuyla aramalısın
Ayrılık Anne'den Baba'dan Yâr'dan
Ezelden geçerek kavuşmalısın

http://www.meryemce.biz

Offline Sevgiformu.com

  • Semi-Newbie
  • *
  • Posts: 93
  • Gender: Male
    • Sevgiformu.com
Re: Style.Css (Resimli Uygulamalı Geniş Anlatım.)
« Reply #11 on: June 28, 2009, 12:43:34 PM »
İngilizceyedemi çevirsem acaba hocam ? gerçi onları biliyordurda

Offline Minare

  • Sophist Member
  • *****
  • Posts: 1,233
  • Gender: Male
  • Yapayalnız Kalmak İskelelerde !
    • Meryemce
Re: Style.Css (Resimli Uygulamalı Geniş Anlatım.)
« Reply #12 on: June 28, 2009, 02:28:13 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 ;)
O güzel Râsulu Yesrip yolunda
Hicret coşkusuyla aramalısın
Ayrılık Anne'den Baba'dan Yâr'dan
Ezelden geçerek kavuşmalısın

http://www.meryemce.biz

Offline UzM@N

  • Jr. Member
  • **
  • Posts: 223
  • Gender: Male
  • İzmir
Re: Style.Css (Resimli Uygulamalı Geniş Anlatım.)
« Reply #13 on: September 26, 2009, 04:42:04 PM »
resimler uçmuş
UzM@N

Offline Sevgiformu.com

  • Semi-Newbie
  • *
  • Posts: 93
  • Gender: Male
    • Sevgiformu.com
Re: Style.Css (Resimli Uygulamalı Geniş Anlatım.)
« Reply #14 on: September 27, 2009, 03:00:57 AM »
güncellenmiştir selametle.

Offline alloha

  • Newbie
  • *
  • Posts: 3
Re: Style.Css (Resimli Uygulamalı Geniş Anlatım.)
« Reply #15 on: September 27, 2009, 07:34:32 AM »
çok teşekkürler süper oldu :)

Offline Sevgiformu.com

  • Semi-Newbie
  • *
  • Posts: 93
  • Gender: Male
    • Sevgiformu.com
Re: Style.Css (Resimli Uygulamalı Geniş Anlatım.)
« Reply #16 on: September 28, 2009, 03:05:11 PM »
hayırlı olsun kardeşim.

Offline stratovarios

  • Semi-Newbie
  • *
  • Posts: 34
  • Gender: Male
Re: Style.Css (Resimli Uygulamalı Geniş Anlatım.)
« Reply #17 on: October 03, 2009, 01:26:08 PM »
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ı

Offline Sevgiformu.com

  • Semi-Newbie
  • *
  • Posts: 93
  • Gender: Male
    • Sevgiformu.com
Re: Style.Css (Resimli Uygulamalı Geniş Anlatım.)
« Reply #18 on: October 03, 2009, 01:39:23 PM »
Bu anlatım 1.1.X serisi içindir hocam.

Offline Gurbet_42

  • Sophist Member
  • *****
  • Posts: 1,327
  • Gender: Male
Re: Style.Css (Resimli Uygulamalı Geniş Anlatım.)
« Reply #19 on: October 03, 2009, 09:01:02 PM »
Ellerine sağlık ,çok güzel anlatım olmuş.