Overwriting CSS for PDF

[kathatherine]

Hi, I can't tell from the documentation if this is possible, but is there a way with this extension to overwrite any of the CSS being created by the .scss files?

Based on https://sphinx-simplepdf.readthedocs.io/en/latest/configuration.html, it appears that you can only change the variables outlined in https://github.com/useblocks/sphinx-simplepdf/blob/main/sphinx_simplepdf/themes/simplepdf_theme/static/styles/sources/_variables.scss.

Is this the case? If you can do more CSS changes than that, I'd love to know how and I'd be happy to help update the documentation to add that information.

If not, it would be great if that feature could be added. Thanks for the extension!

[sachin-suresh-rapyuta]

[EDITED] @kathatherine I am not sure if this is what you are looking for. But let me know if this works.

1. Ensure you first install Sass if you haven't already using npm install -g sass

2. Create Custom SCSS Files, like:

   docs/_static/styles/sources/custom_variables.scss

   // Override variables
   $primary-color: #ff5733;
   $secondary-color: #33c1ff;

3. Compile your custom SCSS files to CSS using sass docs/_static/styles/sources/custom_variables.scss docs/_static/css/custom_variables.css

4. In conf.py, include the compiled CSS files instead of SCSS.

   def setup(app):
       app.add_css_file('css/custom.css')    
   
       # Include custom CSS files for overriding variables
       # Corrected this line for setup() to use custom_variables.css instead of custom_variables.scss
       app.add_css_file('styles/sources/custom_variables.css')

5. Make sure that the static path is correctly set in your conf.py: html_static_path = ['_static']

[kathatherine]

Thank you so much for attempting to help me out! I'm having permissions errors installing sass at the moment, so it's difficult to test out these instructions to their fullest extent. I'll keep working on that.

Before I clicked to open GitHub and saw that you had updated your instructions, I was simply trying to add CSS files via the def setup(app): function. If I put them in the correct folder configuration (styles/sources/file.css), they would show up in the build folder whether I added them via def setup(app): or not.

My question is, whether I compile the SCSS to CSS or not, how is the main.css file able to import my custom additions before the build process begins? It doesn't have an import rule for a custom file. Or is the app.add_css_file the magic ingredient here?

Also, to be clear, I'm attempting to overwrite a rule in _tables.scss to increase the font size of the tiny table class and to overwrite a rule in main.scss to stop an extra page from appearing when my PDF is built, as I've removed the title page.

I believe these CSS additions are:

table.docutils.ssp-tiny td, table.docutils.ssp-tiny th {
  font-size: 0.8em; 
  }

and

h1 {
    page-break-before: avoid;
    }

I'll keep working on this and get back to you. Again, thank you so much!

[kathatherine]

Okay, coming back to this to let you know that your suggestions worked great once I figured out my npm issues! I had to use sudo to get the job done with npm install -g sass.

For anyone else with this problem, you can also overwrite the scss itself, not just the variables. I took the scss available in https://github.com/useblocks/sphinx-simplepdf/tree/main/sphinx_simplepdf/themes/simplepdf_theme/static/styles/sources and edited it to suit my needs in my custom scss file.

Also, as an edit to step four in @sachin-suresh-rapyuta's fantastic help above, make sure you're using .css instead of .scss when you adding your css file via the setup(app) function.

Furthermore, I finally realized why my doc had an extra blank page before the first h2 header. It's being caused by the nosidebar option (https://github.com/useblocks/sphinx-simplepdf/blob/main/sphinx_simplepdf/themes/simplepdf_theme/theme.conf), which is set to false by default. I set it to true in my simplepdf_theme_options dict in my conf.py and boom, no more extraneous blank page.

I hope to come back and add some docs for the css overwrite, so I'll leave this issue open, but here's the confirmation that this works for anyone else wondering and scouring the issues looking for answers.

[sachin-suresh-rapyuta]

Thanks for the corrections @kathatherine. I updated the steps. I am glad my small solution worked. If the documentation included some examples of these use cases (like the issue you had for extra pages), it would be great. I also couldn't find the different simplepdf_theme_options configuration options/what to use when etc.