UI Customization

Change UI Colors

Incremental Fields

Config object has section ‘ui’. In UI section now exist ‘colors’ where you can set up colors that will be used for:

  • Primary buttons. Property: buttons
  • Second buttons. Property: buttons_second
  • Alert buttons (actions that something remove/reset - deleted, drop db and etc). Property: buttons_alert
  • Tables headers. Property: table
  • Tables with Alert headers (like in Init DB). Property: table_alerts
  • Footer background. Property: footer
  • Header background. Property: header

Admin panel used Semantic UI as CSS Framework so all names of possible colors is described and showed here: https://semantic-ui.com/usage/theming.html

(red: #B03060; orange #FE9A76; yellow: #FFD700; olive: #32CD32 green: #016936; teal : #008080; blue : #0E6EB8; violet: #EE82EE; purple: #B413EC; pink: #FF1493; brown: #A52A2A; grey : #A0A0A0; black: #000000;)

To change colors pass config as:

Example here: examples/colored_ui/

Set Custom Header

To do this just set provide config argument:

  • name: project name, that will be displayed in UI. By default it shows: “Sanic-Gino Admin Panel”


if __name__ == "__main__":
    port=os.environ.get("PORT", "5000"),
        "name": "Colored UI"

Example in github: https://github.com/xnuinside/gino-admin/blob/master/examples/colored_ui/src/app.py#L28