How to Modify the StrongLoop's LoopBack Explorer CSS

Question

We\'re using Strongloop\'s LoopBack for our REST APIs and would like to modify the CSS for the LoopBack Explorer. However, it\'s not clear which CSS files are being used (Lo

Answer 1

I am able to apply custom css styles to loopback api explorer header.

Steps I followed as mentioned below

1. Goto node_modules > loopback-component-explorer > public > css folder
2. Copy loopbackStyles.css
3. Create a new folder called explorer under server folder
4. create css folder under explorer and paste the css file under css folder i.e., loopbackStyles.css
5. Add below config to component-config.json file

{
  "loopback-component-explorer": {
    "mountPath": "/explorer",
    "generateOperationScopedModels": true,
    "uiDirs": "server/explorer"
  }
}

To change loopback header color I have just overrided backgroun-color with my own color in body #header css selector in loopbackStyles.css

To replace the default header logo name with our custom name. I have added following css styles in loopbackStyles.css

.swagger-ui-wrap #logo{
  display: none;
}
.swagger-ui-wrap:after { 
  content: "MyOwn API Explorer";
  color: #fff;
  font-weight: bold; 
}