Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Here are some branding examples to help you get started. When you copy the sample_theme folder to a new folder, make a note of the folder name because it is the name of the theme and you will need to configure and select it in Abiquo later.

...

  1. Change the background color of the application. Search for the CSS class ".main-background-color" and change FFFFFF to another valid web color, for example, light grey EEEEEE

  2. Change the background color for the main menu. Search for the following CSS and replace the color as you prefer.

    Code Block
    .main-menu {
    Code Block
    
        background-color: #333333;
    }

  3. Change the font color for the left side list by searching for and replacing the following colors

    Code Block
    .main-menu .centering-container-menu li .main-menu-section-link-active small,
    .main-menu .centering-container-menu li.main-menu-section-link-active a span {
        color: #COLOR_HEX;
    }

  4. Change the colorĀ of the primary font

    Code Block
    body {
        color: #ec9032;
    }

  5. Change the color of the primary button

    Code Block
    .btn-primary {
        background-color: #719e19;
        border-color: #719e19;
    }

  6. Change the color of the popup header bar

    Code Block
    .modal-header {
        background-color: #efa253;
    }

  7. Optionally, change the background color of the toast error messages

    Code Block
    .toast-success {
      background-color: #51A351;
    }
    .toast-error {
      background-color: #BD362F;
    }
    .toast-info {
      background-color: #2F96B4;
    }
    .toast-warning {
      background-color: #F89406;
    }

...