Start modelling your app today.

Get started for free

What's this?

Custom Styles for Administration

This article will show you how to use best practice to style the Admin section of your application.


A key part of the design of our applications is the administration section, where administrators can manage their application, users and behaviours. 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 modeled 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:

  1. Navigate yourself to scss/admin/
  2. Create a new file called variables.scss
  3. 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’;

4. Go to `main.scss` and turn on the first protected region `[Add additional imports here]`
5. Add the following line into the code
``` scss
 @import admin/variables.scss

Beyond Recommendations

If you would like to further extend the styling of the administration, some tips are below - once again we can not guaraentee that this will not have unforeseen concensequences for man sections of the administrration. Just like the steps above, create a custom scss file in the admin/ folder but this add the import of your file into import-admin-custom.scss within 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.


Start modelling your app today.