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 SCSS files for overriding variables
       app.add_css_file('styles/sources/custom_variables.scss')

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!