[linkler sadece üyelerimize görünmektedir.] Hocam teşekkür ederim dediğiniz kodları yapınca değişiklikler oldu. Ama benim başka html dosyalarımda dediğiniz kodları yapınca olmadı. Acaba hepsinde geçerli olabilecek şekilde bir düzenleme yapılabilir mi? Yoksa her dosyaya ayrı mı kod eklememiz gerekiyor. Ekte başka bir örnek gönderdim hocam mesala bundaki yazı boyutunu ve karakteri değişmek için ne yapmamız gerekiyor? Müsait bir zamanda bakarsanız çok sevinirim. Birde ben diğer dosyalarımda da karakter ve boyutu değiştirmek için neler yapmam gerekiyor.
kodların bütün etkinliklerde çalışmamasının sebebi, her etkinlikteki kutuların farklı isimlere sahip olması.
sizin bu etkinliğinizde değişiklik yapmak çok daha kolay ve sadece application.min.css dosyasında değişiklik yaparak istediğimizi elde edebiliriz. bir öncekinde javascript kullanmamızın nedeni kutuların program vasıtası ile bulundukları pozisyona konmasıydı. yani sürükle bırak gibi aksiyonların olmadığı diğer etkinliklerde sadece css ile değişiklik yapılabilir.
1) öncelikle yapılması gereken şu; öncelikle değişiklik yapmak istediğiniz öğelerin "id" veya "class"ını bulmalısınız. bunu bulabilmek için ise default.html dosyasını chrome ile açıp F12 tuşuna basıp, en sol üstteki eleman seçiciye basıp, değişiklik yapmak istediğiniz elemanı bulmanız gerekli.(resim 1)
class kullanmak daha iyi çünkü aynı class'a sahip tüm elemanlarda değişiklik yapar. id tek elemana aittir.
2) kutunun iki class adı var(questionRow whiteBox). biz birini kullanabiliriz. application.min.css dosyasını (vscodium ile) açarız. (bu arada default.html chrome da açık dursun. değişiklikleri görmek için kullanacağız.) css dosyasının altına şu kodları ekleriz:
.questionRow {
}
.questionRow class'ı gösteriri. süslü parantez arasına yazdığımız değişiklikler bu elemana etki edecektir.
bu noktada temel css bilginizin olduğunu varsayıyorum.
.questionRow{
height: 8vw !important;
font-size: 2vw !important;
}
!important önceki değerleri geçersiz saymak için.
3) bunu uyguladığımızda kutu yüksekliğinin değiştiğini fakat yazı fontunun değişmediğini göreceksiniz. bunun sebebi, kutunun içinde ikinci bir kutunun yazı için eklenmiş olması. şimdi içteki kutunun class'ını bulup değişiklik yapalım(resim 2). içteki kutunun class'ı "questionText".
bu class'ı css dosyasına ekleyelim.
.questionRow{
height: 6vw !important;
}
.questionText{
font-size: 2vw !important;
font-family: verdana !important;
}
işte bu kadar. değişiklikler etki etti.
okların durduğu yer rahatsız ettiyse, o zaman okların class'ını bulup değişiklik yaparız.
.questionMark{
top: calc(3vw - 8px) !important;
}
top=üste uzaklık
calc=hesapla
3vw-> kutu yüksekliğinin yarısı
8px->okun yüksekliğinin(16px) yarısı.
işlem tamam. diğer dosyalarda da bu şekilde classları bulup değişiklik yapabilirsiniz.
