Skip to content

External CSS and JS

Utkarsh Verma edited this page Jan 11, 2019 · 8 revisions

You can freely and fully customize Dream Plus by using your own CSS and JS files externally. It's quite easy and convenient.

Usage

To use this feature, do the following:

  • Place your external CSS or JS within the static/css or static/js directory of your Hugo site folder respectively. If you're too lazy to do that, skip this step and simply load them from the internet.

They shouldn't necessarily be in the js or css folders since their paths will be specified in the next step. Ignore this if loading CSS/JS from the internet.

  • Specify where your external files are through the customCSS or customJS config variables(in config.toml) in features table under params. The paths should be absolutely defined. For example:
[params.features]
    #Loading off of `static` folder
    customCSS = ["/css/dracula.css"]
    customJS = ["/js/twemoji.min.js"]

    #Loading from the internet
    customCSS = ["https://......."]
    customJS = ["https://........"]

Loading CSS/JS from GitHub as a raw file fails in some cases, to fix this use RawGit for hosting the file with proper content-type headers.

That's it. After doing this, your externally provided files will be loaded before the </BODY> tag. On a side note, the JS files will be loaded after jQuery and Semantic UI so their functions can be used in your external JS file.

Clone this wiki locally