Simple Machines Community Forum

1.Css Nedir? (#post_a)
2.Link (#post_b)
3.Liste (#post_c)
4.Katman (#post_d)
5.Font (Yazi Tipi) (#post_e)
6.Text (Metin) (#post_f)
7.Imleç (#post_g)
8.Zemin (#post_k)
9.Tablo (#post_l)
10.Scroll Bar (#post_m)






Css Nedir?
HTML bize metin biçimlendirme alanında çok geniş olanaklar sunar. CSS, uzun yazılışıyla Cascading Style Sheets, veya Türkçesiyle Stil şablonları ise bunu bir adım daha öteye götürür, bize sayfalarımız için global şablonlar hazırlama olanağı verdiği gibi, tek bir harfin stilini; yani renk,  font, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki bu esnekliğidir.
Bir web sayfası içerisinde zaten estetik kuralları gereği yüzlerce renk ve font kullanmayız. Genelde birbiriyle uyumlu birkaç renk ve birkaç font kullanırız ki, bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp bütün web sayfamızda kullanabiliriz.Bu şekilde güncelleme yaparken de onlarca sayfayı değiştirmekten kurtuluruz.
CSS kodları HTML kodlarının içine yazılırlar. Türüne göre body veya head bölümlerinde yer alabilirler. Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde HTML belgesi içerisinde çağırılabilirler.
Hemen hemen her konuda olduğu gibi CSS konusunda da Microsoft Internet Explorer ve Netscape farklı yorumlar ortaya koyarlar. Bu noktada her iki browser'ın da aynı/benzer yorumlayacağı kodlar yazmak en uygunudur.

LİNK ÖZELLİKLERİ
a :Linkin, sayfa açıldığında tıklanmadan veya ümleç üzerine getirilmeden önceki durumudur.
a:hover :Linkin imleç üzerine getirildiğindeki durumudur.
a:active :Linkin tıklandığı andaki durumudur.
a:visited :Linkin tıklandıktan sonraki durumudur.


BİÇİMLENDİRME:
color:Linkin rengini belirler.
background-color:Linkin zemin rengini belirler.
background-image:Linkin zeminine resim ekler(Bu animated-gif de olabilir.)
text-decoration:Linkin altının,üstünün vs. çizgili olup olmayacağını belirler.
font-weight:Yazının kalınlık veya inceliğini belirler.
border:Linkin etrafına kenarlık ekler.
display:Linki içeren hücre , satır vb. istenilen alanın seçilmesini sağlar.

LİSTE ÖZELLİKLERİ
disk:Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.
circle : Liste biçiminin çember şeklinde olmasını sağlar.
square : Liste biçiminin kare olmasını sağlar.
decimal : Liste biçiminin rakamlardan oluşmasını sağlar.
lower-roman : Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar.
upper-roman : Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar.
lower-alpha : Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar.
upper-alpha : Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar.
none : Listenin simgesiz olmasını sağlar.
inside : Listenin ikinci satırının en soldan başlamasını sağlar.
Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar.
list-style-image : Liste biçiminin resim olmasını sağlar.

KATMAN ÖZELLİKLERİ
position:Katmanın yerinin belirlenmesini sağlar.
absolute:Katmanın yerinin pencere esas alınarak belirlenmesini sağlar.
relative: Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar.
static:Katmanın yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar.
top:Katmanın üstten ne kadar aşağıda olması gerektiğini belirler.
left:Katmanın soldan ne kadar içeride olması gerektiğini belirler.
width:Katmanın genişliğinin ne kadar olacağını belirler.
height:Katmanın yüksekliğinin ne kadar olacağını belirler.
overflow:Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.
auto:Otomatik olarak belirlenir.
scroll:Kaydırma çubuğu ekleyerek görünmesini sağlar.
visible : Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin görünmesini sağlar.
hidden:Sığmayan yerleri gizler.
visibility:Katmanın görünebilirlik ayarını yapar.
visible : Katmanın görünür olmasını sağlar.
hidden:Katmanı gizler.
z-index : Katmanların alttan üste doğru hangi sıra ile gösterileceğini belirler.1 değeri katmanın en altta olacağını belirtir.


FONT ÖZELLİKLERİ
font-family:Yazı türünü belirler.(Arial , Verdana gibi.)
font-style:Yazının normal veya sağa eğik olmasını sağlar.
font-variant:Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar.
font-weight:Yazının kalınlık-inceliğini belirler.
font-size:Yazının büyüklüğünü belirler.

TEXT ÖZELLİKLERİ
word-spacing : Kelimeler arasında bırakılacak boşluğu boşluğu belirler.
letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler.
text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını belirler.
underline : Kelimenin altının (Satır altından) çizili olmasını sağlar.
overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar.
line-through : Kelimenin ortasından çizili olmasını sağlar.
blink : Kelimenin yanıp sönmesini sağlar.(Netscape için)
vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler.
text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar.
capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar.
uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar.
lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar.
none : Kelimelerin orjinal metindeki gibi olmasını sağlar.
text-align: Metnin dikey olarak nasıl hizalanacağını belirler.
left : Metni sola yaslar.
right : Metni sağa yaslar.
center : Metni ortalar.
justify : Metni iki yana yaslar.
text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler.
line-height : Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.)
first-line : Metnin ilk satırının biçimlendirilmesini sağlar.
first-letter : Metnin ilk harfinin biçimlendirilmesini sağlar.

İMLEÇ ÖZELLİKLERİ
crosshair:İmlecin artı işareti şeklinde olmasını sağlar.
auto:İmlecin metinde dikey çizgi ,boş alanda normal ok şeklinde olmasını sağlar.
default:İmlecin hem metinde hem de boş alanda normal ok şeklinde olmasını sağlar.
hand:İmlecin linkte olduğu gibi el şeklinde olmasını sağlar.
move:İmlecin taşıma işareti şeklinde olmasını sağlar.
ne-resize:İmlecin sağa yatık normal ok olmasını sağlar.
nw-resize:İmlecin sola yatık normal ok olmasını sağlar.
se-resize:İmlecin yukardan aşağı doğru ve sağa yatık normal ok olmasını sağlar.
sw-resize:İmlecin yukardan aşağı doğru ve sola yatık normal ok olmasını sağlar.
n-resize:İmlecin aşağıdan yukarıya doğru ince ok şeklinde olmasını sağlar.
s-resize:İmlecin yukardan aşağı doğru ince ok şeklinde olmasını sağlar.
w-resize:İmlecin sola doğru ince ok şeklinde olmasını sağlar.
e-resize:İmlecin sağa doğru ince ok şeklinde olmasını sağlar.
text:İmlecin hem metinde hem de boş alanda metinde olduğu gibi görünmesini sağlar.
wait:İmlecin meşgul animasyonuna dönüşmesini sağlar.
help:İmlecin yardım-soru işaretine dönüşmesini sağlar


ZEMİN ÖZELLİKLERİ
background-color: Zeminin rengini belirler.
#color : Renk adı.
transparent: Zeminin saydam olmasını sağlar.
background-image: Zemine resim yerleştirilmesini sağlar.
url : Zemine yerleştirilen resmin adresi.
background-repeat: Zemine yerleştirilen resmin nasıl yayılacağını belirler.
repeat : Resmin bütün zemine yayılmasını sağlar.
repeat-x : Resmin sol-üstten sağ-üste doğru yayılmasını sağlar.
repeat-y : Resmin sol-üstten sol-alta doğru yayılmasını sağlar.
no-repeat: Resmin yayılmadan orjinal boyutuyla görünmesini sağlar.
background-attachment: Zemindeki resmin , sayfa kaydırma çubuğuyla hareket ettirildiğindeki durumunu belirler.
scroll : Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar.
fixed: Sayfa kaydırılsa da zeminin sabit kalmasını sağlar
background-position: Zemindeki resmin istenilen şekilde yerleştirilmesini sağlar.
top : Resmi yukarı yerleştirir.
center : Resmi ortalar.
bottom : Resmi aşağı yerleştirir.
left : Resmi sola yerleştirir.
right: Resmi sağa yerleştirir.
...px : Resmin soldan istenilen ölçüde içerde olmasını sağlar.


TABLO ÖZELLİKLERİ
margin : Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler.
margin-top : Tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler.
margin-right : Tablo ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler.
margin-bottom : Tablo ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler.
margin-left : Tablo ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler.

padding : Tablo kenarları ile tablo içeriği (Yazı vb.) arasında bırakılacak boşluğu belirler.
padding-top : Tablonun üst kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-right : Tablonun sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-bottom : Tablonun alt kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-left : Tablonun sol kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.

border : Tablonun kenarlarının şekillendirilmesini sağlar.

border-top : Tablonun üst kenarının şekillendirilmesini sağlar.
border-left : Tablonun sol kenarının şekillendirilmesini sağlar.
border-bottom : Tablonun alt kenarının şekillendirilmesini sağlar.
border-right : Tablonun sağ kenarının şekillendirilmesini sağlar.

border-width : Tablonun kenarlarının kalınlığını belirler.
border-top-width : Tablonun üst kenarının kalınlığını belirler.
border-right-width : Tablonun sağ kenarının kalınlığını belirler.
border-bottom-width : Tablonun alt kenarının kalınlığını belirler.
border-left-width : Tablonun sol kenarının kalınlığını belirler.

border-style : Tablonun kenarlık türünü belirler.
border-top-style : Tablonun üst kenarlık türünü belirler.
border-right-style : Tablonun sağ kenarlık türünü belirler.
border-bottom-style : Tablonun alt kenarlık türünü belirler.
border-left-style : Tablonun sol kenarlık türünü belirler.

border-color : Tablonun kenarlarının rengini belirler.
border-top-color : Tablonun üst kenarının rengini belirler.
border-right-color : Tablonun sağ kenarının rengini belirler.
border-bottom-color : Tablonun alt kenarının rengini belirler.
border-left-color : Tablonun sol kenarının rengini belirler.

color : Tabloda geçen metnin rengini belirler.

width : Tablonon genişliğini belirler.

height : Tablonun yüksekliğini belirler.


NOT : Başlık "TABLO" olarak verildi Ancak bu nitelikler başta TD , TR , TH vs. olmak üzere hemen her etiket için kullanılabilir.CSS' yi özel kılan da zaten bu...


KAYDIRMA ÇUBUĞU ÖZELLİKLERİ
scrollbar-face-color :Kaydırma çubuğunun yüzey rengi , aynı zamanda zemini de etkiliyor.
scrollbar-base-color :Kaydırma çubuğununun sol ve üst kenarlıklarını çizgi halinde kaplıyor.
scrollbar-shadow-color :Sağ ve alt kenarlıkların gölge rengi.
scrollbar-highlight-color :Sol ve üst kenarlıkların gölge rengi,aynı zamanda zemini de etkiliyor.
scrollbar-arrow-color :Yön oklarının rengi

Kaydırma çubuğu, sadece Internet Explorer'da geçerlidir.

-Derlenmiştir.

Hay maşşallah! Arbalot, seni SMF'nin genel dokümentasyon takımına alalım ;) Eline sağlık güzel olmuş. İstersen özellik isimlerini eğik yapabilirsin, mesela:

scrollbar-shadow-color :Sağ ve alt kenarlıkların gölge rengi.
scrollbar-highlight-color :Sol ve üst kenarlıkların gölge rengi,aynı zamanda zemini de etkiliyor.
scrollbar-arrow-color :Yön oklarının rengi

Mükemmel bi kaynak oluşturmuşsun bence sabit ellerine sağlık  ;D

ooo :) Gözümsün Abi Eline yüreğine sağlık çok güzel olmuş...  :)

Arbolat dostum Süper olmuş...Eline Sağlık  ;D

Arbalot'tan şahane bir çalışma... teşekkürler :) -- Ben hala bunun (CSS) kitabını okuyorum... Bitmedi aylardır... :)

Çok güzel yararlı bir bilgi olmuş saol...

eline sağlık harikalar yaratmışsın cok işimize yarayacak

mükemmel olmuş eline sağlık Arbalot  ;)

Arkadaşlar birşey sorcam bu bisim default tema denen şeydeki style.css'de scrollbar kodları yok mu bana mı öyle gelio ?! :( (o kadar style.css'yi kurcaladım zamanında,ama daha şimdi bu konuyu gördüm 10 dklik iş olcaktı arbalot'un sayesinde ;) bi tek scrollbar'ı çözememiştim onuda halledemedim :(


Arkadaşlar buyrun bakın benim style.css:
/* Normal, standard links. */
a:link
{
color: #ff8000;
text-decoration: none;
}
a:visited
{
color: #ff8000;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}

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

/* Tables should show empty cells. */
table
{
empty-cells: show;
}

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

/* The main body of the entire forum. */
body
{
background-color: #fafafa;
margin: 10px;
padding: 0px 30px 20px 30px;
        background-image: url('images/bg.gif');
}

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

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

/* All input elements that are checkboxes or radio buttons. */
input.check
{
}

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

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

/* No image should have a border when linked */
a img{
border: 0;
}
/* A quote, perhaps from another post. */
.quote
{
color: #000000;
background-color: #D7DAEC;
border: 1px solid #000000;
margin: 1px;
padding: 1px;
font-size: x-small;
line-height: 1.4em;
}

/* A code block - maybe even PHP ;). */
.code
{
color: #000000;
background-color: #dddddd;
font-family: "courier new", "times new roman", monospace;
font-size: x-small;
line-height: 1.3em;
/* Put a nice border around it. */
border: 1px solid #000000;
margin: 1px auto 1px auto;
padding: 1px;
width: 99%;
/* Don't wrap its contents, and show scrollbars. */
white-space: nowrap;
overflow: auto;
/* Stop after about 24 lines, and just show a scrollbar. */
max-height: 24em;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
color: #000000;
text-decoration: none;
font-style: normal;
font-weight: bold;
font-size: x-small;
line-height: 1.2em;
}

/* Generally, those [?] icons.  This makes your cursor a help icon. */
.help
{
cursor: help;
}

/* /me uses this a lot. (emote, try typing /me in a post.) */
.meaction
{
color: blue;
}

/* The main post box - this makes it as wide as possible. */
.editor
{
width: 96%;
}

/* Highlighted text - such as search results. */
.highlight
{
background-color: black;
font-weight: bold;
color: yellow;
}

/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg
{
color: #000000;
background-color: #ECEDF3;
}
.windowbg2
{
color: #000000;
background-color: #F6F6F6;
}
.windowbg3
{
color: #000000;
background-color: #E0E1E8;
}
/* the today container in calendar */
.calendar_today
{
background-color: #FFFFFF;
}

/* 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: blue;
font-style: small;
background-color: #E9F0F6;
background-image: url(images/titlebg.jpg);
border-bottom: solid 1px #9BAEBF;
border-top: solid 1px #FFFFFF;
background-repeat: repeat-x;
padding-left: 10px;
padding-right: 10px;
}
.titlebg, .titlebg a:link, .titlebg a:visited
{
font-weight: bold;
color: black;
font-style: normal;
}

.titlebg a:hover
{
color: #404040;
}
/* same as titlebg, but used where bold text is not needed */
.titlebg2 a:link, .titlebg2 a:visited
{
color: black;
font-style: normal;
text-decoration: underline;
}

.titlebg2 a:hover
{
text-decoration: underline;
}

/* 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-image: url(images/catbg.jpg);
background-color: #E9F0F6;
color: #000000;
padding-left: 10px;
padding-right: 10px;
}
.catbg2 , tr.catbg2 td
{
background-image: url(images/catbg2.jpg);
background-color: #E9F0F6;
color: #000000;
padding-left: 10px;
padding-right: 10px;
}
.catbg, .catbg2, .catbg3
{
border-bottom: solid 1px #E9F0F6;
background-repeat: repeat-x;
}
.catbg, .catbg2
{
font-weight: bold;
}
.catbg3, tr.catbg3 td, .catbg3 a:link, .catbg3 a:visited
{
font-size: 95%;
color: white;
text-decoration: none;
}
.catbg a:link, .catbg a:visited , .catbg2 a:link, .catbg2 a:visited
{
color: white;
text-decoration: none;
}
.catbg a:hover, .catbg2 a:hover, .catbg3 a:hover
{
color: #e0e0ff;
}
/* This is used for tables that have a grid/border background color (such as the topic listing.) */
.bordercolor
{
background-color: #ADADAD;
padding: 0px;
}

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

/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext
{
font-size: x-small;
font-family: verdana, sans-serif;
}
.middletext
{
font-size: 90%;
}
.normaltext
{
font-size: small;
}
.largetext
{
font-size: large;
}


/* Posts and personal messages displayed throughout the forum. */
.post, .personalmessage
{
width: 100%;
overflow: auto;
line-height: 1.3em;
}

/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature
{
width: 100%;
overflow: auto;
padding-bottom: 3px;
line-height: 1.3em;
}

/* Sometimes there will be an error when you post */
.error{
color: red;
}


/* definitions for the main tab, active means the tab reflects which page is displayed */
.maintab_first, .maintab_back, .maintab_last, .maintab_active_first, .maintab_active_back, .maintab_active_last
{
background-position: left bottom;
color: white;
text-transform: uppercase;
vertical-align: top;

}
.maintab_back, .maintab_active_back
{
color: white;
text-decoration: none;
font-size:  9px;
vertical-align: top;
padding: 2px 6px 6px 6px;
font-family: tahoma, sans-serif;
}

.maintab_first
{
background-image: url(images/maintab_first.gif);
background-repeat: no-repeat;
width: 10px;
}
.maintab_back
{
background-image: url(images/maintab_back.gif);
background-repeat: repeat-x;
}
.maintab_last
{
background-image: url(images/maintab_last.gif);
background-repeat: no-repeat;
width: 8px;
}
.maintab_active_first
{
background-image: url(images/maintab_active_first.gif);
background-repeat: no-repeat;
width: 6px;
}
.maintab_active_back
{
background-image: url(images/maintab_active_back.gif);
background-repeat: repeat-x;
}
.maintab_active_last
{
background-image: url(images/maintab_active_last.gif);
background-repeat: no-repeat;
width: 8px;
}

/* 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;
}

.maintab_back a:hover, .maintab_active_back a:hover
{
color: #0ec4d8;
text-decoration: none;
}
/* definitions for the mirror tab */
.mirrortab_first, .mirrortab_back, .mirrortab_last, .mirrortab_active_first, .mirrortab_active_back, .mirrortab_active_last
{
background-position: left top;
color: white;
text-transform: uppercase;
vertical-align: top;

}
.mirrortab_back, .mirrortab_active_back
{
color: white;
text-decoration: none;
font-size: 9px;
vertical-align: bottom;
padding: 6px 6px 2px 6px;
font-family: tahoma, sans-serif;
}

.mirrortab_first
{
background-image: url(images/mirrortab_first.gif);
background-repeat: no-repeat;
width: 10px;
}
.mirrortab_back
{
background-image: url(images/mirrortab_back.gif);
background-repeat: repeat-x;
}
.mirrortab_last
{
background-image: url(images/mirrortab_last.gif);
background-repeat: no-repeat;
width: 6px;
}
.mirrortab_active_first
{
background-image: url(images/mirrortab_active_first.gif);
background-repeat: no-repeat;
width: 6px;
}
.mirrortab_active_back
{
background-image: url(images/mirrortab_active_back.gif);
background-repeat: repeat-x;
}
.mirrortab_active_last
{
background-image: url(images/mirrortab_active_last.gif);
background-repeat: no-repeat;
width: 8px;
}

/* 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;
}

.mirrortab_back a:hover, .mirrortab_active_back a:hover
{
color: #0ec4d8;
text-decoration: none;
}

Of ne beceriksiz insanım ben yaaa  :(  :(  :( 

Peki arkadaslar ben bölüm acıklamalarını birascık uzun tutmak istiyom yani bir kısımı ana sayfada görünsün tamamıda bölümün üstüne geldiğinde ufak bir kutucuk acılıpı icinden gösterilsin bunu nasıl yapabilirim ?

bunun css ile pek bir alakası yok...
harzem yine iş cıktı sana...

Quote from: Arbalot on June 21, 2006, 05:47:32 PM
bunun css ile pek bir alakası yok...
harzem yine iş cıktı sana...

Kusura bakma Arbalot cssde link işlemleri yapıldığı için burada sordum ... Ben o zaman yeni konu olarak acayım ...

beyler ben çöl ateşini kullanıyorum forumdaki tüm yazıların altı çizili ben hiç olmasın istiyorum style.css deki tüm underlineları sildim ama nafile sadece kategori isimleri deişti bölüm isimleri üyeler fln hepsi aynı

Quote from: pr0xymAn1ac on July 04, 2006, 07:35:40 AM
beyler ben çöl ateşini kullanıyorum forumdaki tüm yazıların altı çizili ben hiç olmasın istiyorum style.css deki tüm underlineları sildim ama nafile sadece kategori isimleri deişti bölüm isimleri üyeler fln hepsi aynı

Senin konuna yazdığım cevaba bi göz atarmısın..
underlineleri silmeyeceksin none yapacaksın oluyor.

çok faydalı olmuş... teşekkürler..

hay maşallah nazar değmesin arbolat gözünün yağına çift yumurta kırıyım ellerine salık


(ilk mesajıma böle güzel bi topic e yazmak benim için onur  verici :D)

(http://img332.imageshack.us/my.php?image=forum5oc.jpg)
resimde gosterdiğim yerlerin rengini değistirmek için tam olarak ne nereleri değistirmem lazım

1 . si için images klasorunde catbg leri arayacan ve bulup değiştirecen
2. için boardindex.template.php de
<td colspan="3" class="windowbg', !empty($settings['seperate_sticky_lock']) ? '3' : '', '">
bunu bulup windowsbg olan yeri windowsbg21 yapacan ve style.css de yeni bi değişken tanımlayacan...

Quote from: Arbalot on July 14, 2006, 03:57:42 PM
1 . si için images klasorunde catbg leri arayacan ve bulup değiştirecen
2. için boardindex.template.php de

Code Select Expand

<td colspan="3" class="windowbg', !empty($settings['seperate_sticky_lock']) ? '3' : '', '">
bunu bulup windowsbg olan yeri windowsbg21 yapacan

buraya kadar tamamda "style.css de yeni bi değişken tanımlayacan..." kısmını anlamadım tam olarak onu nasıl yapıcam?

mesela

.windowbg
{
color: #000000;
background-color: #ECEDF3;
}


boyle bi ifade var bunu kopyalayacan bu koddan hemen sonra yapıstıracan
daha sonra .windowbg yazısını .windowbg21 olarak değiştirecen

sanırım cok kalın kafalıyım :) bu sefer anladım ama deniyelim bi olmazsa yine rahatsız edicem birazcık :P
bide alt bolumlerin renginden vazgectim kalsın orası :) sadece üst taraflar yeter.ayrıca premium forum olayına baktım onuda sadece tek bir yerini yapıcam onada bi kod ayarı yapılcak gibi...

flood olcak biraz ama Arbalot ustadım ben sadece mp3 bolumunun değil butun forumların üst kısmını değistirmek istiorum... ;)

sen bunu uyguladın mı?
eger uyguladınsa butun bolumler değişmesi lazım.
hatta her  katagoriye farklı bi renk atayabiliyorsun.
bknz: premium forum

tam olarak son sekli buysa uyguluyorum aksama haberin olur ustad ;)

tam olarak istediğim http://www.geceninrengi.net/forum/index.php gibi

oldu ya iste budur saolasın Arbalot kardes

EDİT: (http://img129.imageshack.us/my.php?image=forum1ci3.jpg)
resimdeki yerlerin rengini nasıl değistirebilirim?aynı sekilde yukardaki login bolumude gri :(

bi de elim değmişken bolumlerin yazılarını birascık buyultmek istedim konularda buyudu bu nasıl düzeltebiliriz
(http://img256.imageshack.us/my.php?image=forum2kv3.jpg)

Quote from: SenSatiOn on June 18, 2006, 11:53:41 AM
Arkadaşlar birşey sorcam bu bisim default tema denen şeydeki style.css'de scrollbar kodları yok mu bana mı öyle gelio ?! :( (o kadar style.css'yi kurcaladım zamanında,ama daha şimdi bu konuyu gördüm 10 dklik iş olcaktı arbalot'un sayesinde ;) bi tek scrollbar'ı çözememiştim onuda halledemedim :(

Of ne beceriksiz insanım ben yaaa  :(  :(  :( 

Arkadaşlar bana cewap werecek biri yok mu?

harika bir çalışma emeğin için teşekkürler kardeşim

Quote/* Normal, standard links. */
a:link, a:visited
{
   color: #005177;
   background-color: transparent;
   text-decoration: none;
}
a:hover
{
   color: #cc3333;
   background-color: transparent;
   text-decoration: none;
}

/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
   color: yellow;
   background-color: blue;
   text-decoration: none;
}
a.nav:hover
{
   font-weight: bold;
   color: #cc3333;
   background-color: transparent;
   text-decoration: underline;
}

/* Tables should show empty cells too. */
table
{
   empty-cells: show;
}

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

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

/* Checkboxes shouldn't have a background color. */
input.check
{
   background-color: transparent;
}

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

/* Standard horizontal rule.. */
hr
{
   color: #6394bd;
   background-color: transparent;
}
/* A more colorful hr.. */
.hrcolor
{
   height: 1px;
   border: 0;
   color: #6394bd;
   background-color: #6394bd;
}

/* A quote, perhaps from another post. */
.quote
{
   color: yellow;
   background-color: blue;
   border: 1px solid black;
   margin: 1px;
   padding: 1px;
   font-size: x-small;
}

/* A code block - maybe even PHP ;). */
.code
{
   color: #000000;
   background-color: #cccccc;
   border: 1px solid black;
   margin: 1px;
   padding: 1px;
   font-size: x-small;
   line-height: 1.3em;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
   color: #000000;
   text-decoration: none;
   font-style: normal;
   font-weight: bold;
   font-size: x-small;
   line-height: 1.2em;
}

/* Generally, those [?] icons. */
.help
{
   cursor: help;
   background-color: transparent;
}

/* /me uses this a lot. */
.meaction
{
   color: red;
   background-color: transparent;
}

/* The main post box - this makes it as wide as possible. */
.editor
{
   width: 100%;
}

/* Highlighted text - such as search results. */
.highlight
{
   background-color: yellow;
   font-weight: bold;
   color: black;
}

/* Alternating backgrounds... */
.windowbg
{
   color: #000000;
   background-color: #afc6db;
}
.windowbg2
{
   color: #000000;
   background-color: #f8f8f8;
}

/* Titles - such as table headers. */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg a:link, .titlebg a:visited, .titlebg2, tr.titlebg2 th, tr.titlebg2 td, .titlebg2 a:link, .titlebg2 a:visited
{
   font-weight: bold;
   font-style: normal;
   color: #ffffff;
   background-color: #6e94b7;
}
.titlebg a:hover, .titlebg2 a:hover
{
   color: #ffffff;
   text-decoration: underline;
}

/* The category headers, page indexes, and such things. */
.catbg, .catbg3
{
   font-weight: bold;
   background-color: #afc6db;
   background-image: url(images/catbg.gif);
   color: #000000;
}

/* The borders around things. */
.bordercolor
{
   background-color: #6394bd;
}
.tborder
{
   border: 1px solid #6394bd;
}

/* Default font sizes. */
.smalltext
{
   font-size: x-small;
}
.normaltext
{
   font-size: small;
}
.largetext
{
   font-size: large;
}
/* No image should have a border when linked */
a img{
   border: 0;
}

arkadaşlar başlaarında tırnak gibi bi işaret olan yazıların anlamlarını yazarmısınız

ustalar benım sıtede ust mavı alt gri kaldı ben bu CSS ile oynadım bunu duzeltemedım yardımcı olabilir misiniz

sevgigsm.net/forum

/* Normal, standard links. */
.mytopbar
{
        background-image: #606070 ;
}

.mytop
{
       padding: 20px;
       border-top: solid 0px #ffffff;
       border-left: solid 0px #f0f0ff;
       border-bottom: solid 0px #202030;
       border-right: solid 0px #606070;
       background-image: url(images/mytop.jpg);
       background-color: #b5bec9;
       background-repeat: #606070;
       }
.mybar1
{
       padding: 8px;
       border-top: solid 1px #ffffff;
       border-left: solid 1px #f0f0ff;
       border-bottom: solid 1px #202030;
       border-right: solid 1px #606070;
       background-color: #77B6DC;
       }
.mybar
{
       padding: 8px;
       border-top: solid 1px #ffffff;
       border-left: solid 1px #f0f0ff;
       border-bottom: solid 1px #202030;
       border-right: solid 1px #606070;
       background-color: #ccd6dc;
       }
.mypic
{
       padding: 0px;
       border-bottom: solid 1px #ffffff;
       border-right: solid 1px #f0f0ff;
       border-top: solid 1px #202030;
       border-left: solid 1px #606070;
       background-color: #ccd6dc;
       }
a:link , a:visited
{
        color: #000000;
        text-decoration: underline;
}
a:hover
{
        color: #0000ff;
        text-decoration: underline;
}

/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
        color: #000000;
        text-decoration: none;
}
a.nav:hover
{
        font-weight: bold;
        color: #ffffff;
        text-decoration: underline;
}

/* Tables should show empty cells. */
table
{
        empty-cells: show;
}

/* By default (td, body..) use Tahoma in black. */
body, td
{
        color: #000000;
        font-size: small;
        font-family: Tahoma, arial, helvetica, serif;
}

/* The main body of the entire forum. */
body
{
        background-image: url(images/myback.jpg);
        background-repeat: repeat-x;
        background-color: #7e8e9f;
        margin: 10px;
        margin-top: 0px;
        padding: 0px;
}

/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea, button
{
        font-size: 10pt;
        color: #000000;
        font-family: Tahoma, arial, helvetica, serif;
}

/* All input elements that are checkboxes or radio buttons. */
input.check
{
}

/* Selects are a bit smaller, because it makes them look even better 8). */
select
{
        font-size: 9pt;
        font-weight: normal;
        color: #000000;
        font-family: Tahoma, arial, helvetica, serif;
}

/* Standard horizontal rule.. (

---

, etc.) */
hr, .hrcolor
{
        height: 1px;
        border: 0;
        color: #666666;
        background-color: #666666;
}

/* A quote, perhaps from another post. */
.quote
{
        color: #000000;
        background-color: #C3B8D0;
        border: 1px solid #000000;
        margin: 1px;
        padding: 1px;
        font-size: x-small;
}

/* A code block - maybe even PHP ;). */
.code
{
        color: #000000;
        background-color: #cccccc;
        border: 1px solid #000000;
        padding: 1px;
        font-family: "courier new", helvetica, "times new roman", serif;
        font-size: x-medium;
        width: 99%;
        margin: 1px auto 1px auto;
        white-space: nowrap;
        overflow: auto;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
        color: #000000;
        text-decoration: none;
        font-style: normal;
        font-weight: bold;
        font-size: x-small;
}

/* Generally, those [?] icons.  This makes your cursor a help icon. */
.help
{
        cursor: help;
}

/* /me uses this a lot. (emote, try typing /me in a post.) */
.meaction
{
        color: red;
}

/* The main post box - this makes it as wide as possible. */
.editor
{
        width: 96%;
}

/* Highlighted text - such as search results ;). */
.highlight
{
        background-color: yellow;
        font-weight: bold;
        color: black;
}

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

/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature
{
}

/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
a.titlebg, .titlebg, tr.titlebg td, .titlebg a:link, .titlebg a:visited
{
        color: #ffffff;
        font-style: normal;
        background-color: #404e64;
}
a.titlebg:hover, .titlebg a:hover
{
        color: #dfdfff;
}

/* This is used for categories, page indexes, and several other areas in the forum. */

.catbg, .catbg2
{
        background-color: #60a0c0;
        font-weight: bold;
        font-size: 12px;
        color: #000;
}

.mycat, a.mycat
{
        font-weight: bold;
        font-size: 12px;
        color: #ffffff;
        text-decoration: none;
}

a.mycat:hover
{
        color: #d0d0ff;
        text-decoration: none;
}

/* This is used for tables that have a grid/border background color (such as the topic listing.) */
.bordercolor
{
       border-top: solid 1px #ffffff;
       border-left: solid 1px #f0f0ff;
       border-bottom: solid 1px #202030;
       border-right: solid 1px #606070;
       background-color: #404040;
}

/* This is used on tables that should just have a border around them. */
.tborder
{
       border-top: solid 1px #ffffff;
       border-left: solid 1px #f0f0ff;
       border-bottom: solid 1px #202030;
       border-right: solid 1px #606070;
       background-color: #7e8e9f;
        padding: 2px;
}
/* This is used on tables that should just have a border around them. */
.myborder
{
       background-color: #505060;
}

/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext
{
        font-size: x-small;
        font-family: Tahoma, arial, helvetica, serif;
}
.smalltextwhite
{
        color: #ffffff;
        font-size: x-small;
        font-family: Tahoma, arial, helvetica, serif;
}
.smalltextwhite a:link ,.smalltextwhite a:visited , .smalltextwhite a:active
{
        color: #b0e0ff;
        font-size: x-small;
        font-family: Tahoma, arial, helvetica, serif;
}
/* Posts and personal messages displayed throughout the forum. */
.post, .personalmessage
{
   width: 100%;
   overflow: auto;
   line-height: 1.3em;
}

/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature
{
   width: 100%;
   overflow: auto;
   padding-bottom: 3px;
   line-height: 1.3em;
}
/* No image should have a border when linked */
a img{
   border: 0;
}
.smalltextwhite a:hover
{
        color: #ffb0b0;
}
.normaltext
{
        font-size: small;
}
.largetext
{
        font-size: large;
}

Quote from: SenSatiOn on July 19, 2006, 08:26:48 AM

Quote from: SenSatiOn on June 18, 2006, 11:53:41 AM
Arkadaşlar birşey sorcam bu bisim default tema denen şeydeki style.css'de scrollbar kodları yok mu bana mı öyle gelio ?! :( (o kadar style.css'yi kurcaladım zamanında,ama daha şimdi bu konuyu gördüm 10 dklik iş olcaktı arbalot'un sayesinde ;) bi tek scrollbar'ı çözememiştim onuda halledemedim :(

Of ne beceriksiz insanım ben yaaa  :(  :(  :( 

Arkadaşlar bana cewap werecek biri yok mu?

Walla kaçıncı kere yazdım sayısını ben bilmiorum arkadaşlar scrollbar için bi el atsanız? :D

süper döküman saoll

döküman super olmuş eline saglık

izin verirsenız ve yersiz bulmaz isenız bir sey sormak istiyorum
maintab_first maintab_active_back
titlebg catbg vs bunların rengini degiştirmek istiyorum acaba nasıl veyahut hangi programla yapabilirim

saygılar...

Quote from: SeYFo on August 31, 2006, 02:03:16 PM
döküman super olmuş eline saglık

izin verirsenız ve yersiz bulmaz isenız bir sey sormak istiyorum
maintab_first maintab_active_back
titlebg catbg vs bunların rengini degiştirmek istiyorum acaba nasıl veyahut hangi programla yapabilirim

saygılar...

paintle bile yapılabilir ama photoshop öneririm ;)

Dokumanı çalabilir miyim? merak etme belirtirim arbalot diye : )

???????

Quote from: SenSatiOn on August 22, 2006, 11:51:59 AM

Quote from: SenSatiOn on July 19, 2006, 08:26:48 AM

Quote from: SenSatiOn on June 18, 2006, 11:53:41 AM
Arkadaşlar birşey sorcam bu bisim default tema denen şeydeki style.css'de scrollbar kodları yok mu bana mı öyle gelio ?! :( (o kadar style.css'yi kurcaladım zamanında,ama daha şimdi bu konuyu gördüm 10 dklik iş olcaktı arbalot'un sayesinde ;) bi tek scrollbar'ı çözememiştim onuda halledemedim :(

Of ne beceriksiz insanım ben yaaa  :(  :(  :( 

Arkadaşlar bana cewap werecek biri yok mu?

Walla kaçıncı kere yazdım sayısını ben bilmiorum arkadaşlar scrollbar için bi el atsanız? :D

bende bu sorunla karsılastım

Ben temamın Arkasında komple mesela http://www.calshop.biz/screensaver/img/Undersea%20Adventure.jpg (http://www.calshop.biz/screensaver/img/Undersea%20Adventure.jpg) bu resmin gözükmesini istiyorum css nin her yerine yazdım ama olmadı bir el atarmısınız.

Quote from: SenSatiOn on August 22, 2006, 11:51:59 AM

Quote from: SenSatiOn on July 19, 2006, 08:26:48 AM

Quote from: SenSatiOn on June 18, 2006, 11:53:41 AM
Arkadaşlar birşey sorcam bu bisim default tema denen şeydeki style.css'de scrollbar kodları yok mu bana mı öyle gelio ?! :( (o kadar style.css'yi kurcaladım zamanında,ama daha şimdi bu konuyu gördüm 10 dklik iş olcaktı arbalot'un sayesinde ;) bi tek scrollbar'ı çözememiştim onuda halledemedim :(

Of ne beceriksiz insanım ben yaaa  :(  :(  :( 

Arkadaşlar bana cewap werecek biri yok mu?

Walla kaçıncı kere yazdım sayısını ben bilmiorum arkadaşlar scrollbar için bi el atsanız? :D

her yeri aradım ettim ama bulamadım. bi yerde görmüştüm uyguladım ama forumun deil de yönetim panelindeki scroolbar deişmişti sonra sıkıldım bıraktm . bi yardım ederseniz fena olmaz ;D

Bence yardım etmişken komple css yi türkçeye çevirin nereyi değiştirirsek ne olur gibisinden ;D

Quote/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited

/* Tables should show empty cells. */

bu sekildeki bolum başilıklarınında cevirisini ekleseniz super bi konu olur ve temalar hakkında fazla sorulkacak soru kalmaz...

reyes o istediğin yakın bir zamanda gelecek.
onun haricinde başka dökümanlarda gelecek...

SSI bu konu ve benzer dokumanlar birleştirilip sabitlense daha iyi olmaz mı??

/* The main body of the entire forum. */
body
{   
   background-image: url(images/left.png);
   margin: 0px;
   padding: 0 0 0 0;
}



Kodlarda repeat yok ama resim butun sayfaya yayıllıyor .Neden acaba??

No repeat yazman lazım; çünkü varsayılan (default) değer reapat-x ve repeat-y 'dir.
Yani repeat girilmezse hem enine hem de boyune repeat (tekrar) eder.
Bunu engellemek için:
background-repeat: no-repeat;
kullanabilirsin.

Saol...

Quote from: Lord Arbalot on December 05, 2006, 04:43:19 PM
reyes o istediğin yakın bir zamanda gelecek.
onun haricinde başka dökümanlarda gelecek...

sevindirici haber. teşekkürler ve kolay gelsin

tayfun sırf mesaj yazmak için bişiler arıyorsun değil mi?
soyliyeyim
o posisyon değiştirme kodlarının en başında onu belirleyici bir komut var
text-align: Metnin dikey olarak nasıl hizalanacağını belirler.
onu da
text-align: center ; şeklinde kullanacaksın...

eğer gerçekten bilmiyorsan ve öğrenmek istiyorsan soyliyim
font-style:italic
veya
font-style: normal

yine aynı şekile

font-variant: normal
veya
font-variant: small-caps

şeklinde de kullanabilirsin...


sen bunu center a oyle cevap verdiğim için sordun onu da biliyorum.
bir yerde de haklısın ama bu zamanında bu şekilde hazırlanmış su anda bununla ilgilenecek vaktim yok kusura bakma...

bir takım şeyler sizlere yılbaşı hediyesi olur artık...

arkadaşlar ben arka plana resimkoymak istiyorum fakat background images diye bişey bulamadım. kodu nereye ekleyeceğim.

en yukarılarda background color vardır.onu background image ye cevir....

gerçekten iyi döküman ;) Gözlerine sağlık :)

Arkadaşlar Mesela Ben Sayfa Kaydırılırsa Zeminin Sabit Kalmasını İstiyorum Fakat Fixed Kodunu Napmalıyım nEreye Koymalıyım Bilmiyorum Yardım Ederseniz Sevinirim...

Arkadaşlar birşey sormak istiyorum herhangi bir sayda css özelliğini kullanarak şöyle bir uygulama varmı ben size ne demek istediğimi şöyle anlatayim
img alt: title ; gibi o sayfada var olan tüm resimlere css'de sabit olan bir kodu resime otamatik ekletdirebilirmiyiz yani bilmem anlatabildim mi ???

Tam olarak anlasam yardımcı olacam tam olarak sen yapmak istediğini söyle anlatmadan direk yolla.

ekleyeceğin şeye bağlı..

 Integrate Lightbox (http://custom.simplemachines.org/mods/index.php?mod=1158) modikasyonu var resimlere rel="lightbox"  ekliyor onu inceleyerek bişeyler yapabilirsin.

Şimdi bende wp var ve burada yayınladığım haberlerde otamatik olarak konu başlıklarının html olarak "alt" bildiğimiz kodu otamatik olarak css yöntemi ile eklemeyi düşünüyorum yada buna yakın birşey eklenen resimlere border gibi var olan terimlerle şekil verebiliyoruz tamam ama şuana kadar istediğimi veren bi kod görmedim css de html olarak yapıyorum tamam ama her konuya tek tek girmektense otamatik olması daha işime gelecek
var olan kod mesela style.css de
.post img { max-width: 98%; }
img, a img {
padding: 3px;
}
bense şöyle birşey diyorum
.post img { max-width: 98%; }
img, a img {
padding: 3px;
       alt: konu adı ;
}
Açıklayıcı oldumu ???

Şöyle bi ingilizce sayfa buldum ama birşey anlamadım ben :S
Adres (http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_21556880.html)

Gene anlatmak istediğinden bişey anlamadım .

Eğer belirli alt taglarına css mi eklicen ne yapacan tam olarak bi anlat resimle göster =)

IMG[alt~="konuadı"]
{
padding: 3px;
}

~= burası direk eşittirde olabilir ama tam hatırlamıyorum .

Bu kod

<img src="http://www.xxx.com/xxx.gif" alt="konuadı" />

Bu img kodunu etkiler diye biliyorum eğer yanlış anladıysam açıkça tekrar anlatırsan yarım edebilirim .

Bende eksikliklerini hissettiğim şeyleri eklim bari :)

TABLO ÖZELLİKLERİ

outline : Outline de border in özelliğini taşımakla beraber gerçekte dış çerçeve olarak kullanılır .

Örnek :

Kodlama

.tborder
{
   padding: 1px;
   border: 2px solid red;
        outline: 2px solid yellow;
   background-color: #FFFFFF;
}

Görüntü

TEXT ÖZELLİKLERİ

first-child : Kullandığınız yerde ilk satıra istediğiniz bi özelliği ekleyebilirsiniz .

Örnek :

Kodlama

.post:first-child
{
font-weight:bold;
font-size:15px;
}

Görüntü

Önceki Hali :  Css dersleri

Önceki Hali :  Css dersleri

TEXT ÖZELLİKLERİ

:after , :before

Bildiğiniz gibi after öncesine before ise sonrasını temsiz ediyor .

Biz bu kodlarla Yazımızın öncesine veya sonrasına istediğimiz birşeyi ekleyebiliyoruz .

Aynı post kodumuzla bi örnek hazırlayak .

.post:before
{
content: "Konu Basladi:) ";
}
.post:after
{
content: "Konu Bitti:( ";
}


Görüntü

Konu içeriği : Bir mumdur iki mumdur :)

Kodumuzu uyguladıktan sonra : Konu Basladi:) Bir mumdur iki mumdur :) Konu Bitti:(



Sanırım bu yolla müzikte ekliyebiliyorduk ama bu konuda tam emin değilim ek bişey varmıydı hatırlamıyorum .


@media aural {
.post:after
{
content: url("muzik.wav");
}
}

Gibi bişey sanırım

Şimdide css de istediğimiz bi kodu duzenlemeyi anlatak :)

Örneğin arama kodlarındaki butonun arkasına resim koyacaz ama bakıyoruzki ordaki içeriği gireceğimiz yerin kodlarıda input arama bölümündeki buton da input için de :)

O zaman bizim bu arama bölümündeki input u css ye göstermemiz lazım .

O bölümün kodlarına bakalım .

<input type="submit" name="submit" value="', $txt[182], '" style="width: 11ex;" />

Orda type name bide value var value sabit değil onu geçtik name veya type den birisini kullanabiliriz.

Aşağıda benim yaptığım bi kodlama varonu incelerseniz dahada iyi anlayacaksınız .

input[type="submit"]
{
   width:70px;
   height:30px;
   color:#efefef;
        cursor:pointer;
   font-weight:bold;
   padding:2px 2px;
   background:transparent url(images/butonbg.gif) no-repeat left top;
   border:0px;

}
input[type="submit"]:hover
{
   background-position:left bottom;
}

Ben resmi çif yönlü yapmıştım o yüzden hover var siz isterseniz eklemezsiniz.

input[type="submit"] isterseniz type="submit" bu kodu sadece type olarak değiştirebilirsiniz bu yollada bütün inputun içinde type olan kodlara bu css yi uygulamış olabilirsiniz .

Eğer bi tema yazarı ise kısa yoldan bu yol ile temalarınızın butonlarına resim ekleyebilirsiniz :)

Quote from: [Burak] on July 29, 2008, 06:09:11 AM


:after , :before

Bildiğiniz gibi after öncesine before ise sonrasını temsiz ediyor .

after : sonra      before: önce olmasın  :-\

Gördüğün gibi kodlamayı yaparken sorun yok yanlışlıkla yazıldığı belli dimi ???

Evet belli. Bunu söylemek için yazdım zaten.

repeat: Resmin bütün zemine yayılmasını sağlar.

Kodu asagidaki gibi uyguLadim ama arkapLan tamamen kayboLdu acaba bu konuda yardimci oLabiLirmisiniz?

/* The main body of the entire forum. */
body
{
background-color: #0000;
margin: 0px;
padding: 12px 320px 4px 30px;
background-image: url(images/arka.jpg) repeat;
}

soldan sağa doğru tekrarlamasını istiyorsan
background: url(images/arka.jpg) repeat-x;
yukarıdan aşağıya doğru tekrarlamasını istiyorsan
background: url(images/arka.jpg) repeat-y;
şeklinde kullan

Resmin asagi dogru indigim zaman gene ayni konumda oLmasini istiyorum ama benim shu anki uyguLamama göre forumda asagi dogru inince koskoca bir bosLuk var..
Resim soL tarafta ve asagi indigim zaman gene ayni konumda durmasini istiyorum..

Bunu nasiL düzeLtebiLirim.. Yardimci oLursaniz sevinirim..

background: url(images/arka.jpg) repeat-x;
background-attachment:fixed;

şeklinde kullan o zaman background'un x konumunda tekrarlanacak ve  sayfa aşağı - yukarı doğru kaldığında pozisyonu sabit olacak yada istersen background: #renkkodun url(images/arka.jpg) repeat-x; şeklinde ekle kullan #renkkodun'u resme göre ayarla

Quote from: c1n4R on September 07, 2008, 01:07:57 PM
background: url(images/arka.jpg) repeat-x;
background-attachment:fixed;

şeklinde kullan o zaman background'un x konumunda tekrarlanacak ve  sayfa aşağı - yukarı doğru kaldığında pozisyonu sabit olacak yada istersen background: #renkkodun url(images/arka.jpg) repeat-x; şeklinde ekle kullan #renkkodun'u resme göre ayarla

Cok tesekkürLer.. tam istedigim gibi oLdu..

merhaba,
seçim kutularının rengini hangi kodla ayarlayabilirim?
(http://imageshack.us)
(http://g.imageshack.us/img377/yenibitmapresmicg1.png/1/)

İxlam şöyle yapabilirsin. Deneme amaçlı ben sadece bölümlerin adını kırmızı yaptım.
style.css ye aşağıdakine benzer kafana göre bir isim belirle mesela ben jump demiştim.

.jump
{
color: red;
}
Daha sonra display.template.php'ni aç gösterdiğin yer orasıysa veya başka bir yerse aynısını onlarada uygularsın.

<select name="jumpto" id="jumpto" onchange="if (this.selectedIndex > 0 &amp;&amp; this.options[this.selectedIndex].value) window.location.href = smf_scripturl + this.options[this.selectedIndex].value.substr(smf_scripturl.indexOf('?') == -1 || this.options[this.selectedIndex].value.substr(0, 1) != '?' ? 0 : 1);">


<select class="jump" name="jumpto" id="jumpto" onchange="if (this.selectedIndex > 0 &amp;&amp; this.options[this.selectedIndex].value) window.location.href = smf_scripturl + this.options[this.selectedIndex].value.substr(smf_scripturl.indexOf('?') == -1 || this.options[this.selectedIndex].value.substr(0, 1) != '?' ? 0 : 1);">

Görüntüsü aşağıdaki gibi olacaktır.

---

bunu boş bir zamanımda deneyeyim ancak yazı rengini değil arkaplanını transparent yapmak istiyorum. (şimdi sınava gitmek zorundayım ne kadar çalışkanım görüyorsunuz :))

Aşağıdaki kod yeterli olurmu bilmiyorum ama denersin. Ayrıca başarılar :)
.jump
{
    background: transparent;
}

---

2.0 kullandığımı yazmayı yine unutmuşum malesef. artık imzama eklesem iyi olacak 2.0 kullanıyorum diye :D bu kodlar yok bulamadım. Evalution tavsiyelerini tekrar bekliyorum
teşekkürler

Css validatoru tavsiye ediyor musunz peki

Bu Temadaki (http://custom.simplemachines.org/themes/index.php?lemma=107) çerveve nasıl yapabiliriz ?

B4en çerçeve göremedim
http://smf.smfthemes.org/Themes/Aa_New_Damage/images/main_bg.gif
bunu koymuş sonra ust alt orta yapmış çerçeve gibi görünmüş xD

Teşekkürler

teşekkürler