How to add custom branding?

Quark Publishing Platform NextGen supports custom branding through extensibility. There are two ways you can customize branding elements:

1. Through extensibility.json
2. Through CSS

Through extensibility.json

To change branding elements through extensibility.json, you have to work with the following services:

• Authservice
• Applicationservice

Process

1. Add extensbility.json to the folder conf of both the services.
2. Add the following properties to extensbility.json of the respective services:

• Authservice

  {
      "fullLogoUrl": "s3://fullLogo.svg",
      "favIconUrl": "s3://favIcon.png",
      "backgroundUrl": "s3://background.svg"
  }
  

• Applicationservice

  {
      "fullLogoUrl": "s3://fullLogo.svg",
      "favIconUrl": "s3://favIcon.png",
      "shortLogoUrl": "s3://shortLogoUrl.svg"
  }
  

Positions of the Custom Branding Elements

You can customize the branding elements at two locations – on the Login screen and on the About dialog. The position of customizable branding elements are as follows:

Property	Service	Recommended Ratio	Position and Sample
fullLogoUrl	Authservice	8:1	Displayed on the Login dialog of the Login screen
fullLogoUrl	Applicationservice	8:1	Displayed on the About dialog
favIconUrl	Authservice and Applicationservice	1:1	Displayed as a favicon of the tab on a web browser
shortLogoUrl	Applicationservice	1:1	Displayed on the top-left corner of the header bar
backgroundUrl	Authservice	16:9	Displayed as the background of the Login screen

Pros and Cons of Using extensibility.json

Pros

1. For custom logos, you can use an absolute URL or you can add a custom image to the folder conf/assets of your respective services and then use the protocol “s3://” to load the image from relative path. For example, the iconUrl “s3://people.png” loads the image people.png available at the location {service}/conf/assets.

Cons

1. You must add logos only of the recommended aspect ratio for proper rendering.

Through CSS

To change branding elements through CSS, you have to work with the following services:

• Authservice
• Applicationservice
• Qaservice

Process

1. Add the file content.css to the folder {service}/conf of the respective services.
2. Add your CSS properties to make any user interface changes.

• Authservice

  • Full logo:

       .login-content-header {
           background: url("./images/ce-logo.svg") center bottom / contains no-repeat padding-box padding-box
       }    
    

  • Background:

      body {
          background: url("./images/login-page-background.png") 0% 0% / covers no-repeat
      }    
    

• Applicationservice

  • Full logo:

       .about-banner-logo {
           background: url("./images/ce-logo.svg") center bottom / contains no-repeat padding-box padding-box
       }    
    

  • Small logo:

      .app-logo {
          background: url("assets/images/logo.svg") center center / contains no-repeat padding-box padding-box
      }    
    

    Note: For Applicationservice, you have to move the file content.css to the folder conf/{applicationName}. The applicationName here could be “workspace” or “admin”. You can override the CSS of the respective applications.

• Qaservice

  • Full logo:

       .about-banner-logo {
           background: url("./images/ce-logo.svg") center bottom / contains no-repeat padding-box padding-box
       }    
    

  • Short logo:

      .app-logo {
          background: url("assets/images/logo.svg") center center / contains no-repeat padding-box padding-box
      }    
    

Pros and Cons of Using CSS

Pros

1. You can manage position of your logos through CSS.
2. You can update color scheme of any DOM elements. Like buttons, header bar, and so on.

Cons

1. You must provide absolute URL to update logos.
2. You cannot update the favicon with CSS.

Download Sample