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.

Recommended styling

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

     @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 guarantee that this will not have unforeseen consequences for other sections of the administration.

1. Just like the steps above, create a custom scss file in the admin/ folder
2. 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.