Hesabım modülünün tasarımını değiştirin

Hesabım modülü için giriş bilgileri veya kayıt bilgileri yazılı ekranın tasarımında küçük bir değişiklik yapmaya çalışalım.

ÖRNEK 1

ADIM 1: Uygulamanıza giriş yapın

ADIM 2: RENKLER menüsüne tıklayın

ADIM 3: RENKLER menüsünün en altında bulunan AYRINTILI CSS / SCSS ÖZELLEŞTIRME yazan yerde ki OFF/KAPALI yazan yeri ON/AÇIK yapın

ADIM 4: Şimdi orada bir editör alanı oluşacak. O alana aşağıda ki kodu yapıştırın ve kaydedin. Kaydetme süresi 10 saniye kadar sürebilir.

.customer-view .item.item-custom {
border-radius: 15px;
border-color: white;
text-transform: capitalize;
margin: 10px;
}

Değiştirebilirsiniz:

border-color: white; kenar renginin white yani beyaz olacağını belirtir, bunu blue yani mavi, red yani kırmızı v.s. yapabilirsiniz.

border-radius: 15px; kenar eğimini ifade eder. 30px yaparak çok daha oval bir görünüm elde edebilir, 5px ile daha düz bir zemin elde edersiniz.

Uygulamanızda ki Hesabım modülünün görünümü şu şekilde değişmiş oldu

Bu örneklerde kullanılan yazı tipi:  Short Stack

ÖRNEK 2

SCSS Olarak kullanılan kodlar, açıklamaları ve sonuç. Alttaki kodların hepsini, RENKLER bölümü altındaki SCSS bölümüne yapıştırıp kayıt ederek test edebilirsiniz.

/* Hesabım modülü arkaplanını değiştirir, url yazan yerdeki linki kendi resminizin url adresi ile değiştirmeniz gerekir */

.customer-view ion-content {
background-color: transparent !important;
background-image: url(http://yardim.mobiluygulaman.com/wp-content/uploads/2020/01/whatsapp_squares.jpg) !important;
background-size: 100% 100% !important;
}

/* Hesabımın modülü üstündeki modül adı arkaplanını değiştirir, url yazan yerdeki linki kendi resminizin url adresi ile değiştirmeniz gerekir*/

.bar.bar-custom {
background-color: transparent !important;
background-image: url(http://yardim.mobiluygulaman.com/wp-content/uploads/2020/01/whatsapp.jpg) !important;
background-size: auto !important;
}

/* Hesabımın modülü input yani giriş düğmelerinin şeklini değiştirir*/

.customer-view .item.item-custom {
border-radius: 15px;
border-color: white;
text-transform: capitalize;
margin: 10px;
}

/* Hesabımın modülü kullanıcı profil resminin şeklini değiştirir*/

.stable-border {
border-color: #ffffff;
border-radius: 100px;
}

.stable-bg {
background-color: #ffffff;
}
.padding {
padding: 5px;
}

/* Giriş metinleri sola hizalar – Mobiluygulaman.com – Sonuç resminden sonra eklenen kod*/

input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], textarea {
text-align: left;
width: 100%;
}

Bu kodlardan sonra ortaya çıkan sonuç

Tüm örnek kodlarla oynayarak kendinize göre özelleştirme sağlayabilirsiniz.