Ana içeriğe geç

Custom Style

Bu geliştirme kullanıcıların eBA arayüzüne müdahale edebilmelerini, görsel açıdan

kendilerine uygun hale getirebilmelerini sağlamaya yardımcı olan bir modüldür. Öncelikle

yapılması gereken Doküman Yönetimi içerisinde "system" klasörü altında "customstyle"

isminde klasör olmalıdır, eğer yoksa oluşturulması gerekmektedir. Bu klasörün içerisinde ise

customstyle.css dosyası olmalıdır.

Değiştirilmek istenen öge’ye F12 veya sağ tıklayıp “incele” dedikten sonra seçeceğimiz

class veya id adını kullanarak “new style rule” (sağ alttaki artı işaretine tıklayarak) vererek

css kodları girilebilir. Örneğin arka plan rengini değiştirmek için;

.topMenuWrapper {

background: red;

}

Yapacağımız değişiklikler bittikten sonra customstyle.css dosyası yeniden

system/customstyle/ dizinine atılması gerekmektedir. Dosya atıldıktan sonra ise eBA

servisleri yeniden başlatılır ve böylece değişiklik yansımış olur.

Bununla beraber aşağıda bazı css örnekleri bulunmaktadır.

Background Rengini Değiştirme:

.element {

width: 200px;

height: 200px;

background-color: red;

transition: background-color 0.3s ease;

}

.element:hover {

background-color: green;

}

Hover ile Display None:

.item {

width: 100px;

height: 100px;

background-color: blue;

transition: all 0.3s ease;

}

.item:hover {

display: none;

}

Image Belirleme

Bu özellik, bir image elementine istediğimiz bir resmi koymamızı sağlıyor.

.image {

content: url('desktop/uploads/image1.png');

height: 350px;

width: 400px;

margin: 1rem;

}

Flexbox (Esnek Kutu Modeli):

Flexbox, web sayfalarında düzen oluşturmak için kullanılan bir CSS özelliğidir. Elementleri

bir konteyner içinde esnek bir şekilde düzenlemek için kullanılır.

.container {

display: flex;

justify-content: center;

align-items: center;

}

Gradient (Renk Geçişleri):

Gradient, bir elementin arka planında renkler arasında yumuşak bir geçiş oluşturmak için

kullanılır.

.gradient-background {

background: linear-gradient(to right, #ff0000, #00ff00);

}