⚜️Change layout

Changing the project layout is as easy as stealing a child's candy.

Just browse to your .env file and change the layout name.

By default, ElectroAAC so far provides 2 layouts. tibia-default and tibia-custom

But you don't have to be attached to them. You can create your own layout. We will try?

Create your layout

The first thing to do is think of a name. For the example, we will use the name electro-test.

Now that we have the name chosen, we need to create our .css file. For this, we will go to the assets/css folder and we will create a file called electro-test.css

Configure css

Now you can put any css code here that you think is necessary, you can also use our example that we are going to use as a base. We will put some css code that we think is important to have to configure it our way :)

:root {
  --heading-color: #ffffff;
  --text-color: #ffffff;
  --title-color: #9cabb9;
  --red: #f56969;
  --green: #41c683;

  --main-color: #ff7403;
  --second-main-color: #ffd103;

  --bg-main-color: #361414;
  --bg-second-color: #593733;
  --bg-third-color: #301a07;
  --bg-fourth: #362114ed;
  --tables: #ab851a73;
  --tables-hover: #ab841a4b;
  --bg-dashboard-main-color: #1f2128;
  --bg-dashboard-content-color: #2a2d38;
}

#app {
  background-color: var(--bg-main-color);
}

#header {
  background: url('~assets/images/electro-test/top-header.jpg') !important;
}

#main {
  background-image: url('~assets/images/electro-test/background.jpg') !important;
  background-attachment: fixed;
  background-size: cover;
}

.widget-title {
  background: url('~assets/images/electro-test/top-header.jpg') !important;
}

.bg-third {
  background-color: rgb(255 165 0 / 23%) !important;
}

Create image folder

If you noticed the code, we are importing some images from a directory that doesn't exist yet. So let's create it:

In assets/images create a folder with the name of your project, in our case of the example, we will create a folder called electro-test.

In this folder, we want to place our own background image for both the website and our header.

Register in .env file

Now that we've created our css class and we've added our own images. Let's add it to our .env file

LAYOUT='electro-test'

Ready!! We created our own layout.