Skip to main content

How to add custom branding?

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:

PropertyServiceRecommended RatioPosition and Sample
fullLogoUrlAuthservice8:1Displayed on the Login dialog of the Login screen
Full logo login page
fullLogoUrlApplicationservice8:1Displayed on the About dialog
Full logo about dialog
favIconUrlAuthservice and Applicationservice1:1Displayed as a favicon of the tab on a web browser
Full logo about dialog
shortLogoUrlApplicationservice1:1Displayed on the top-left corner of the header bar
Full logo about dialog
backgroundUrlAuthservice16:9Displayed 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

How to add a custom toolbar?

How to add a custom toolbar?

The Custom Toolbar extensibility allows you to add additional toolbar on top of the authoring canvas to accomodate additional buttons.

To add Custom Toolbar extensibility to Quark Author:

  1. Create a folder feature in the directory qaservice/ext in the s3 bucket.
  2. Create a folder toolbar in the folder feature.
  3. Add the Custom Toolbar plugin to the folder toolbar.

The name of the folder toolbar must be the same as you have specified in the file qa-config.json under the property “extensions.”

Sample qa-config.json (available for every content type)

"extensions": [
    "toolbar"
]

The folder toolbar also must contain the file “manifest.json” with the key “modules” with “type” defined as “qa-extensible-toolbar” along with the related data.

Sample manifest.json

{
    "version": "0.0.1",
    "modules": [
        {
            "type": "qa-extensible-toolbar",
            "name": "toolbar",
            "frameUrl": "toolbar.html",
            "toolbarHeight": 50
        }
    ]
}

Download Sample

How to add a custom pane?

How to add a custom pane?

The Custom Pane extensibility allows you to add panes across the authoring canvas.

To add Custom Pane extensibility to Quark Author:

  1. Create a folder feature in the directory qaservice/ext in the s3 bucket.
  2. Create a folder custom-links-pane in the folder feature.
  3. Add the Custom Pane plugin to the folder custom-links-pane.

The name of the folder custom-links-pane must be the same as you have specified in the file qa-config.json under the property “extensions.”

Sample qa-config.json (available for every content type)

"extensions": [
    "custom-links-pane"
]
"panes": [
    "custom-links-pane"
]

The folder custom-links-pane also must contain the file “manifest.json” with the key “modules” with “type” defined as “qa-extensible-pane” along with the related data.

Sample manifest.json

{
    "version": "0.0.1",
    "modules": [
        {
            "type": "qa-extensible-pane",
            "displayName": "Custom Links Pane",
            "name": "custom-links-pane",
            "iconUrl": "orange.png",
            "frameUrl": "frame_data/index.html",
            "position": "right"
        }
    ]
}

Download Sample

How to add a custom navigation menu?

How to add a custom navigation menu?

The Custom Navigation Menu extensibility allows you to add menu and menu items in a navigation tree.

To add Custom Navigation Menu to Quark Author:

  1. Create a folder feature in the directory qaservice/ext in the s3 bucket.
  2. Create a folder nav in the folder feature.
  3. Add the Navigation Menu plugin to the folder nav.

The name of the folder nav must be the same as you have specified in the file qa-config.json under the property “extensions.”

Sample qa-config.json (available for every content type)

"extensions": [
    "nav"
]

The folder nav also must contain the file “manifest.json” with the key “modules” with “type” defined as “qa-nav-menu” along with the related data.

Sample manifest.json

{
    "version": "0.0.1",
    "modules": [
        {
            "type": "qa-nav-menu",
            "displayName": "Dialog 1",
            "name": "dialog1",
            "iconUrl": "orange.png",
            "show": true,
            "actionType": "dialog",
            "frameUrl": "https://example.com/",
            "showInReadOnly": false,
            "showInAllSections": true,
            "menu": "root",
            "hasChildren": false,
            "dialogConfig": {
                "height": 500,
                "width": 700
            }
        }
    ]
}