4

I'm writing a new documentation for my project in reST. The documentation is rendered with Sphinx on ReadTheDocs. I already downloaded the ReadTheDocs theme as a git submodule into my repositories docs/source/_themes folder, so I can modify some of the templates or CSS settings.

I would like to change the text justification for big paragraphs from ragged right to fully justified.
Where can I change his in the hundreds of lines of CSS code?

Document structure:

...
<div class="section" id="basic-2-flip-flop-synchronizer">
  <h2>Basic 2 Flip-Flop Synchronizer</h2>
  <p>The 2 flip-flop ....

  </p>
</div>

CSS code to include or replace with:

text-align:justify;

I used CSS 10 years ago, but I'm not really up-to-date on the new CSS selectors ...

Paebbels
  • 15,573
  • 13
  • 70
  • 139

2 Answers2

2

You can directly modify the css file inside docs/source/_themes by adding the following block

.section #basic-2-flip-flop-synchronizer{
     text-align:justify;
}

I would suggest to put this code block at the very end of css file because it will override the css property if .section #basic-2-flip-flop-synchronizer happen to appear somewhere inside css file.

Like @Ricardo Ruiz Melendez suggested below, the best practice to change a css file is to use your customized css file. You can find a step-by-step guide here and some on official website

Community
  • 1
  • 1
xxks-kkk
  • 2,336
  • 3
  • 28
  • 48
  • I recommend adding this line of code in your custom css if you have one, which should be linked after your theme css. It's better to override the theme's classes this way just in case you need to update the template to a newer version in the future, without the need of identifying which classes you changed inside that file. – Ricky Ruiz May 18 '16 at 13:24
1

It looks like the document structure has seen an update between 2016 and 2023, and sphinx now uses <section> tags rather than <div class="section">. If you want to align all sections, just lose the dot in _static/css/custom.css:

section {
    text-align: justify;
}

And to register this custom css (according to docs.readthedocs.io):

## conf.py

# These folders are copied to the documentation's HTML output
html_static_path = ['_static']

# These paths are either relative to html_static_path
# or fully qualified paths (eg. https://...)
html_css_files = [
    'css/custom.css',
]
Felix
  • 331
  • 2
  • 8
  • The biggest problem of RTD theme is its incompatibility with docutils since months (or even years). RTD theme works only with old Sphinx 5.3, no Sphinx 6.x and no Sphinx 7.x ... – Paebbels May 01 '23 at 14:25