CODEWITHSUNDEEP
spring-bootswagger-uispringfox
Avinash
Avinash

Reputation: 553

How to change Swagger UI index.html logo and header contents in Springfox?

I'm documenting my API created using Spring Boot 2.4.3 using springfox-swagger 3.0.0. So I have the below page now.

enter image description here

My client wants to change the Swagger UI logo to their own. I'm not able to do so. I have searched and found few solutions and it is not working.

  1. Added the below custom code under /resource/static/swaggercustm.css. But no changes.

    .swagger-ui img {
   content: url('/static/css/mylogo.png');
   width: 140px; 
   height: 40px; 
}

  2. Imported swagger-ui.css to local and triede modifying image path. But this also didn't help.

Can somebody please help me here to just modify the logo? How to override the logo properties?

Upvotes: 7

Views: 10509

Answers (1)

Divvya Mehta
Divvya Mehta

Reputation: 374

Unfortunately, There is no Configuration available in Springfox library to Customise UI elements CSS and Icons.

If you want your own customised Swagger Page then create a static HTML page and disable usage of auto-generated swagger page from Springfox. Since its HTML, you can change ICONS and the look of it however you want.

resources/static/new_swagger.html

<!-- HTML for static distribution bundle build -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Custom Swagger UI</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.24.2/swagger-ui.css" >
    <link rel="icon" type="image/png" href="./swagger-favicon-32x32.png" sizes="32x32" />
    <link rel="icon" type="image/png" href="./swagger-favicon-16x16.png" sizes="16x16" />
    <style>
      html
      {
        box-sizing: border-box;
        overflow: -moz-scrollbars-vertical;
        overflow-y: scroll;
      }

      *,
      *:before,
      *:after
      {
        box-sizing: inherit;
      }

      body
      {
        margin:0;
        background: #fafafa;
      }

      .top-nav-bar{
        position: fixed;
        top: 0;
        z-index: 99;
        width: 100%;
        overflow: hidden;
        background: #333;
        padding: 15px;
      }
      .nav-bar-icon{
        margin-top: 1px;
        float: left;
        display: block;
        text-decoration: none;
      }
      .nav-bar-title{
        float: left;
        display: block;
        text-decoration: none;
        margin-top: 7px;
        margin-left: 10px;
        font-size: 18px;
        color: #ffffff;
        font-family: sans-serif;
      }
      .nav-bar-select{
        width: 30%;
        float: right;
        font-family: sans-serif;
        display: inline-block;
        cursor: pointer;
        padding: 10px 15px;
        outline: 0;
        border-radius: 2px;
        border: none;
        background: #fafafa;
        color: #3b4151;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
      }
      select.classic {
        background-image: linear-gradient(45deg, transparent 50%, #111 50%), linear-gradient(135deg, #111 50%, transparent 50%);
        background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0;
        background-size: 5px 5px, 5px 5px, 3.5em 3.5em;
        background-repeat: no-repeat;
      }
    </style>
  </head>

  <body>
    <div class="top-nav-bar">
      <a class="nav-bar-icon"><img src="swagger-favicon-32x32.png"></a>
      <a class="nav-bar-title"><b>X name</b></a>
      <select class="classic nav-bar-select" id="service-selector" onchange="changeSwaggerUI()">
        <option value="./swagger.json">X service</option>
      </select>
    </div>
    <div style="margin-top: 100px" id="swagger-ui"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.24.2/swagger-ui-bundle.js"> </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.24.2/swagger-ui-standalone-preset.js"> </script>
    <script>
      function changeSwaggerUI(){
        let selected_service_swaggerURL = document.getElementById("service-selector").value;
        loadUI(selected_service_swaggerURL);
      }

      function loadUI(swaggerJsonURL){
        // Begin Swagger UI call region
        const ui = SwaggerUIBundle({
          url: swaggerJsonURL,
          validatorUrl: "",
          dom_id: '#swagger-ui',
          deepLinking: true,
          docExpansion: 'none',
          presets: [
            SwaggerUIBundle.presets.apis,
            SwaggerUIStandalonePreset
          ],
          plugins: [
            CustomTopbarPlugin
          ],
          layout: "StandaloneLayout"
        });
        // End Swagger UI call region

        window.ui = ui
      }

      function CustomTopbarPlugin() {
        // this plugin overrides the Topbar component to return nothing
        return {
          components: {
            Topbar: () => null
          }
        }
      }

      window.onload = function() {
        loadUI("./swagger.json");
      }
  </script>
  </body>
</html>

Upvotes: 1

Related Questions