Can't find how to change CSS

Using Themes
1

Hi,

This could be because of my lack of understanding for how the themes work (sorry for that), but the changes that I do in the CSS file, don’t get reflected.
This CSS file seems to be the source of what the browser refers to.
It’s located at themes/<themename>/static/assets/css/page.css

When the page loads in the browser, I also see two css files called reboot.css and inverse.css which are taking effect for the styles I want to change.

When I find them in my codebase, they’re inside the theme/<name>/static/assets/plugin/thedocs/scss/ directory, and is more of a pre-compiled CSS, which doesn’t have the same elements as the browser displays them to have.

Looks like a lot of dynamic sewing in is happening which I can’t seem to understand.

Is there a plugin that was installed? If yes, where can I find how plugins work?
Docs talk about pipes and modules, but not plugins.

Any help here?

The tree of the plugin directory is as following:

thedocs
    ├── js
    │   ├── loaders
    │   │   ├── core.js
    │   │   └── partials.js
    │   ├── page.js
    │   ├── partials
    │   │   ├── bind.js
    │   │   ├── config.js
    │   │   ├── drawer.js
    │   │   ├── file-tree.js
    │   │   ├── font.js
    │   │   ├── form.js
    │   │   ├── mailer.js
    │   │   ├── main.js
    │   │   ├── map.js
    │   │   ├── modal.js
    │   │   ├── navbar.js
    │   │   ├── offcanvas.js
    │   │   ├── popup.js
    │   │   ├── recaptcha.js
    │   │   ├── scroll.js
    │   │   ├── section.js
    │   │   ├── sidebar.js
    │   │   ├── util.js
    │   │   └── video.js
    │   └── vendors
    │       ├── bootstrap.js
    │       └── jquery.js
    └── scss
        ├── _functions.scss
        ├── _mixins.scss
        ├── _theme.scss
        ├── _variables.scss
        ├── content
        │   ├── _card.scss
        │   ├── _code.scss
        │   ├── _icon.scss
        │   ├── _image.scss
        │   ├── _media.scss
        │   ├── _table.scss
        │   ├── _typography.scss
        │   └── _video.scss
        ├── form
        │   ├── _control.scss
        │   ├── _input-border.scss
        │   ├── _input-glass.scss
        │   ├── _input-group.scss
        │   ├── _input-line.scss
        │   ├── _input-round.scss
        │   ├── _input-transparent.scss
        │   ├── _input.scss
        │   └── _switch.scss
        ├── layout
        │   ├── _drawer.scss
        │   ├── _footer.scss
        │   ├── _grid.scss
        │   ├── _header.scss
        │   ├── _navbar.scss
        │   ├── _offcanvas.scss
        │   ├── _popup.scss
        │   ├── _scafolding.scss
        │   ├── _section.scss
        │   ├── _sidebar.scss
        │   ├── _sticky.scss
        │   └── _topbar.scss
        ├── loaders
        │   ├── core.scss
        │   └── partials.scss
        ├── mixins
        │   ├── _bootstrap_overrides.scss
        │   ├── _button.scss
        │   ├── _form.scss
        │   ├── _grid.scss
        │   └── _navbar.scss
        ├── page.scss
        ├── uikit
        │   ├── _accordion.scss
        │   ├── _alert.scss
        │   ├── _badge.scss
        │   ├── _breadcrumb.scss
        │   ├── _button.scss
        │   ├── _dropdown.scss
        │   ├── _files.scss
        │   ├── _gallery.scss
        │   ├── _modal.scss
        │   ├── _nav.scss
        │   ├── _overlay.scss
        │   ├── _pagination.scss
        │   ├── _palette.scss
        │   ├── _popover.scss
        │   ├── _progress.scss
        │   ├── _rating.scss
        │   ├── _scroll.scss
        │   ├── _social.scss
        │   ├── _spinner.scss
        │   ├── _step.scss
        │   ├── _tab.scss
        │   ├── _toc.scss
        │   └── _tooltip.scss
        ├── utility
        │   ├── _bg-img.scss
        │   ├── _border.scss
        │   ├── _color.scss
        │   ├── _inverse.scss
        │   ├── _misc.scss
        │   ├── _no.scss
        │   ├── _sizing.scss
        │   ├── _spacing.scss
        │   └── _typography.scss
        └── vendor
            ├── _bootstrap.scss
            ├── _fontawesome.scss
            ├── _perfect-scrollbar.scss
            ├── _prismjs.scss
            └── _themify-icons.scss
2

Hugo can process SCSS files which live in <site root>/assets or </site root>/theme/<name>/assets.

From what I understand of your post, I don’t think the theme uses Hugo to compile SCSS to CSS - it probably distributes the site with the CSS files, and is just including things in static/assets/plugin for completeness. (Files and directories under static are simply copied verbatim into the /public folder by Hugo.)

So what you probably want to do is override the compiled CSS files. (Have a read of the documentation about lookup order to understand how this works.)

So for example, put a copy of <site root>/themes/<themename>/static/assets/css/page.css in <site root>/static/assets/css/page.css and then edit your version of page.css to your liking.

1 Like
3

I found I had to put the whole assets in the not in /static/ to be able to override them.