CSS düzenleme için aşağıdaki adımları izleyebilirsiniz:
İlgili kanaldaki “Tema” bölümünden stil değişiklikleri yapılabilir.
İlk adım olarak master CSS dosyası alınmalıdır. Bunun için “Birincil Renk” seçilerek kaydedilebilir.
Daha sonra Gelişmiş Düzenlemeye Geç bağlantısı ile ilgili master CSS dosyası “CSS Stil Dosyası (React app) “ kısmındaki url den elde edilebilir.
İlgili kanaldaki akış browser üzerinden açılarak hedef HTML elemanlarının seçici(selector) bilgileri elde edilebilir.
Örnek:
.components.P1 seçicisiyle ilk sayfa seçilebilir
.component.star ile star sorusu seçilebilir
ana arkaplan rengi .container seçicisinden değiştirilir. (default: #fff)
.pisano-star-group > ile star icon listesine erişilebilir
.pisano-start .tooltip-div > ile tooltip elementine erişilir. (display: none)
Bu anket özelinde aşağıdaki örnek CSS oluşturulmuştur:
.container { background-color: #13A4BD !important }
.components .component label, .label { color: #FFF !important; text-align: center !important}
.pisano-star { width: 100% !important}
.pisano-star-group { justify-content: center !important}
Sonrasında “CSS Stil Dosyası (React app)” kısmındaki url'den alınan Master CSS dosyasının başına, yukarıdaki "Customised CSS" ler eklenir ve dosya lokal bilgisayarda .css uzantılı olarak kaydedilir.
Örnek Dosya İçeriği:
Not: Lütfen !important ekleyiniz.
Lokaldeki bu dosya sonrasında ilgili kanaldaki “Tema” bölümündeki “Gelişmiş Düzenlemeye Geç” ile açılan ilk inputtaki CSS Stil Dosyası URL kısmına upload edilir ve kaydedilir.
Kayıt sonrası CSS Stil Dosyası URL kısmında (birinci input) oluşan url olduğu gibi kopyalanıp aşağıdaki CSS Stil Dosyası (React app) (ikinci input) kısmına yapıştırılır ve tekrar kaydedilir.
Böylece “Gelişmiş Düzenlemeye Geç” adımındaki iki inputtada aynı URL'ler yer almış olur.
İlgili akış için CSS düzenlemesi böylece yapılmış olur.
Örnek CSS Dosyası URL:
https://pisano.com.tr/pisano-nodes/stylesheets/620/f27/14-/original/axa.css?1632391370
Ek bilgi/yöntem: CSS Stil Dosyası (React app) tan alınan default CSS i düzgün formatta görüntülemek için, browserda açılan default dosyanın tüm satırları kopyalanır:
Herhangi bir online CSS formattera yapıştırılarak format edilir (CSS Formatter):
Format edilmiş default CSS satırları kopyalanıp lokalde .css uzantılı dosya oluşturularak kaydedilir (2 dosya olarak kaydedilmesi tavsiye edilir; dosyanın biri orijinalinin backupı, diğeri ise update edilecek versiyonu olacak şekilde):
Bu noktadan sonra tekrar anket sayfası makalenin başında gösterildiği gibi browser üzerinde inspect edilerek ilgili alanlar tespit edilir:
Sonrasında aşağıdaki her 2 yöntemden istenilen tercih edilebilir:
- İster “CSS Stil Dosyası (React app)” kısmındaki URL'den alınan master CSS dosyasının tüm satırları kopyalanıp, başına (makalenin ilk kısmında gösterildiği gibi) aşağıdaki customized CSS'ler eklenip !important labelı ile force edilebilerek yerelde kaydedilebilir:
- Ya da ister ilgili alanlar default gelen CSS üzerinde adreslenip, update edilip, lokalde kaydedilebilir:
Lokalde oluşan bu dosya, sonrasında, ilgili kanaldaki “Tema” bölümündeki “Gelişmiş Düzenlemeye Geç” ile açılan ilk inputtaki CSS Stil Dosyası URL kısmına upload edilir ve kaydedilir.
Kayıt sonrası CSS Stil Dosyası URL kısmında (birinci input) oluşan URL olduğu gibi kopyalanıp aşağıdaki CSS Stil Dosyası (React app) (ikinci input) kısmına yapıştırılır ve tekrar kaydedilir.
Böylece “Gelişmiş Düzenlemeye Geç” adımındaki iki inputtada aynı URL'ler yer almış olur.
İlgili akış için CSS düzenlemesi böylece yapılmış olur.