Skip to main content

Custom Style

This enhancement allows users to intervene in the eBA interface, visually

It is a module that helps to ensure that they can make it suitable for them. First

What needs to be done is to "customstyle" under the "system" folder in Document Management

There should be a folder in the name, if not, it needs to be created. In this folder,

customstyle.css file.

F12 or right-click on the item to be changed and say "review", then we will select

By giving "New Style Rule" (by clicking the plus sign at the bottom right) using the class or id name

CSS codes can be entered. For example, to change the background color;

.topMenuWrapper {

background: red;

}

After we finish the changes we will make, the customstyle.css file will be restarted.

system/customstyle/ directory. After the file is discarded, eBA

services are restarted so that the change is reflected.

However, below are some css examples.

Changing Background Color:

.element {

width: 200px;

height: 200px;

background-color: red;

transition: background-color 0.3s ease;

}

.element:hover {

background-color: green;

}

Display None with Hover:

.item {

width: 100px;

height: 100px;

background-color: blue;

transition: all 0.3s ease;

}

.item:hover {

display: none;

}

Image Identification

This feature allows us to put an image we want on an image element.

.image {

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

height: 350px;

width: 400px;

margin: 1rem;

}

Flexbox (Flexbox Model):

Flexbox is a CSS feature used to create layouts on web pages. Elements

It is used to arrange flexibly in a container.

.container {

display: flex;

justify-content: center;

align-items: center;

}

Gradient:

Gradient, to create a smooth transition between colors in the background of an element

usable.

.gradient-background {

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

}