# Changing the Look and Feel of an Application
As explained in the CoB Architecture, the platform's user interface consists of a regular Web application developed in HTML, CSS, and JavaScript (JS).
To change the style or behaviour of the web application you only need to make changes in two files:
recordm/customUI/css/customizations.css
recordm/customUI/js/customizations2.js
These two files are loaded in every page of the application and their configuration will override any pre-existing settings.
WARNING
Any of these two files may need to be created if they don't already exist in the repository.
# Customization Basics
In any CoB's server repository, the customizations2.js
file imports a series of JavaScript files. This is so as to provide a greater compartmentalization and, by extension, readability of the code contained in each of these files.
If we wish to change the appearance of an element in our CoB app (e.g: the columns in the listing of a Definition, or a button's behavior), a <customization>.js
file will have to be created in recordm/customUI/js/customizations/<customization>.js
and imported in recordm/customUI/js/customizations2.js
. You can check an example in the image below.

There are multiple JavaScript functions made for customizing different components in a CoB app. These are used inside our <customization>.js
files.
Most of the times, you can directly include CSS (e.g: inline) when programming a customization, but other times you may want to have a dedicated CSS file for that specific customization, due to readability and organization. For this purpose, you can create a css file in recordm/customUI/css
and import it into recordm/customUI/css/customizations.css
- similarly to the .js customizations.
Below is an example of a customization and it's respective css file. Both of which are imported, respectively, into customizations2.js
and customizations.css
.

TIP
More details on how to create customizations and which functions are available here (opens new window).
Parallel, there's also a page with more detailed explanation and examples on how to enhance our app with CSS here.