Xen HTML Widget Edit & Türkçeleştirme ( Görsel Anlatım )

  • Konu Sahibi Konu Sahibi Naim
  • Başlangıç tarihi Başlangıç tarihi

Naim

Kayıtlı Üye
JailbreakTR
Katılım
20 Haz 2018
Mesaj
64
Tepkime puanı
51
Evet arkadaşlar sizlere Lockscreen tema ve widgetlerini nasıl editlenebileceğini anlatacağım.
HTML ve Css kod bilgisine hakim olan arkadaşlar muhakkak ki bizlere daha fazla bilgi vereceklerdir.
Ben kullandığım Xen HTML tweaki üzerinden bilgi vereceğim. (Daha önce cihazımızda Xen HTML kurulu olmalıdır.)

1.AŞAMA DİL DEĞİŞİMİ;

1) Cydia’dan reposundan LS EW 176 lockscreen temasını yükledik diyelim.
IMG_1859.PNG
Yükledikten sonra temanın ilk hali böyle olacaktır.
IMG_1860.jpg

2) Yüklenen tema ve widgetler cihazımızda var/mobile/library/lockhtml dizini içine kurulmaktadır.
Filza yada iFile aracılığı ile belirtilen konuma gidiyoruz. Ve temamızın kurulu olduğu klasöre giriyoruz. Biz LS EW 176 klasörüne gidiyoruz.
IMG_1861.jpg

3) Türkçeleştirme için öncelikle Script klasörü içine giriyoruz. Script klasöründe bulunan lang.js dosyasını editleyeceğiz.
if (Lang == "en") {
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var shortdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var months=["January","February","March","April","May","June","July","August","September","October","November","December"];
var shortmonths = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var hourtext = ["Twelve", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Eleven", "Twelve", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Eleven", "Twelve"];
var weatherdesc = ["Tornado", "Tropical Storm", "Hurricane", "Thunderstorm", "Thunderstorm", "Snow", "Sleet", "Sleet", "Freezing Drizzle", "Drizzle", "Freezing Rain", "Showers", "Showers", "Flurries", "Snow", "Snow", "Snow", "Hail", "Sleet", "Dust", "Fog", "Haze", "Smoky", "Blustery", "Windy", "Cold", "Cloudy", "Cloudy", "Cloudy", "Cloudy", "Cloudy", "Clear", "Sunny", "Fair", "Fair", "Sleet", "Hot", "Thunderstorms", "Thunderstorms", "Thunderstorms", "Showers", "Heavy Snow", "Light Snow", "Heavy Snow", "Partly Cloudy", "Thunderstorm", "Snow", "Thunderstorm", "blank"];
}
Burada bulunan kodların başında hangi dili temsil ettikleri yazaz. "en" ingilizce üzerinden yol alalım. Burada ingilizce günler, saatler, hava durumu ve kısaltmalırını görüyoruz. dilersek direk "en" bölümünü editleyip temanın ayarlar seçeneklerinden ingilizce seçerek devam edebilir. Yada dosyada sayfanın en altına gelerek yeni bir paragrafa "tr" diye bir seçenek ekleriz. Böylelikle tema ayarlarından tr seçimini yaptığımızda türkçe aktif olur. Biz bu yolu izleyelim ve sayfanın en altına yeni bir paragraf açarak üstteki ingilizce kodu kopyalayıp } işaretinin hem altına yapıştıralım. Aşağıda ki gibi ingilice terimleri türkçeleştirelim. İngilizce bilmeyen arkadaşlar çeviri yardımı ile kolaylıkla türkçeleştirme yapabilir. Bazı temelarda ki fontlar türkçe karakterleri desteklemediği için türkçe karakter kullanımına dikkat etmek gerekiyor.
if (Lang == "tr") {
var days = ["Pazar","Pazartesi","Salı","Carsamba","Persembe","Cuma","Cumartesi"];
var shortdays = ["Pzr", "Pzt", "Salı", "Çar", "Per", "Cum", "Cts"];
var months=["Ocak","Subat","Mart","Nisan","Mayis","Haziran","Temmuz","Agustos","Eylül","Ekim","Kasım","Aralik"];
var shortmonths = ["Oc", "Sub", "Mar", "Nis", "May", "Haz", "Tem", "Agu", "Eyl", "Eki", "Kas", "Ara"];
var hourtext = ["Oniki", "Bir", "İki", "Üç", "Dört", "Beş", "Altı", "Yedi", "Sekiz", "Dokuz", "On", "Onbir", "Oniki", "Bir", "İki", "Üç", "Dört", "Beş", "Altı", "Yedi", "Sekiz", "Dokuz", "On", "Onbir", "Oniki"];
var weatherdesc = ["Kasırga", "Tropikal Fırtına", "Kasırga", "Gök gürültülü", "Gök gürültülü", "Kar", "Sulu Kar", "Sulu Kar", "Hafif Yağmur", "Hafif Yağış", "Karla karışık", "Sağanak", "Sağanak", "Sağanak", "Kar", "Kar", "Kar", "Kar", "Sulu Kar", "Sisli", "Dumanlı", "Puslu", "Sisli", "Rüzgarlı", "Rüzgarlı", "Buzlu", "Bulutlu", "Bulutlu", "Bulutlu", "Bulutlu", "Bulutlu", "Açık", "Güneşli", "Açık", "Açık", "Sulu Kar", "Sıcak", "Gök gürültülü", "Gök gürültülü", "Gök gürültülü", "Sağanak", "Şiddetli Kar", "Hafif kar", "Şiddetli Kar", "Parçalı Bulutlu", "Gök gürültülü", "Kar", "Gök gürültülü", "blank"];
}

4) Türkçeleştirme sonrası Ayarlar/Xen Html/ Lockscreen/Background Widget e giriyoruz.
Add widget'e tıklayıp LS EW 176 seçiyoruz. Seçim sonrası siyah bir alanda temamız açılıyor. Alt kısımda ki ayarlar düğmesine tıklıyoruz.
IMG_1865.jpg
Açılan seçeneklerde saat dilimini isterseniz 12 yada 24 saat olarak seçiyoruz. Türkçeleştirme esnasında "tr" diye yeni dil açtığımız için "en" yazan yere tr yazıp kaydet diyoruz.
IMG_1863.jpg

Görüldüğü üzere artık temamız türkçe.
IMG_1864.jpg

[automerge]1534338994[/automerge]

2.AŞAMA GÖRSEL EDİT ( KOD BİLGİSİ GEREKTİRİR)

Yüklemiş olduğumuz temanın görselliğini belirleyen kodlar Style.css içerisinde bulunmaktadır. Burada yapılan değişikliklerle temaya farklı görsellik kazandırılabilir.
Yazıların birbirine yakınlığı uzaklığı, boyutlandırma, gölge ekleme vs gibi herşey bu dosya altında yapılabilir. Ben editlemiş olduğum style.css dosyasında ki kodları ve orjinal style dosyasını buraya atıyorum değişiklikleri görebilirsiniz.

ORJİNAL:
body{
margin:0;
padding:0;
font-weight:100;
text-shadow:1px 1px 1px rgba(100,100,100,0.4);
font-family:reg;
text-transform:uppercase;
color:#f3f3f3;
letter-spacing:1;
}

@font-face{
font-family:sc;
src:url(Stuff/script.otf);
}
@font-face{
font-family:heavy;
src:url(Stuff/heavy.otf);
}
@font-face{
font-family:reg;
src:url(Stuff/reg.otf);
}
@font-face{
font-family:stroke;
src:url(Stuff/stroke.otf);
}


#Clock{
position:absolute; top:327px; left:0px; width:375px; text-align:center; z-index:50;
font-size:18.75px; letter-spacing:2;
}

#Stroke{
position:absolute; top:243.5px; left:0px; width:375px; text-align:center; z-index:50;
font-size:82.5px; font-family:stroke; color:#494A9E;
}

#weekday{
position:absolute; top:160px; left:0px; width:375px; text-align:center; z-index:50;
font-size:150px; font-family:heavy;
}
#Cal{
position:absolute; top:253.5px; left:0px; width:375px; text-align:center; z-index:50;
font-size:24.375px; font-family:sc; text-transform:capitalize;
-webkit-transform:rotateZ(-5deg);
color:#494A9E;
}

EDİT
body{
margin:0;
padding:0;
font-weight:100;
text-shadow:1px 1px 1px rgba(100,100,100,0.4);
font-family:reg;
text-transform:uppercase;
color:#f3f3f3;
letter-spacing:1;
}

@font-face{
font-family:sc;
src:url(Stuff/script.otf);
}
@font-face{
font-family:heavy;
src:url(Stuff/heavy.otf);
}
@font-face{
font-family:reg;
src:url(Stuff/reg.otf);
}
@font-face{
font-family:stroke;
src:url(Stuff/stroke.otf);
}


#Clock{
position:absolute; top:315px; left:12px; width:375px; text-align:center; z-index:50;
font-size:40.75px; letter-spacing:2; text-shadow: 2px 2px 3px #000000;
}

#Stroke{
position:absolute; top:355.5px; left:0px; width:375px; text-align:center; z-index:50;
font-size:82.5px; font-family:stroke; shadow: 2px 2px 3px #000000;
}

#weekday{
position:absolute; top:160px; left:10px; width:375px; text-align:center; z-index:50;
font-size:150px; font-family:heavy; text-shadow: 2px 2px 5px #000000;
}
#Cal{
position:absolute; top:365.5px; left:10px; width:375px; text-align:center; z-index:50;
font-size:24.375px; font-family:sc; text-transform:capitalize; shadow:2px 2px 3px #000000;
-webkit-transform:rotateZ(-5deg);
}

Editlenmiş hali;
5D0A55A1-0FA7-44F0-90FE-48EB239410EA.jpeg

Örnek kod çalışması
}

#weekday{ (Gün bilgisi)
position:absolute; ( duracağı pozisyon)
top:160px; (ortalama)
left:10px; ( sola uzaklık)
width:375px; ( boyut yüksekliği )
text-align:center; ( yazının pozisyonu)
z-index:50; ( ??? )
font-size:150px; (font büyüklüğü)
font-family:heavy; (Font seçimi)
text-shadow: 2px 2px 5px #000000; (Gölge)
}

Hazır TEMA’lar için
Xen HTML Lockscreen Temaları (Türkçe)
 

Ekli dosyalar

  • 5D0A55A1-0FA7-44F0-90FE-48EB239410EA.jpeg
    5D0A55A1-0FA7-44F0-90FE-48EB239410EA.jpeg
    105.1 KB · Görüntüleme: 66
Son düzenleme:
Bilmeyen arkadaşlar için gerçekten yararlı bir paylaşım olmuş teşekkür ederiz.
 
eline koluna salik kardesim allah razi olsun
 
Güzel konu olmuş. Eline sağlık..

Sabite aldım konuyu :okay:
 
reposundan tweak yüklemek istediğim de Depends com.junesiphone.xeninfo bu hatayla karşılaşıyorum ne yapmam gerek?
 
hocam widget türkçeleştirme konusunda dediklerinizi adım adım yaptım fakat widget ayarlarında tr yi kabul etmiyor. şu hatayı veriyor ' Failed to write widget settings : check file permissions for this widget '

XenHTML'in yazabilmesi için config.js dosyasının izinlerini değiştirmeniz gerekir.
 
Evet arkadaşlar sizlere Lockscreen tema ve widgetlerini nasıl editlenebileceğini anlatacağım.
HTML ve Css kod bilgisine hakim olan arkadaşlar muhakkak ki bizlere daha fazla bilgi vereceklerdir.
Ben kullandığım Xen HTML tweaki üzerinden bilgi vereceğim. (Daha önce cihazımızda Xen HTML kurulu olmalıdır.)

1.AŞAMA DİL DEĞİŞİMİ;

1) Cydia’dan reposundan LS EW 176 lockscreen temasını yükledik diyelim.
Ekli dosyayı görüntüle 6592
Yükledikten sonra temanın ilk hali böyle olacaktır.
Ekli dosyayı görüntüle 6593

2) Yüklenen tema ve widgetler cihazımızda var/mobile/library/lockhtml dizini içine kurulmaktadır.
Filza yada iFile aracılığı ile belirtilen konuma gidiyoruz. Ve temamızın kurulu olduğu klasöre giriyoruz. Biz LS EW 176 klasörüne gidiyoruz.
Ekli dosyayı görüntüle 6596

3) Türkçeleştirme için öncelikle Script klasörü içine giriyoruz. Script klasöründe bulunan lang.js dosyasını editleyeceğiz.
if (Lang == "en") {
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var shortdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var months=["January","February","March","April","May","June","July","August","September","October","November","December"];
var shortmonths = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var hourtext = ["Twelve", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Eleven", "Twelve", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Eleven", "Twelve"];
var weatherdesc = ["Tornado", "Tropical Storm", "Hurricane", "Thunderstorm", "Thunderstorm", "Snow", "Sleet", "Sleet", "Freezing Drizzle", "Drizzle", "Freezing Rain", "Showers", "Showers", "Flurries", "Snow", "Snow", "Snow", "Hail", "Sleet", "Dust", "Fog", "Haze", "Smoky", "Blustery", "Windy", "Cold", "Cloudy", "Cloudy", "Cloudy", "Cloudy", "Cloudy", "Clear", "Sunny", "Fair", "Fair", "Sleet", "Hot", "Thunderstorms", "Thunderstorms", "Thunderstorms", "Showers", "Heavy Snow", "Light Snow", "Heavy Snow", "Partly Cloudy", "Thunderstorm", "Snow", "Thunderstorm", "blank"];
}
Burada bulunan kodların başında hangi dili temsil ettikleri yazaz. "en" ingilizce üzerinden yol alalım. Burada ingilizce günler, saatler, hava durumu ve kısaltmalırını görüyoruz. dilersek direk "en" bölümünü editleyip temanın ayarlar seçeneklerinden ingilizce seçerek devam edebilir. Yada dosyada sayfanın en altına gelerek yeni bir paragrafa "tr" diye bir seçenek ekleriz. Böylelikle tema ayarlarından tr seçimini yaptığımızda türkçe aktif olur. Biz bu yolu izleyelim ve sayfanın en altına yeni bir paragraf açarak üstteki ingilizce kodu kopyalayıp } işaretinin hem altına yapıştıralım. Aşağıda ki gibi ingilice terimleri türkçeleştirelim. İngilizce bilmeyen arkadaşlar çeviri yardımı ile kolaylıkla türkçeleştirme yapabilir. Bazı temelarda ki fontlar türkçe karakterleri desteklemediği için türkçe karakter kullanımına dikkat etmek gerekiyor.
if (Lang == "tr") {
var days = ["Pazar","Pazartesi","Salı","Carsamba","Persembe","Cuma","Cumartesi"];
var shortdays = ["Pzr", "Pzt", "Salı", "Çar", "Per", "Cum", "Cts"];
var months=["Ocak","Subat","Mart","Nisan","Mayis","Haziran","Temmuz","Agustos","Eylül","Ekim","Kasım","Aralik"];
var shortmonths = ["Oc", "Sub", "Mar", "Nis", "May", "Haz", "Tem", "Agu", "Eyl", "Eki", "Kas", "Ara"];
var hourtext = ["Oniki", "Bir", "İki", "Üç", "Dört", "Beş", "Altı", "Yedi", "Sekiz", "Dokuz", "On", "Onbir", "Oniki", "Bir", "İki", "Üç", "Dört", "Beş", "Altı", "Yedi", "Sekiz", "Dokuz", "On", "Onbir", "Oniki"];
var weatherdesc = ["Kasırga", "Tropikal Fırtına", "Kasırga", "Gök gürültülü", "Gök gürültülü", "Kar", "Sulu Kar", "Sulu Kar", "Hafif Yağmur", "Hafif Yağış", "Karla karışık", "Sağanak", "Sağanak", "Sağanak", "Kar", "Kar", "Kar", "Kar", "Sulu Kar", "Sisli", "Dumanlı", "Puslu", "Sisli", "Rüzgarlı", "Rüzgarlı", "Buzlu", "Bulutlu", "Bulutlu", "Bulutlu", "Bulutlu", "Bulutlu", "Açık", "Güneşli", "Açık", "Açık", "Sulu Kar", "Sıcak", "Gök gürültülü", "Gök gürültülü", "Gök gürültülü", "Sağanak", "Şiddetli Kar", "Hafif kar", "Şiddetli Kar", "Parçalı Bulutlu", "Gök gürültülü", "Kar", "Gök gürültülü", "blank"];
}

4) Türkçeleştirme sonrası Ayarlar/Xen Html/ Lockscreen/Background Widget e giriyoruz.
Add widget'e tıklayıp LS EW 176 seçiyoruz. Seçim sonrası siyah bir alanda temamız açılıyor. Alt kısımda ki ayarlar düğmesine tıklıyoruz.
Ekli dosyayı görüntüle 6597
Açılan seçeneklerde saat dilimini isterseniz 12 yada 24 saat olarak seçiyoruz. Türkçeleştirme esnasında "tr" diye yeni dil açtığımız için "en" yazan yere tr yazıp kaydet diyoruz.
Ekli dosyayı görüntüle 6598

Görüldüğü üzere artık temamız türkçe.
Ekli dosyayı görüntüle 6599

[automerge]1534338994[/automerge]

2.AŞAMA GÖRSEL EDİT ( KOD BİLGİSİ GEREKTİRİR)

Yüklemiş olduğumuz temanın görselliğini belirleyen kodlar Style.css içerisinde bulunmaktadır. Burada yapılan değişikliklerle temaya farklı görsellik kazandırılabilir.
Yazıların birbirine yakınlığı uzaklığı, boyutlandırma, gölge ekleme vs gibi herşey bu dosya altında yapılabilir. Ben editlemiş olduğum style.css dosyasında ki kodları ve orjinal style dosyasını buraya atıyorum değişiklikleri görebilirsiniz.

ORJİNAL:
body{
margin:0;
padding:0;
font-weight:100;
text-shadow:1px 1px 1px rgba(100,100,100,0.4);
font-family:reg;
text-transform:uppercase;
color:#f3f3f3;
letter-spacing:1;
}

@font-face{
font-family:sc;
src:url(Stuff/script.otf);
}
@font-face{
font-family:heavy;
src:url(Stuff/heavy.otf);
}
@font-face{
font-family:reg;
src:url(Stuff/reg.otf);
}
@font-face{
font-family:stroke;
src:url(Stuff/stroke.otf);
}


#Clock{
position:absolute; top:327px; left:0px; width:375px; text-align:center; z-index:50;
font-size:18.75px; letter-spacing:2;
}

#Stroke{
position:absolute; top:243.5px; left:0px; width:375px; text-align:center; z-index:50;
font-size:82.5px; font-family:stroke; color:#494A9E;
}

#weekday{
position:absolute; top:160px; left:0px; width:375px; text-align:center; z-index:50;
font-size:150px; font-family:heavy;
}
#Cal{
position:absolute; top:253.5px; left:0px; width:375px; text-align:center; z-index:50;
font-size:24.375px; font-family:sc; text-transform:capitalize;
-webkit-transform:rotateZ(-5deg);
color:#494A9E;
}

EDİT
body{
margin:0;
padding:0;
font-weight:100;
text-shadow:1px 1px 1px rgba(100,100,100,0.4);
font-family:reg;
text-transform:uppercase;
color:#f3f3f3;
letter-spacing:1;
}

@font-face{
font-family:sc;
src:url(Stuff/script.otf);
}
@font-face{
font-family:heavy;
src:url(Stuff/heavy.otf);
}
@font-face{
font-family:reg;
src:url(Stuff/reg.otf);
}
@font-face{
font-family:stroke;
src:url(Stuff/stroke.otf);
}


#Clock{
position:absolute; top:315px; left:12px; width:375px; text-align:center; z-index:50;
font-size:40.75px; letter-spacing:2; text-shadow: 2px 2px 3px #000000;
}

#Stroke{
position:absolute; top:355.5px; left:0px; width:375px; text-align:center; z-index:50;
font-size:82.5px; font-family:stroke; shadow: 2px 2px 3px #000000;
}

#weekday{
position:absolute; top:160px; left:10px; width:375px; text-align:center; z-index:50;
font-size:150px; font-family:heavy; text-shadow: 2px 2px 5px #000000;
}
#Cal{
position:absolute; top:365.5px; left:10px; width:375px; text-align:center; z-index:50;
font-size:24.375px; font-family:sc; text-transform:capitalize; shadow:2px 2px 3px #000000;
-webkit-transform:rotateZ(-5deg);
}

Editlenmiş hali;
Ekli dosyayı görüntüle 6601

Örnek kod çalışması
}

#weekday{ (Gün bilgisi)
position:absolute; ( duracağı pozisyon)
top:160px; (ortalama)
left:10px; ( sola uzaklık)
width:375px; ( boyut yüksekliği )
text-align:center; ( yazının pozisyonu)
z-index:50; ( ??? )
font-size:150px; (font büyüklüğü)
font-family:heavy; (Font seçimi)
text-shadow: 2px 2px 5px #000000; (Gölge)
}

Hazır TEMA’lar için
Xen HTML Lockscreen Temaları (Türkçe)

Evet arkadaşlar sizlere Lockscreen tema ve widgetlerini nasıl editlenebileceğini anlatacağım.
HTML ve Css kod bilgisine hakim olan arkadaşlar muhakkak ki bizlere daha fazla bilgi vereceklerdir.
Ben kullandığım Xen HTML tweaki üzerinden bilgi vereceğim. (Daha önce cihazımızda Xen HTML kurulu olmalıdır.)

1.AŞAMA DİL DEĞİŞİMİ;

1) Cydia’dan reposundan LS EW 176 lockscreen temasını yükledik diyelim.
Ekli dosyayı görüntüle 6592
Yükledikten sonra temanın ilk hali böyle olacaktır.
Ekli dosyayı görüntüle 6593

2) Yüklenen tema ve widgetler cihazımızda var/mobile/library/lockhtml dizini içine kurulmaktadır.
Filza yada iFile aracılığı ile belirtilen konuma gidiyoruz. Ve temamızın kurulu olduğu klasöre giriyoruz. Biz LS EW 176 klasörüne gidiyoruz.
Ekli dosyayı görüntüle 6596

3) Türkçeleştirme için öncelikle Script klasörü içine giriyoruz. Script klasöründe bulunan lang.js dosyasını editleyeceğiz.
if (Lang == "en") {
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var shortdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var months=["January","February","March","April","May","June","July","August","September","October","November","December"];
var shortmonths = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var hourtext = ["Twelve", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Eleven", "Twelve", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Eleven", "Twelve"];
var weatherdesc = ["Tornado", "Tropical Storm", "Hurricane", "Thunderstorm", "Thunderstorm", "Snow", "Sleet", "Sleet", "Freezing Drizzle", "Drizzle", "Freezing Rain", "Showers", "Showers", "Flurries", "Snow", "Snow", "Snow", "Hail", "Sleet", "Dust", "Fog", "Haze", "Smoky", "Blustery", "Windy", "Cold", "Cloudy", "Cloudy", "Cloudy", "Cloudy", "Cloudy", "Clear", "Sunny", "Fair", "Fair", "Sleet", "Hot", "Thunderstorms", "Thunderstorms", "Thunderstorms", "Showers", "Heavy Snow", "Light Snow", "Heavy Snow", "Partly Cloudy", "Thunderstorm", "Snow", "Thunderstorm", "blank"];
}
Burada bulunan kodların başında hangi dili temsil ettikleri yazaz. "en" ingilizce üzerinden yol alalım. Burada ingilizce günler, saatler, hava durumu ve kısaltmalırını görüyoruz. dilersek direk "en" bölümünü editleyip temanın ayarlar seçeneklerinden ingilizce seçerek devam edebilir. Yada dosyada sayfanın en altına gelerek yeni bir paragrafa "tr" diye bir seçenek ekleriz. Böylelikle tema ayarlarından tr seçimini yaptığımızda türkçe aktif olur. Biz bu yolu izleyelim ve sayfanın en altına yeni bir paragraf açarak üstteki ingilizce kodu kopyalayıp } işaretinin hem altına yapıştıralım. Aşağıda ki gibi ingilice terimleri türkçeleştirelim. İngilizce bilmeyen arkadaşlar çeviri yardımı ile kolaylıkla türkçeleştirme yapabilir. Bazı temelarda ki fontlar türkçe karakterleri desteklemediği için türkçe karakter kullanımına dikkat etmek gerekiyor.
if (Lang == "tr") {
var days = ["Pazar","Pazartesi","Salı","Carsamba","Persembe","Cuma","Cumartesi"];
var shortdays = ["Pzr", "Pzt", "Salı", "Çar", "Per", "Cum", "Cts"];
var months=["Ocak","Subat","Mart","Nisan","Mayis","Haziran","Temmuz","Agustos","Eylül","Ekim","Kasım","Aralik"];
var shortmonths = ["Oc", "Sub", "Mar", "Nis", "May", "Haz", "Tem", "Agu", "Eyl", "Eki", "Kas", "Ara"];
var hourtext = ["Oniki", "Bir", "İki", "Üç", "Dört", "Beş", "Altı", "Yedi", "Sekiz", "Dokuz", "On", "Onbir", "Oniki", "Bir", "İki", "Üç", "Dört", "Beş", "Altı", "Yedi", "Sekiz", "Dokuz", "On", "Onbir", "Oniki"];
var weatherdesc = ["Kasırga", "Tropikal Fırtına", "Kasırga", "Gök gürültülü", "Gök gürültülü", "Kar", "Sulu Kar", "Sulu Kar", "Hafif Yağmur", "Hafif Yağış", "Karla karışık", "Sağanak", "Sağanak", "Sağanak", "Kar", "Kar", "Kar", "Kar", "Sulu Kar", "Sisli", "Dumanlı", "Puslu", "Sisli", "Rüzgarlı", "Rüzgarlı", "Buzlu", "Bulutlu", "Bulutlu", "Bulutlu", "Bulutlu", "Bulutlu", "Açık", "Güneşli", "Açık", "Açık", "Sulu Kar", "Sıcak", "Gök gürültülü", "Gök gürültülü", "Gök gürültülü", "Sağanak", "Şiddetli Kar", "Hafif kar", "Şiddetli Kar", "Parçalı Bulutlu", "Gök gürültülü", "Kar", "Gök gürültülü", "blank"];
}

4) Türkçeleştirme sonrası Ayarlar/Xen Html/ Lockscreen/Background Widget e giriyoruz.
Add widget'e tıklayıp LS EW 176 seçiyoruz. Seçim sonrası siyah bir alanda temamız açılıyor. Alt kısımda ki ayarlar düğmesine tıklıyoruz.
Ekli dosyayı görüntüle 6597
Açılan seçeneklerde saat dilimini isterseniz 12 yada 24 saat olarak seçiyoruz. Türkçeleştirme esnasında "tr" diye yeni dil açtığımız için "en" yazan yere tr yazıp kaydet diyoruz.
Ekli dosyayı görüntüle 6598

Görüldüğü üzere artık temamız türkçe.
Ekli dosyayı görüntüle 6599

[automerge]1534338994[/automerge]

2.AŞAMA GÖRSEL EDİT ( KOD BİLGİSİ GEREKTİRİR)

Yüklemiş olduğumuz temanın görselliğini belirleyen kodlar Style.css içerisinde bulunmaktadır. Burada yapılan değişikliklerle temaya farklı görsellik kazandırılabilir.
Yazıların birbirine yakınlığı uzaklığı, boyutlandırma, gölge ekleme vs gibi herşey bu dosya altında yapılabilir. Ben editlemiş olduğum style.css dosyasında ki kodları ve orjinal style dosyasını buraya atıyorum değişiklikleri görebilirsiniz.

ORJİNAL:
body{
margin:0;
padding:0;
font-weight:100;
text-shadow:1px 1px 1px rgba(100,100,100,0.4);
font-family:reg;
text-transform:uppercase;
color:#f3f3f3;
letter-spacing:1;
}

@font-face{
font-family:sc;
src:url(Stuff/script.otf);
}
@font-face{
font-family:heavy;
src:url(Stuff/heavy.otf);
}
@font-face{
font-family:reg;
src:url(Stuff/reg.otf);
}
@font-face{
font-family:stroke;
src:url(Stuff/stroke.otf);
}


#Clock{
position:absolute; top:327px; left:0px; width:375px; text-align:center; z-index:50;
font-size:18.75px; letter-spacing:2;
}

#Stroke{
position:absolute; top:243.5px; left:0px; width:375px; text-align:center; z-index:50;
font-size:82.5px; font-family:stroke; color:#494A9E;
}

#weekday{
position:absolute; top:160px; left:0px; width:375px; text-align:center; z-index:50;
font-size:150px; font-family:heavy;
}
#Cal{
position:absolute; top:253.5px; left:0px; width:375px; text-align:center; z-index:50;
font-size:24.375px; font-family:sc; text-transform:capitalize;
-webkit-transform:rotateZ(-5deg);
color:#494A9E;
}

EDİT
body{
margin:0;
padding:0;
font-weight:100;
text-shadow:1px 1px 1px rgba(100,100,100,0.4);
font-family:reg;
text-transform:uppercase;
color:#f3f3f3;
letter-spacing:1;
}

@font-face{
font-family:sc;
src:url(Stuff/script.otf);
}
@font-face{
font-family:heavy;
src:url(Stuff/heavy.otf);
}
@font-face{
font-family:reg;
src:url(Stuff/reg.otf);
}
@font-face{
font-family:stroke;
src:url(Stuff/stroke.otf);
}


#Clock{
position:absolute; top:315px; left:12px; width:375px; text-align:center; z-index:50;
font-size:40.75px; letter-spacing:2; text-shadow: 2px 2px 3px #000000;
}

#Stroke{
position:absolute; top:355.5px; left:0px; width:375px; text-align:center; z-index:50;
font-size:82.5px; font-family:stroke; shadow: 2px 2px 3px #000000;
}

#weekday{
position:absolute; top:160px; left:10px; width:375px; text-align:center; z-index:50;
font-size:150px; font-family:heavy; text-shadow: 2px 2px 5px #000000;
}
#Cal{
position:absolute; top:365.5px; left:10px; width:375px; text-align:center; z-index:50;
font-size:24.375px; font-family:sc; text-transform:capitalize; shadow:2px 2px 3px #000000;
-webkit-transform:rotateZ(-5deg);
}

Editlenmiş hali;
Ekli dosyayı görüntüle 6601

Örnek kod çalışması
}

#weekday{ (Gün bilgisi)
position:absolute; ( duracağı pozisyon)
top:160px; (ortalama)
left:10px; ( sola uzaklık)
width:375px; ( boyut yüksekliği )
text-align:center; ( yazının pozisyonu)
z-index:50; ( ??? )
font-size:150px; (font büyüklüğü)
font-family:heavy; (Font seçimi)
text-shadow: 2px 2px 5px #000000; (Gölge)
}

Hazır TEMA’lar için
Xen HTML Lockscreen Temaları (Türkçe)

yeni başlayanlar için süper bir anlatım olmuş emeğine sağlık hocam. Kilit ekranı için'' var/mobile/library/lockhtml '' yolunu izleyip gerekli düzenlemeleri yapabiliyoruz peki ana ekran için hangi yolu izlemek gerek ?
 
Evet arkadaşlar sizlere Lockscreen tema ve widgetlerini nasıl editlenebileceğini anlatacağım.
HTML ve Css kod bilgisine hakim olan arkadaşlar muhakkak ki bizlere daha fazla bilgi vereceklerdir.
Ben kullandığım Xen HTML tweaki üzerinden bilgi vereceğim. (Daha önce cihazımızda Xen HTML kurulu olmalıdır.)

1.AŞAMA DİL DEĞİŞİMİ;

1) Cydia’dan reposundan LS EW 176 lockscreen temasını yükledik diyelim.
Ekli dosyayı görüntüle 6592
Yükledikten sonra temanın ilk hali böyle olacaktır.
Ekli dosyayı görüntüle 6593

2) Yüklenen tema ve widgetler cihazımızda var/mobile/library/lockhtml dizini içine kurulmaktadır.
Filza yada iFile aracılığı ile belirtilen konuma gidiyoruz. Ve temamızın kurulu olduğu klasöre giriyoruz. Biz LS EW 176 klasörüne gidiyoruz.
Ekli dosyayı görüntüle 6596

3) Türkçeleştirme için öncelikle Script klasörü içine giriyoruz. Script klasöründe bulunan lang.js dosyasını editleyeceğiz.
if (Lang == "en") {
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var shortdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var months=["January","February","March","April","May","June","July","August","September","October","November","December"];
var shortmonths = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var hourtext = ["Twelve", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Eleven", "Twelve", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Eleven", "Twelve"];
var weatherdesc = ["Tornado", "Tropical Storm", "Hurricane", "Thunderstorm", "Thunderstorm", "Snow", "Sleet", "Sleet", "Freezing Drizzle", "Drizzle", "Freezing Rain", "Showers", "Showers", "Flurries", "Snow", "Snow", "Snow", "Hail", "Sleet", "Dust", "Fog", "Haze", "Smoky", "Blustery", "Windy", "Cold", "Cloudy", "Cloudy", "Cloudy", "Cloudy", "Cloudy", "Clear", "Sunny", "Fair", "Fair", "Sleet", "Hot", "Thunderstorms", "Thunderstorms", "Thunderstorms", "Showers", "Heavy Snow", "Light Snow", "Heavy Snow", "Partly Cloudy", "Thunderstorm", "Snow", "Thunderstorm", "blank"];
}
Burada bulunan kodların başında hangi dili temsil ettikleri yazaz. "en" ingilizce üzerinden yol alalım. Burada ingilizce günler, saatler, hava durumu ve kısaltmalırını görüyoruz. dilersek direk "en" bölümünü editleyip temanın ayarlar seçeneklerinden ingilizce seçerek devam edebilir. Yada dosyada sayfanın en altına gelerek yeni bir paragrafa "tr" diye bir seçenek ekleriz. Böylelikle tema ayarlarından tr seçimini yaptığımızda türkçe aktif olur. Biz bu yolu izleyelim ve sayfanın en altına yeni bir paragraf açarak üstteki ingilizce kodu kopyalayıp } işaretinin hem altına yapıştıralım. Aşağıda ki gibi ingilice terimleri türkçeleştirelim. İngilizce bilmeyen arkadaşlar çeviri yardımı ile kolaylıkla türkçeleştirme yapabilir. Bazı temelarda ki fontlar türkçe karakterleri desteklemediği için türkçe karakter kullanımına dikkat etmek gerekiyor.
if (Lang == "tr") {
var days = ["Pazar","Pazartesi","Salı","Carsamba","Persembe","Cuma","Cumartesi"];
var shortdays = ["Pzr", "Pzt", "Salı", "Çar", "Per", "Cum", "Cts"];
var months=["Ocak","Subat","Mart","Nisan","Mayis","Haziran","Temmuz","Agustos","Eylül","Ekim","Kasım","Aralik"];
var shortmonths = ["Oc", "Sub", "Mar", "Nis", "May", "Haz", "Tem", "Agu", "Eyl", "Eki", "Kas", "Ara"];
var hourtext = ["Oniki", "Bir", "İki", "Üç", "Dört", "Beş", "Altı", "Yedi", "Sekiz", "Dokuz", "On", "Onbir", "Oniki", "Bir", "İki", "Üç", "Dört", "Beş", "Altı", "Yedi", "Sekiz", "Dokuz", "On", "Onbir", "Oniki"];
var weatherdesc = ["Kasırga", "Tropikal Fırtına", "Kasırga", "Gök gürültülü", "Gök gürültülü", "Kar", "Sulu Kar", "Sulu Kar", "Hafif Yağmur", "Hafif Yağış", "Karla karışık", "Sağanak", "Sağanak", "Sağanak", "Kar", "Kar", "Kar", "Kar", "Sulu Kar", "Sisli", "Dumanlı", "Puslu", "Sisli", "Rüzgarlı", "Rüzgarlı", "Buzlu", "Bulutlu", "Bulutlu", "Bulutlu", "Bulutlu", "Bulutlu", "Açık", "Güneşli", "Açık", "Açık", "Sulu Kar", "Sıcak", "Gök gürültülü", "Gök gürültülü", "Gök gürültülü", "Sağanak", "Şiddetli Kar", "Hafif kar", "Şiddetli Kar", "Parçalı Bulutlu", "Gök gürültülü", "Kar", "Gök gürültülü", "blank"];
}

4) Türkçeleştirme sonrası Ayarlar/Xen Html/ Lockscreen/Background Widget e giriyoruz.
Add widget'e tıklayıp LS EW 176 seçiyoruz. Seçim sonrası siyah bir alanda temamız açılıyor. Alt kısımda ki ayarlar düğmesine tıklıyoruz.
Ekli dosyayı görüntüle 6597
Açılan seçeneklerde saat dilimini isterseniz 12 yada 24 saat olarak seçiyoruz. Türkçeleştirme esnasında "tr" diye yeni dil açtığımız için "en" yazan yere tr yazıp kaydet diyoruz.
Ekli dosyayı görüntüle 6598

Görüldüğü üzere artık temamız türkçe.
Ekli dosyayı görüntüle 6599

[automerge]1534338994[/automerge]

2.AŞAMA GÖRSEL EDİT ( KOD BİLGİSİ GEREKTİRİR)

Yüklemiş olduğumuz temanın görselliğini belirleyen kodlar Style.css içerisinde bulunmaktadır. Burada yapılan değişikliklerle temaya farklı görsellik kazandırılabilir.
Yazıların birbirine yakınlığı uzaklığı, boyutlandırma, gölge ekleme vs gibi herşey bu dosya altında yapılabilir. Ben editlemiş olduğum style.css dosyasında ki kodları ve orjinal style dosyasını buraya atıyorum değişiklikleri görebilirsiniz.

ORJİNAL:
body{
margin:0;
padding:0;
font-weight:100;
text-shadow:1px 1px 1px rgba(100,100,100,0.4);
font-family:reg;
text-transform:uppercase;
color:#f3f3f3;
letter-spacing:1;
}

@font-face{
font-family:sc;
src:url(Stuff/script.otf);
}
@font-face{
font-family:heavy;
src:url(Stuff/heavy.otf);
}
@font-face{
font-family:reg;
src:url(Stuff/reg.otf);
}
@font-face{
font-family:stroke;
src:url(Stuff/stroke.otf);
}


#Clock{
position:absolute; top:327px; left:0px; width:375px; text-align:center; z-index:50;
font-size:18.75px; letter-spacing:2;
}

#Stroke{
position:absolute; top:243.5px; left:0px; width:375px; text-align:center; z-index:50;
font-size:82.5px; font-family:stroke; color:#494A9E;
}

#weekday{
position:absolute; top:160px; left:0px; width:375px; text-align:center; z-index:50;
font-size:150px; font-family:heavy;
}
#Cal{
position:absolute; top:253.5px; left:0px; width:375px; text-align:center; z-index:50;
font-size:24.375px; font-family:sc; text-transform:capitalize;
-webkit-transform:rotateZ(-5deg);
color:#494A9E;
}

EDİT
body{
margin:0;
padding:0;
font-weight:100;
text-shadow:1px 1px 1px rgba(100,100,100,0.4);
font-family:reg;
text-transform:uppercase;
color:#f3f3f3;
letter-spacing:1;
}

@font-face{
font-family:sc;
src:url(Stuff/script.otf);
}
@font-face{
font-family:heavy;
src:url(Stuff/heavy.otf);
}
@font-face{
font-family:reg;
src:url(Stuff/reg.otf);
}
@font-face{
font-family:stroke;
src:url(Stuff/stroke.otf);
}


#Clock{
position:absolute; top:315px; left:12px; width:375px; text-align:center; z-index:50;
font-size:40.75px; letter-spacing:2; text-shadow: 2px 2px 3px #000000;
}

#Stroke{
position:absolute; top:355.5px; left:0px; width:375px; text-align:center; z-index:50;
font-size:82.5px; font-family:stroke; shadow: 2px 2px 3px #000000;
}

#weekday{
position:absolute; top:160px; left:10px; width:375px; text-align:center; z-index:50;
font-size:150px; font-family:heavy; text-shadow: 2px 2px 5px #000000;
}
#Cal{
position:absolute; top:365.5px; left:10px; width:375px; text-align:center; z-index:50;
font-size:24.375px; font-family:sc; text-transform:capitalize; shadow:2px 2px 3px #000000;
-webkit-transform:rotateZ(-5deg);
}

Editlenmiş hali;
Ekli dosyayı görüntüle 6601

Örnek kod çalışması
}

#weekday{ (Gün bilgisi)
position:absolute; ( duracağı pozisyon)
top:160px; (ortalama)
left:10px; ( sola uzaklık)
width:375px; ( boyut yüksekliği )
text-align:center; ( yazının pozisyonu)
z-index:50; ( ??? )
font-size:150px; (font büyüklüğü)
font-family:heavy; (Font seçimi)
text-shadow: 2px 2px 5px #000000; (Gölge)
}

Hazır TEMA’lar için
Xen HTML Lockscreen Temaları (Türkçe)
Hocam iWidgets türkçeletirmeyi söylermisin
 
Güzel olmuş ana ekranda hareketli animasyonlar kullanmadığımda kilitli ekrana ne koyarsan koy şarjı yemiyor xen i çözemeyen hemen siliyor kurulan widget çok önemli
 
Geri
Üst