Redoc: custom CSS

Created on 24 Mar 2017 · 9Comments · Source: Redocly/redoc

Hi ReDoc team,
Is there any way to apply custom css in ReDoc? I tried applying in index.html of ReDoc but that is getting overridden by ReDoc styles.

Regards.

Source

ranjapri

All 9 comments

This is similar to #144

You can override certain styles you would just have to use the !important operator a lot or make your CSS have a higher specificity value

.menu-content {
    background-color: #ffff00 !important;
}

jsmartfo on 25 Mar 2017

@jsmartfo thanks for answering!
CSS is now getting overridden by ReDoc as it uses attributes selectors.

Instead of having important try to prefix all your css rules with e.g. redoc[spec-url]. It should increase specifity of css selectors and do the trick.

During the next month I am going to refactor all the css and this issue should not happen in the future

RomanHotsiy on 25 Mar 2017

👍1

Thanks Roman and Jsmartfo,

One clarification, do i need to specify the css file like following in index.html?
< redoc spec-url="customstyle.css" >
or need to modify the css file itself and modify the style (could you please provide an example for this? how to prefix the css rule?)

Regards,

ranjapri on 27 Mar 2017

@ranjapri spec-url is for providing swagger spec not css file.

You should add your css into head of the html page. Taking quick example from readme:

<!DOCTYPE html>
<html>
  <head>
    <title>ReDoc</title>
    <!-- needed for adaptive design -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="YOUR CSS LINK HERE">
  </head>
  <body>
    <redoc spec-url='http://petstore.swagger.io/v2/swagger.json'></redoc>
    <script src="https://rebilly.github.io/ReDoc/releases/latest/redoc.min.js"> </script>
  </body>
</html>

As for prefixing, here is example of how to change headings 1 color:

redoc[spec-url] h1 {
  color: red;
}

redoc[spec-url] .tag-info h1 {
  color: red !important;
}

Sometimes prefixing is not enough so just use !important for now

RomanHotsiy on 27 Mar 2017

👍1

Thank you so much Roman,
It works but writing important for all styles or even prefixing is troublesome. Will the CSS work seamlessly after the code refactoring?

Regards.

ranjapri on 28 Mar 2017

😄1

@ranjapri yes, it will

RomanHotsiy on 28 Mar 2017

👍1

Is custom CSS like this supported in redoc-cli?

debri174 on 31 May 2018

@debri174, no, redoc-cli is using [email protected] which is a complete rewrite so this css doesn't work
To customize it you can use the theme. Check out README for details

RomanHotsiy on 31 May 2018

Could someone please confirm;

If i'm wanting to use custom styling (for any / every thing), I would need to stick to v1.x.x for now? (https://rebilly.github.io/ReDoc/releases/latest/redoc.min.js) rather than the newer v2 (https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js)?

Seems that, using the v1.x.x reference I can get the styling to work (external link and in-place styling), however, if I change to v2, nothing renders?
@RomanGotsiy