Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use multi-stylesheet feature (available since Sphinx 5.1) #93

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

Use multi-stylesheet feature (available since Sphinx 5.1) #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 2 additions & 30 deletions doc/customization.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ with a content similar to this:

[theme]
inherit = insipid
stylesheet = ???.css
stylesheet = base.css, insipid.css, ???.css
sidebars = ???.html, ???.html, ???.html
pygments_style = ???

Expand All @@ -187,36 +187,8 @@ if you insist on not deriving from any theme).
You should also create a sub-directory named :file:`static`
containing your main CSS file (and probably additional CSS files)
and any custom JavaScript files you want to use.
Write the name of your main CSS file to the ``stylesheet`` field in your
Add the name of your main CSS file to the ``stylesheet`` field in your
:file:`theme.conf`.
Remove the ``stylesheet`` field if you don't want to use your own CSS file.

By default, the CSS file :file:`insipid.css` will *not* be included,
but :file:`basic.css` and :file:`insipid-sidebar-readthedocs.css`
will be included.

To include :file:`insipid.css`, add this to your :file:`layout.html` template:

.. code-block:: html+jinja

{% extends "insipid/layout.html" %}

{% block css %}
<link rel="stylesheet" href="{{ pathto('_static/insipid.css', 1) }}" type="text/css" />
{{ super() }}
{% endblock %}

Similarly, you can add further custom CSS files, if you want.

.. note::

You *could* alternatively use this in your CSS file:

.. code-block:: css

@import 'insipid.css';

But this will increase the load time of the HTML pages!

If you want to use custom JavaScript files,
store them in the :file:`static` sub-directory of your theme directory
Expand Down
1 change: 0 additions & 1 deletion src/insipid_sphinx_theme/insipid/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@


{% block css %}
<link rel="stylesheet" href="{{ pathto('_static/basic.css', 1) }}" type="text/css" />
{{- super() }}
{%- if READTHEDOCS|tobool and render_sidebar %}
<link rel="preload" href="{{ pathto('_static/insipid-sidebar-readthedocs.css', 1) }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
Expand Down
2 changes: 1 addition & 1 deletion src/insipid_sphinx_theme/insipid/theme.conf
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
[theme]
inherit = basic
stylesheet = insipid.css
stylesheet = basic.css, insipid.css
sidebars = globaltoc.html, separator.html, indices.html
pygments_style = friendly

Expand Down