Ability to add custom styles

[branpar]

Hello,

I'm looking to use jsdoc and docdash to generate JavaScript documentation for an enterprise application. I need to be able to override the styles to match company branding yet keep the overall layout the same. Is there anything built in so that I can include my own styles into the template? Perhaps in the config file?

[stefangabos]

You can do this by editing node_modules/static/styles/jsdoc.css for the overall look and feel and node_modules/static/styles/prettify.css for the highlighter (actually, some things related to the highlighter are also found in the first file)

[branpar]

Thanks for the quick reply! While that solution works locally for the short-term, since this will be part of a build process on a server it doesn't hold up. The node_modules folder isn't checked in to source control and the folder is deleted and an npm install occurs for each build of the production files. The best solution would be to allow for an array of values in the jsdoc.json file, perhaps under the docdash section, that allows a user to pass in paths to other css files.

For now I'll make this work but this would be an awesome enhancement to your already really good template.

[stefangabos]

Here's how I did it - I forked this repository, I did my modifications and then I added my repo in packages.json like
"docdash": "https://github.com/stefangabos/docdash.git",

[hkurra]

Just for the future visitor: We can override the default 'layout' template through configuration

"templates": {
     ....
    "default": {
        "layoutFile": "./your/template/path/yourLayout.tmpl",
    }
}

In this custom layout we can import our custom CSS as required.
Initially, you can copy the layout.tmpl from the docdash itself and start making changes in it.

[ar2rsawseen]

You can now load external js and css files through scripts property in the template to override whatever you want
added in:
#20

[A-312]

If you want add a custom css file:

{
  "docdash": {
    "scripts": [
      "custom.css" // http path
    ]
  },
  "templates": {
    "default": {
      "staticFiles": {
        "include": [
          "./docs/custom.css" // file position
        ]
      }
    }
  }
}