Custom Styles for Administration
A key part of the design of our applications is the administration section, where administrators can manage their application, users and extensions. An important part of creating this offering was the design of an end-to-end experience that allows users to easily manage their application. As a result, we believe that the administration section should be something that meets ours users needs for those specific task. Considering that, we recommend our users don’t alter the way of our administration section is built or styled, as it may have many unforeseen consequences.
In the instance where administration is required that does not suit the design of ours, we recommend the user builds what we call a “Frontend Administration” Name subject to change. This section would be built within the target application and be modelled and crafted similarly to the frontend of the application.
As mentioned above, overall it is not recommended that users alter the styles of the administration section of a Codebots application. However, some specific sections that could be changed, which should have minimal effect on the overall functionality would be as follows:
Colours and fonts
Just like the frontend, you can override colours and font variables by creating a new
scss file in the
admin/ folder and import your new file into the protected region
[Add additional imports here]. Here is an example on how you can override the variables in the admin end:
- Navigate yourself to
- Create a new file called
Add the following code
$admin-primary-color: rgb(100, 100, 255); $admin-secondary-color: rgb(200, 100, 255); $admin-body-font-family: 'Helvetica'; $admin-heading-font-family: 'Arial Black';
- Go to
main.scssand turn on the first protected region
[Add additional imports here]
Add the following line into the code
If you would like to further extend the styling of the administration, some tips are below - once again we can not guarantee that this will not have unforeseen consequences for other sections of the administration.
- Just like the steps above, create a custom
scssfile in the
- Add the import of your file into
import-admin-custom.scsswithin the protected region provided.
You can do custom element, components and page/tile styling in the admin section if you wish to do so, this might change how the admin end may work.
Was this article helpful?