Sphinx Thema aanpassen

Hieronder een aantal dingen om het thema van Sphinx aan te passen.

Je kunt het uiterlijk van de webpagina aanpassen door het conf.py bestand aan te passen.

Sphinx heeft een aantal ingebouwde thema's die je makkelijk kunt gebruiken.

Ik ga er van uit dat het het standaard thema Classic gebruikt.

De meeste aanpassingen worden gedaan in het conf.py bestand, dit vindt je in de map waar je je webpagina gemaakt hebt.

Een aantal aanpassingen doe je in het theme_overrides.css bestand, die moet je dan maken.

Thema aanpassen

Open de webpagina met de thema's

Kijk welk thema je wilt gaan gebruiken.

Open Notepad++

Open het conf.py bestand.

Zoek de regel waar onderstaande code staat:

html_theme = 'classic'

Verander het het woord classic naar het thema dat je wilt hebben.

Sla de veranderingen op..

Typ in commandline: make html.

Ververs browserpagina.

Kleuren aanpassen

Mocht je in het gekozen thema de kleuren aan willen passen kijk dan op deze thema's

Halverwege deze pagina kun je een aantal opties vinden die je aan kunt passen.

Een lijst van CSS kleuren vind je op deze kleuren pagina.

Zoek de regel waar onderstaande code staat:

# html_theme_options = {}

hieronder kun je je aanpassingen neerzetten.

Bijvoorbeeld aanpassen van de achtergrondkleur van de sidebar:

# html_theme_options = {}
       "sidebarbgcolor": '#5070ad',

Laat je aanpassingen altijd inspringen voor de leesbaarheid van je document.

Kleur kopregel tabellen aanpassen

Als je met tabellen werkt is het fijn als de kleur van de kopregel van de tabellen een beetje past bij je thema.

Een lijst van CSS kleuren vind je op deze kleuren pagina.

Ik heb als voorbeeld even de kleur veranderd van blauw naar oranje.

Open Notepad++

Open het theme_overrides.css bestand.

Zet onderstaande tekst onderaan de pagina:

/* verander de kleur van de kopregel van blauw naar oranje */
th {
  background-color: #ffbf9c;
}

Sla de veranderingen op.

Gooi alle bestanden uit de _build directory weg.

Typ in commandline: make html

Ververs browserpagina

Logo toevoegen

Het is natuurlijk het mooist als er ook een, eigen, logo bovenaan de pagina staat.

Als je hierop klikt ga je direct naar de Homepage.

Zet de image in de hoofdmap van je pagina.

Open Notepad++

Open het conf.py bestand.

Voeg in het stuk Options for HTML output de volgende regel toe:

html_logo = 'Image.png'

Waar Image.png staat voor de naam van jou plaatje.

Sla de veranderingen op.

Typ in commandline: make html

Ververs browserpagina

Logo Verplaatsen

Open Notepad++

Open E:WebsitePaula_statictheme_overrides.css

Zet onderin de volgende code:

/* Zet de sidebar 20% naar rechts*/
div.sphinxsidebar img {
       padding-left:20%;
}

Sla de veranderingen op.

Gooi alle bestanden uit de _build directory weg.

Typ in commandline: make html.

Ververs browserpagina.

Kijk even of 20% de goede afstand is, en verander die eventueel.

Sidebar stil zetten

Standaard blijft de sidebar staan als je op een pagina naar beneden scrolt.

Ik vind dit niet handig, en met de aanpassing hieronder kun je zorgen dat de sidebar stil blijft staan.

Open Notepad++

Open het conf.py bestand.

Zoek de regel waar onderstaande code staat:

# html_theme_options = {}

Voeg hieronder de volgende regel toe:

'stickysidebar': 'true', # laat de sidebar stil staan

Sla de veranderingen op.

Typ in commandline: make html

Ververs browserpagina

Sidebar uitbreiden

Door deze wijzigingen te maken kun je in de sidebar de inhoud uitbreiden.

Open Notepad++

Open het conf.py bestand.

Zoek de regel waar onderstaande code staat:

# -- Options for HTML output

Voeg hieronder de volgende regels toe:

html_sidebars = {
   '**': [
   'globaltoc.html', # De inhoud van alle pagina's.
   'localtoc.html', # De inhoud van de huidige pagina.
   'sourcelink.html', # De broncode van de pagina.
   'searchbox.html'],# De zoekbox.
}

Je hoeft niet alle regels te gebruiken.

Sla de veranderingen op.

Typ in commandline: make html

Ververs browserpagina

Taal aanpassen

Standaard is de taal ingesteld als Engels, maar misschien wil je liever je pagina in het Nederlands.

Dit kun je al instellen bij maken van een nieuw project, maar het kan ook later.

Hier is even een beschrijving voor als je later de taal van je documenten wilt wijzigen.

Open Notepad++

Open het conf.py bestand.

Zoek de regel waar onderstaande code staat:

language = None

Verander de code in:

language = nl

Sla de veranderingen op.

Typ in commandline: make html

Ververs browserpagina

Als het goed is staat nu de taal in het Nederlands

Thema overrides.css bestand maken

Open Notepad++

Zet onderstaande tekst hierin:

/* Dit is een bestand om een aantal dingen in het template aan te passen

Sla het bestand op als:

E:\Website\Paula\_static\theme_overrides.css

Open Notepad++

Open het conf.py bestand.

Zoek de regel waar onderstaande code staat:

html_static_path = ['_static']

Zet in een van de regels eronder de volgende tekst:

html_context = {
       'css_files': [
               '_static/theme_overrides.css'
               ]
       }

Je kunt het bestand nu gebruiken.

Sla de veranderingen op.

Alle overige wijzigingen zet je onder dit stuk tekst.

Vergeet niet om er ook even de uitleg bij te zetten.

Tekst Kopregel aanpassen

Je kunt ook de kopregel vervangen door iets simpels als Welkom in plaats van naam_project documentation

Open Notepad++

Open het conf.py bestand

Zoek de regel waar onderstaande code staat:

# -- Options for HTML output ----------------------------------------------

Zet in een van de regels eronder de volgende tekst:

html_short_title = 'Welkom'

Sla de veranderingen op.

Typ in commandline: make html

Ververs browserpagina