Tema Kodlama Hkk.

[Krons]

Tema kodlamaya başlayacağımda kod kısmında sıkıntı yok kodlarım ama mesela global.css'te o kadar fazla şey var ki ne yapmalıyım nerelerden editlemeliyim ve neleri editlemeliyim ?
@#Power @Kyoya

[The Legend]

Temayı yaparken herkes iştediği bölgeden başlayabilir ben genelde temanın genel duruşu ile başlamak iştiyorum. Temanın genel duruşundan kastım, temanın genel genişliği ve rengidir.

Admin paneli Temalar & Şablonlar Temalar kısmından oluşturdugumuz temanın üstüne tıklıyoruz. karşınıza temanın stil sayfaları çıkacak bunları sayacak olursak ( global.css, usercp.css, modcp.css, star_ratings.css, showthread.css )'dir. Biz ilk olarak global.css ile temamızı yapmaya başlayacağız.global.css'ye giriyoruz  gelişmiş düzenlemeye tıklıyoruz css kodlarının en başında body { kodları gözüküyor yani temamızın arkaplan css kodları. biz burada fazla değişiklik yapmayalım sadece arkaplana resim ekleyelim. body { kısmında bulunan,

Kod:

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

background: #efefef;

kodu arkaplanı belirtiyor ama kod sadece renk kodunu gösterecek şekilde konulmuş. Biz resim ekleyebilmemiz için aşağıdaki kodla değiştiriyoruz.


Kod:

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

background: #131313 url(images/arkaplan_resmi.png);

kodda farklılık olarak url(images/arkaplan_resmi.png) kısmını ekledik. Yeni resim yolu eklemiş olduk. Siz resim ekleyebilmeniz için FTP ./imagesklasörüne arkaplan resimini atmanız gerekiyor. Attıgınız resimin adını url(images/arkaplan_resmi.png) bu kodda arkaplan_resmi.png bölümüne yazıyoruz. Ben .png yazdım siz kendi resminizin uzantısına göre değiştirebilirsiniz.

3) Şimdi temamızın genişliğini ayarlayalım. Aynı yerde bulunan #container {'i bulalım. buldugumuz #container {'in altında bulunan,

Kod:

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

width: 95%;

kodu temamızın genişliğini belirtiyor. Bizim temamızın şimdiki genişliği 95% miş. Ben temayı az daraltmak iştiyorum bunun için 95% sayısını 85%olarak değiştiriyorum. Yani temamını %10 daraltmış olduk.

4) Yolumuza temanın thead kısmını değiştirmekle devam edelim. .thead {'ı bulalım, bulduğumuz .thead {'ın altında bulunan,
Kod:

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

background: #026CB1 url(images/thead_bg.gif) top left repeat-x;

kodda resim yolu olan images/thead_bg.gif yolundaki thead resmini kendi thead resminizle FTP ./images/klasöründen thead_bg.gif resmini değiştiriyoruz.

5) Şimdi thead'ın altında bulunan tcat kısmını değiştirelim. Bunun için .tcat { kalıbını bulalım. Yine .tcat {'ın altında,

Kod:

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

background: #ADCBE7;

kodunu bulalım. Ben tcat kısmınada resim eklemek iştiyorum ama yukarıdaki kodda resim adresi belirtilmemiş, biz body { kısmında yaptığımız gibi koda resim yolunu ekleyelim. Ben yine kodu hazırladım, aşağıdaki kodu yukarıdaki orjinali ile değiştiriyoruz.

Kod:
background: #131313 url(images/tcat.png);



yukarıdaki kodda ben resim adını tcat.png yaptım, siz FTP ./images klasörüne tcat kısmı için atacağınız resim adını işter tcat olarak değiştirin. işterurl(images/tcat.png) kodunda bulunan tcat adını kendi resminizin adı ve uzantısıyla değiştiriniz.

6) Şimdi temamızın ( .trow1 { .trow2 { .trow_shaded { .trow_selected td { ve .trow_sep { ) kısımlarını Şimdiye kadar yaptığımız bölümlere uyarlayalım. Eğer sizinki zaten uygunsa boşuna uğrasmanıza gerek yok. Ama hayır uymadı diyorsanız yukarıda belittiğim kısımları bularak alttlarındaki,

Kod:
background: #e5e5e5;



kodundan ayarlayabilirsiniz. Kodda bulunan #e5e5e5 kısmı renk kodudur. siz

Kod:

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

[code]http://renkler.org/

[/code]


sitesinden kendiniz iştediğiniz renk koduyla değiştirebilir/temaya uyarlayabilirsiniz.

7) Şimdede tfoot bölümünü düzenleyelim. Şimdi .tfoot { kısmını bulalım. .tfoot { kısmını hemen altındaki,

Kod:

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

background: #026CB1 url(images/thead_bg.gif) top left repeat-x;

kodu bulunuyor. Bazılarınızın dikkatini çekmiştir. Bu kod thead kısmındaki kodla aynı yani thead için eklediğimiz kod tfoot kısmındada gözükeceği anlamına geliyor. Bencede böyle olması doğru. Neden doğru derseniz tfoot ve thead'ın birbirine uyumlu olması temayı daha iyi gösterecektir. Tabi sadece benim fikrim bu şekildedir. Tam terşini düşünenler,
yukarıdaki kodda bulunan [b]thead_bg.gif resmi yerine FTP ./images klasörüne tfoot kısmı için uygun resmi atınız ve thead_bg.gif resim adı ve uzantısı ile değiştiriniz.[/b]


Alıntıdır.

[Einstein™]

Hayal gücün ne istiyorsa onu düşün, daha sonra eklemek istediğin yerleri söyle. Bizde yardımcı olalım, global.css'de çeşitli kodlar var arkadaş üst yorumdada belirtmiş birazını, onlarada göz atabilirsin. 

[Krons]

Herhalde beni tam anlamamışsınız :D 
Kodları yazmak kısmında sorun yok kodları yazarım ama kodları NEREYE yazacağımı bilmiyorum mesela panel , panel ne ? Bunları bilmiyorum. Bana bunları anlatsanız daha iyi olur @Einstein

[yakdoreee]

Yanlış etiketleme @Einstein™  olacaktı @Einstein™

[#Power]

Kodları editleyeceksiniz. 0'dan yazacağınız çok fazla kod olmayacak. CSS ve şablon editleyerek tema yapılır.

[QuitterTR]

Bu sana şuanlık yeterli.

Nereler ne olduğunu anlatıyor.

Yalnız bir uyarım var:
mesela .thead a girdin orda bu kod:

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

url (resim linki;)

var bu kodla resim eklersin.

onun yanındaki sondaki kodu elleme o kod olmadan renk yapamazsın.

[Krons]

Kodları biliyorum sadece nedenin neresi olduğunu bilmiyordum saol :)

[L34DRi]

Yukaridaki resim sadece ana sayfa için. Diğer sayfalarda (chrome kullandığınızı varsayiyotum) ters tiklayip oğeyi denetle yapin. Değiştirmek istediginiz bolumde sol taraf html kodu sağ taraf css kodlaridir. Css kodlarinin en ustunde .body .content .postbit gibi tanimlayicilar bulunur. Global.css ten bunlari bulup duzenleyebilirsiniz.

Kolay gelsin...

[WaRRioRa]

Yukaridaki resim sadece ana sayfa için. Diğer sayfalarda (chrome kullandığınızı varsayiyotum) ters tiklayip oğeyi denetle yapin. Değiştirmek istediginiz bolumde sol taraf html kodu sağ taraf css kodlaridir. Css kodlarinin en ustunde .body .content .postbit gibi tanimlayicilar bulunur. Global.css ten bunlari bulup duzenleyebilirsiniz.

Kolay gelsin...

Sağolun hocam bende yararlandım az bu konudan :)