stylesheet order prevents custom css overrides

[markuszoeller]

The stylesheets of sphinx_tabs get appended at the very last, which makes overriding CSS styles in a custom.css impossible (or I simply don't know how).

My conf.py which includes sphinx_tabs:

extensions = [
    'sphinx_tabs.tabs',
    'sphinx.ext.extlinks',
    'sphinx.ext.graphviz',
    'sphinx.ext.intersphinx',
    'sphinx.ext.todo',
    'alabaster',
    'ablog',
    'sphinxcontrib.blockdiag'
]

# [...]

# add custom css here
def setup(app):
    app.add_stylesheet('css/custom.css')  # may also be an URL

I try to override a sphinx_tabs style in my _static/css/custom.css:

.sphinx-tabs .sphinx-menu a.item {
    color: yellow !important;
}

This doesn't override the default color, as the custom.css needs to be the last file for that in my index.html:

    <link rel="stylesheet" href="../../../../_static/alabaster.css" type="text/css" />
    <link rel="stylesheet" href="../../../../_static/pygments.css" type="text/css" />
    <link rel="stylesheet" href="../../../../_static/css/custom.css" type="text/css" />
    <link rel="stylesheet" href="../../../../_static/sphinx_tabs/tabs.css" type="text/css" />
    <link rel="stylesheet" href="../../../../_static/sphinx_tabs/semantic-ui-2.2.10/segment.min.css" type="text/css" />
    <link rel="stylesheet" href="../../../../_static/sphinx_tabs/semantic-ui-2.2.10/menu.min.css" type="text/css" />
    <link rel="stylesheet" href="../../../../_static/sphinx_tabs/semantic-ui-2.2.10/tab.min.css" type="text/css" />

There's a good chance that I do something wrong, any help would be appreciated.

[djungelorm]

sphinx-tabs was adding its stylesheets (and JS) at the end of the list of files when the context gets created. I've changed it to prepend them instead so they come before any custom ones. Should fix your issue.

I'm pushing a new version to pypi now.

[markuszoeller]

The javascript magic to switch the tabs doesn't work anymore with version 1.1.3

It rendered the tabs correctly:

It also added the CSS files at the correct place, but I assume that the Javascript files need a specific order (I'm not sure though):

    <link rel="stylesheet" href="../../../../_static/alabaster.css" type="text/css" />
    <link rel="stylesheet" href="../../../../_static/pygments.css" type="text/css" />
    <link rel="stylesheet" href="../../../../_static/sphinx_tabs/tabs.css" type="text/css" />
    <link rel="stylesheet" href="../../../../_static/sphinx_tabs/semantic-ui-2.2.10/segment.min.css" type="text/css" />
    <link rel="stylesheet" href="../../../../_static/sphinx_tabs/semantic-ui-2.2.10/menu.min.css" type="text/css" />
    <link rel="stylesheet" href="../../../../_static/sphinx_tabs/semantic-ui-2.2.10/tab.min.css" type="text/css" />
    <link rel="stylesheet" href="../../../../_static/css/custom.css" type="text/css" />
    
    <script type="text/javascript">
      var DOCUMENTATION_OPTIONS = {
        URL_ROOT:    '../../../../',
        VERSION:     '',
        COLLAPSE_INDEX: false,
        FILE_SUFFIX: '',
        HAS_SOURCE:  true,
        SOURCELINK_SUFFIX: '.txt'
      };
    </script>
    <script type="text/javascript" src="../../../../_static/sphinx_tabs/tabs.js"></script>
    <script type="text/javascript" src="../../../../_static/sphinx_tabs/semantic-ui-2.2.10/tab.min.js"></script>
    <script type="text/javascript" src="../../../../_static/jquery.js"></script>
    <script type="text/javascript" src="../../../../_static/underscore.js"></script>
    <script type="text/javascript" src="../../../../_static/doctools.js"></script>

I've never written a sphinx extension before, so I'm a little clueless and cannot suggest anything.

[markuszoeller]

I may have a wrong expectation about how the overriding of CSS should work. This post here let's me assume that I should use my own custom templates to override CSS and JS: https://stackoverflow.com/questions/32079200/how-do-i-set-up-custom-styles-for-restructuredtext-sphinx-readthedocs-etc#32079202
Maybe a revert of commit be51f06 makes sense, until I have figured sphinx's way of overriding CSS/JS.

[djungelorm]

Ooops... the sphinx-tabs js files need to be included after jquery, so prepending them breaks it. Annoyingly my test script has a bug so I didn't catch this before releasing the update...

I'm not sure what the best practice is for overriding css in Sphinx, but I think including custom.css after sphinx-tabs css is sensible behaviour.

I've made the js including smarter so that it includes the tabs js after jquery so that it's not broken!

Released as 1.1.4. Let me know if that works for you!

[markuszoeller]

Version 1.1.4 works perfectly for me! It allows me to have a custom.css at the very end without losing the javascript capabilities of sphinx_tabs.
Thanks mate, great work!

[djungelorm]

Cool :)