Include application logo and Change top bar background.

[habi003]

Can anyone suggest me on how to include my appilcation logo instead of swagger logo and change the text 'swagger' in the top bar. Also how to change the background color of the topbar.

Thanks in Advance !!

[heldersepu]

Custom CSS is one option: http://swagger-net-test.azurewebsites.net/swagger/ui/index

[replaysMike]

Interesting css animation but doesn't really answer the question. There is a css hack that can be done, but I agree this needs to be clarified in the documentation. We shouldn't have to rebuild the react UI in order to change the logo which is a really common operation.

.topbar-wrapper img[alt="Swagger UI"], .topbar-wrapper span {
    visibility: hidden;
}

.topbar-wrapper span:after {
    content: 'mylogo';
    color: #fff;
    visibility: visible;
    display: block;
    position: absolute;
    padding: 5px;
    top: 2px;
}

[heldersepu]

@replaysMike I do not see the hack... here is another way to change the logo image:

.topbar-wrapper img {
    content:url('mylogo.jpg');
}

[replaysMike]

the hack in my case is replacing the span with new content. Not considered a reliable way to modify content. Ideally, we would have a little more control of how those components are created without needing to build the ui.

[shockey]

Ideally, we would have a little more control of how those components are created without needing to build the ui

Agreed, we can do a better job here. I imagine exposing some new components (<TopbarApplicationLogo>?) to the plugin system would be a good step in this direction - switching this over to an enhancement ticket!

[robtown]

Trying to do this in .net. Injecting the css was simple enough but the replacing image via css trick doesn't work as the swagger instance seems to want to pull assets from a virtual directory or something.

[heldersepu]

@robtown Your statement seems contradictory ... Can you add your project to GitHub let's see what you are doing

[robtown]

Thank you for responding. I just sorted it out using c.CustomAsset() in the SwaggerConfig.cs file.

Let me try to explain what I ran into: I used the "c.InjectStylesheet(thisAssembly, "ProductsApp.SwaggerContent.swaggerTest1.css");" setting in the " .EnableSwaggerUi" portion of the SwaggerConfig.cs file to inject my custom css file. This worked a like a charm for changing the header BG color. When I added this to my css to try and change the logo file: .swagger-section #header .logoimg { content: url("<actual/pathtoimage/image.png>"); width: 50%; / Width of new image / height: 50%; / Height of new image / } I got a broken image link as instead of looking in my .net structure for images (http://localhost:57144/SwaggerContent/image.png), it was referring to http://localhost:57144/swagger/ui/ext/SwaggerContent/image.png... There is no "swagger/ui/ext" folder in my project. Soooo.... using: c.CustomAsset("logoImage", thisAssembly, "ProductsApp.SwaggerContent.image.png"); in the SwaggerConfig.cs file. along with: .swagger-section #header .logoimg { content: url(../logoImage); width: 50%; / Width of new image / height: 50%; / Height of new image / } in my custom css file did the trick. (note: the actual css selectors might be a little different depending on which version of swashbuckle or swagger ui you use.) Hopefully this makes sense and can be helpful to others trying to do the same thing. Of course make sure any custom assets used in this fashion are set to "embedded resource" in the properties.

[JDebro]

@robtown

Thank you for this information. Would you be able to provide the necessary action for Swagger 3? This is where I am running into problems. However, your resolution is EXACTLY what I'm seeking to apply on my end.

[jogleasonjr]

Adding my $0.02USD since the above solutions either didn't work or they would tack the logo onto multiple elements on the page. What worked for me using the latest version of swagger in ASP Core was:

.topbar-wrapper img[alt="Swagger UI"], .topbar-wrapper span {
    visibility: collapse;
}

.topbar-wrapper .link:after {
   content: url('company-logo.svg');
   position: absolute;
   top: -5px; //fiddle with this as needed
}

Note that I did not have to set the SVG as an embedded resource nor specify a custom asset in the API bootstrapping as indicated above.

[typesafedev]

Thanks @jogleasonjr but without having to fiddle with positioning.

.topbar-wrapper img[alt="Swagger UI"], .topbar-wrapper span {
    visibility: collapse;
}

.topbar-wrapper .link:before {
    content: url('company-logo.svg');
}

[supergibbs]

Seems possible when hosted: https://app.swaggerhub.com/help/organizations/docs-branding?_ga=2.171574944.166340862.1556735019-2059045804.1556735019

[javaHelper]

How can we do and where when using Spring Boot ?

[Hassanzadeh-sd]

you can change logo and header color with css : find style.css or main css file in your swagger third app for example in drf-yasg you can fine drf root path style.css file add these lines to css :

/* Custom CSS  */

.topbar-wrapper img {
    content: url(http://127.0.0.1:8000/static/company/logo.png);
}

.swagger-ui .topbar .download-url-wrapper .download-url-button {
    background-color: #red !important;
}

.swagger-ui .topbar .download-url-wrapper input[type=text] {
    border-color: #red !important;
}

[javaHelper]

I am using Springdoc open API dependency, where exactly I would need to change ?

[goldami1]

@javaHelper +1 ?

[ricardoaguiar]

I'm using node and express. How can I switch the topnav background color and logo?

[Danielku15]

As a hint how we're doing it: we use the plugin API with wrapComponent on the Topbar component. The essential (vanilla old school) JavaScript part is:

var CustomTopbar = function (ui) {
    return {
        components: {
            CustomMenuComponent: createCustomMenuComponent(ui)
        },
        wrapComponents: {
            Topbar: function (OriginalTopbar) {
                return function (props) {
                    var CustomMenuComponent = props.getComponent("CustomMenuComponent");
                    return ui.React.createElement('div',
                        { className: "topbar-wrap" },
                        ui.React.createElement(CustomMenuComponent),
                        ui.React.createElement(OriginalTopbar, props)
                    );
                };
            }
        }
    };
};
config.plugins.push(CustomTopbar);
function createCustomMenuComponent(ui) {
    return ui.React.createClass({
        render: function () {
            return ui.React.createElement('div',
                { id: 'menu' },
                ui.React.createElement('div',
                    { className: 'logo' },
                    'logo here')
            );
        }
    });
}

The rest is up to your CSS skills. A bit of flexbox, and resetting original topbar styles and you're ready to go.

Disclaimer: We're using Swashbuckle and inject custom CSS/JS files to the UI. Depending on how you integrate swagger-ui to your project, you might be able to do the same:

• Via NPM swagger-ui it should be easy to register the plugin and develop the components even in JSX
• Via NPM swagger-ui-dist I'm not sure how to do this easily. You might need a pre-processor for the index.html served. Others might be able to help here better.
• Via Docker I doubt that there is a solution. I don't think it has a system to do any customizations (not even via plugin API).
• Via unpkg: also works quite easy as you're the author of the HTML surrounding it anyhow.
• Via Swashbuckle: use InjectStylesheet and InjectJavascript to add some assets to the HTML doing the above things.

[chanakaDe]

There is a simple way of doing this even if you have a bigger image.

    .topbar-wrapper img[alt="Swagger UI"], .topbar-wrapper span {
        visibility: collapse;
    }

    .topbar-wrapper .link:after {
      content: url('https://demo-img.png');
      width: 240px !important;
      display: flex;
    }

Always make sure to use display: flex and change the width accordingly.

[honza-zidek]

You are all commenting on how to change the CSS. But in the Spring Boot application, where should I change it? The original CSS is in the JAR file .m2/repository/org/webjars/swagger-ui/3.52.5/swagger-ui-3.52.5.jar!/META-INF/resources/webjars/swagger-ui/3.52.5, and even if I try to place my own version to the project's folders resources, resources/META-INF, static, public, wherever, it has no effect on the generated Swagger UI.

The same problem with favicon image.

[rkgitvinay]

I'm using node and express. How can I switch the topnav background color and logo?

var options = { customCss: '.topbar-wrapper img { content: url(http://127.0.0.1/image/logo.png;}' };

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument, options));

[ansibleguy76]

I'm using node and express. How can I switch the topnav background color and logo?

var options = { customCss: '.topbar-wrapper img { content: url(http://127.0.0.1/image/logo.png;}' };

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument, options));

Not sure why everyone else uses the "after" pseudo, this answer is the most simple one.

[Harisankar2000]

@ansibleguy76 @ricardoaguiar you can refer like this=>>>>>>>>

const express = require('express');
const serverless = require('serverless-http');
const swaggerUI = require('swagger-ui-express');
const app = express();

var options = {
    customSiteTitle: "YOUR TITLE",
    customCss:`
      .topbar-wrapper img {
        content: url("your logo link");
        max-width : 90px ;
      }
      .topbar-wrapper {
        display: flex;
        align-items: center;
  justify-content: flex-start;
      }

      .topbar-wrapper a {
        max-width: 90px ;
      }

      .topbar {        
        padding: 15px 0 !important;
        background: red ;
      }
    `,
    customfavIcon: "https://logo.svg"
  };
app.use('/swagger-docs', swaggerUI.serve,
    swaggerUI.setup(swaggerdoc,options));
module.exports = serverless(app);

[juocal]

I had the same issues. I had an old working solution with the CSS adjustments. Unfortunately, the CSS adjustments weren't working anymore, as the IMG-Elemt was replaced with a SVG-Element in the newest version of swagger-ui 5.0 and thus also in springdoc openapi-ui.

After some deeper investigation, I figured out, that swagger-ui supports a react-based plugin-system. There is also an explaination how to replace the Logo Component via the plugin-system here.

As I am not very proficient in react yet, I had some problems putting everything together in JavaScript. As "Replacing the logo" is probably a recurring use case, here is a step-by-step guide which worked for me, with some example code how to replace the "Logo"-Component, utilizing React, without the need to replace the CSS code:

Create a customLogo.js file

Create a custom javascript file with the following conent:

function MyLogoPlugin(system) {
  return {
    components: {
      Logo: () => {
        const img =  system.React.createElement("img", {
              alt: "My Logo",
              height: "40",
              src: "./some_logo_file.svg"
        });

        return img;
      }
    }
  };
}

Configure MyLogoPlugin in swagger-initializer.js

Configure the "custom" MyLogoPlugin in the swagger-initializer.js file.

The adjusted default swagger-initializer.js file could look like this:

window.onload = function() {
  //<editor-fold desc="Changeable Configuration Block">

  // the following lines will be replaced by docker/configurator, when it runs in a docker-container
  window.ui = SwaggerUIBundle({
    url: "https://petstore.swagger.io/v2/swagger.json",
    dom_id: '#swagger-ui',
    deepLinking: true,
    presets: [
      SwaggerUIBundle.presets.apis,
      SwaggerUIStandalonePreset
    ],
    plugins: [
      SwaggerUIBundle.plugins.DownloadUrl,
      MyLogoPlugin
    ],
    layout: "StandaloneLayout"
  });

  //</editor-fold>
};

Note: I only added the "MyLogoPlugin" line in the plugins-array!

Please keep in mind, that the swagger-initializer.js file might get replaced by docker or other applications, which create a programatically generated SwaggerUIBundle call. Thus, please configure the "MyLogoPlugin" plugin in the upstream application instead!

Load the customLogo.js in the index.html

In order to make the custom Plugin available, you need to load it in the index.html file. Add this line in the index.html file:

<script src="./customLogo.js" charset="UTF-8"> </script>`

Reload your index.html

Reload your index.html to see the changes! These steps worked for me to replace the logo, WITHOUT CSS fiddling with the newest swagger-ui 5.0 release!.

[MarcoMartins86]

As @juocal pointed out, the previous CSS tricks aren't working anymore. Since for me, it's easier to use CSS, I've adapted the one from @typesafedev to:

.swagger-ui svg:not(:root), .topbar-wrapper span {
  display: none;
}
.topbar-wrapper .link:before {
  content: url('yourlogo.png');
}

If you want to show the Select a definition Remove the , .topbar-wrapper span from the CSS.

[hbschiller]

Just a note, @MarcoMartins86 solution works, but in my case it also removed the svg for "copy to clipboard" icons next to the endpoints

The solution to me was to apply it specifically to the topbar element:

.swagger-ui .topbar svg:not(:root) {
    display: none;
}