Swagger-ui: 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 .logo__img {
content: url("");
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 .logo__img {
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.