CODEWITHSUNDEEP
pythonhtmlcsspython-sphinxrestructuredtext
DuyguKeskek
DuyguKeskek

Reputation: 343

Sphinx different background images for different pages

I am working on a Sphinx website and I have the index.html as the base layout. It has a background image that I defined on body in my css file. I have the navbar links like about, projects etc. I want to use a background color on these instead of a background image how can I achieve that ? I tried this on the RST file :

.. raw:: html

<embed>
   <style>
      body {
      background-color:white !important;
      }
   </style>
</embed>

but this code does not work. Is there any way to make it happen ?

Upvotes: 1

Views: 769

Answers (1)

Steve Piercy
Steve Piercy

Reputation: 15055

Assuming that you see the background image that you set elsewhere instead of the background color ("it does not work"), you must override that background-image: url('foo.png'); CSS property as well.

.. raw:: html

<embed>
   <style>
      body {
        background-color: white;
        background-image: none !important;
      }
   </style>
</embed>

I think this is an ugly way to go about it, though.

I would prefer to use Jinja2 templates and an external style sheet. In other words, modify your Jinja2 template to insert an id="{{ pagename }}" into the <body> tag. The value of id must be unique across all your pages. Then in my custom style sheet, add appropriate selectors:

body#index {
    background-color: white;
}

body#subpage {
    background-image: url('moosehair.png');
}

Upvotes: 2

Related Questions