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("<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 .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