Customizing OpenAPI output with CSS

[koshelekapi]

Hello!

I am using your plugin on MkDocs Material. Now I am trying to customize OpenAPI output with extra CSS, and I'm failed( Please clarify is it possible?

What do I have:

1. docs/css/extra.css and docs/css/extra-swagger-ui.css files
2. Correct pointing to these files in my mkdocs.yml file:

   extra_css:
   - css/extra.css
   - css/extra-swagger-ui.css

3. The css/extra-swagger-ui.css file content:

   
   body {
   background-color: white
   }

@font-face { font-family: "TT_Norms_Pro_Regular"; src: url('/fonts/ttf/TT Norms Pro Regular.ttf') format('truetype'); }

/ @font-face { font-family: "TT_Norms_Pro_Light"; src: url('/fonts/ttf/TT Norms Pro Medium.ttf') format('truetype'); } /

:root { --md-text-font: "TT_Norms_Pro_Regular"; --md-code-font: "TT_Norms_Pro_Regular"; }

.swagger-ui .p { color: black; font-family: var(--md-text-font); font-size: 1em; font-weight: normal; line-height: 2; }

And this CSS does not apply in any way( you can see example here: http://shahid.ru/en/cm_loyalty_online_api/api_requests/

Could you please help me?

[blueswen]

To prevent the theme or extra CSS or JS files affect the Swagger UI, the Swagger UI is displayed in a clean iframe without loading any other CSS or JS files.

Seems some customization would be great, I will add a plugin option for adding extra CSS later.

[koshelekapi]

Thank you! Could you please specify when you'll be able to do this?

[blueswen]

@koshelekapi Sorry for the late reply.

The extra CSS for the Swagger UI iframe feature is released in version 0.5.0. You can check more detail on option page about the extra_css option.

[koshelekapi]

Hello! I updated the plugin and tried to use the new functionality. What I have done:

1. I created the css/extra-swagger-ui.css file
2. I enabled it, even twice :) within my mkdocs.yml file.

extra_css:
  - css/extra.css
  - css/extra-swagger-ui.css

plugins:
  - swagger-ui-tag: # https://github.com/blueswen/mkdocs-swagger-ui-tag
      docExpansion: list
      defaultModelExpandDepth: 7
      defaultModelsExpandDepth: 7
      extra_css: 
        - css/extra-swagger-ui.css

3. I created the .md file and included the CSS specification into it: <swagger-ui src="check_in_api.yaml" extra_css="css/extra-swagger-ui.css"/> But nothing helps, CSS styles are not applied. And when I build documentation, I get an error: WARNING:root:extra_css: css/extra-swagger-ui.css dose not exist Could you please clarify where is the my error cause?

[koshelekapi]

An addition to my previous message :) I've modified my configuration a little, and now it works. What I have done:

1. Within the plugins sections of the mkdocs.yml file, I've made some replacement, now the value is:

   extra_css: 
   - docs/css/extra-swagger-ui.css

2. I disabled this option within the extra_css section of the mkdocs.yml file
3. Now, I include the YML file in another way within the .md: <swagger-ui extra_css="['../../css/extra-swagger-ui.css']" src="check_in_api.yaml"/> It seems that it works, but I'm not sure if it is correct.

[blueswen]

I fixed this bug in the new version v0.5.1. The extra CSS files should be placed in docs_dir like the extra_css setting in mkdocs.

The following is a directory structure and mkdocs.yml example:

.
├─ docs/
│  └─ stylesheets/
│     └─ extra.css
└─ mkdocs.yml

plugins:
  swagger-ui-tag:
    extra_css:
      - stylesheets/extra.css