Modifications to Swagger UI header

问题:

I have created a personal WEB API using Swashbuckle and Swagger API.

While I am able to integrate this successfully, I would like to modify the default UI for Swagger. Changing the color of the header and replacing the swagger image.

Is this possible by modifying existing files?

回答1:

These are the steps I took:

1. Create a new file SwaggerHeader.css
2. Right click on SwaggerHeader.css, select Properties. Set Build action to Embedded Resource.
3. In SwaggerConfig.cs, add the below line of code:

      EnableSwaggerUi("Document/{*assetPath}", c =>
      {
          c.InjectStylesheet(typeof(SwaggerConfig).Assembly,
          "ProjectName.FolderName.SwaggerHeader.css");
      }

4. SwaggerHeader.css looks like the below:

/* swagger ui customization */
body.swagger-section #header {
    background-color: white;
    background: url(your-new-logo.png) no-repeat;
    background-position-x: 250px;
    height: 50px;
}

body.swagger-section #header .swagger-ui-wrap #logo {
        display: none;
}

回答2:

To change the color, you can inject a new stylesheet

Qoute from the SwaggerConfig.cs file

Use the "InjectStylesheet" option to enrich the UI with one or more a dditional CSS stylesheets. The file must be included in your project as an "Embedded Resource", and then the resource's "Logical Name" is passed to the method as shown below. c.InjectStylesheet(containingAssembly,"Swashbuckle.Dummy.SwaggerExtensions.testStyles1.css");

Remember to set Build Action of the stylesheet to "Embedded Resource".