.. index:: Sphinx Thema
.. Links die in het hele document gebruikt worden.
.. |thema| raw:: html
thema's
.. |kleuren| raw:: html
kleuren
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| 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.
.. index:: Sphinx Thema; Thema aanpassen
Thema aanpassen
^^^^^^^^^^^^^^^
| Open de webpagina met de |thema|
| 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.
.. index:: Sphinx Thema; Kleuren Thema aanpassen
Kleuren aanpassen
^^^^^^^^^^^^^^^^^
| Mocht je in het gekozen thema de kleuren aan willen passen kijk dan op deze |thema|
| 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.
.. index:: Sphinx Thema; Kleur kopregel tabellen aanpassen
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
.. index:: Sphinx Thema; Logo toevoegen
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
.. index:: Sphinx Thema; Logo Verplaatsen
Logo Verplaatsen
^^^^^^^^^^^^^^^^
| Open Notepad++
| Open E:\Website\Paula\_static\theme_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.
.. index:: Sphinx Thema; Sidebar stil zetten
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
.. index:: Sphinx Thema; Sidebar uitbreiden
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
.. index:: Sphinx Thema; Taal aanpassen
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
.. index:: Sphinx Thema; Thema overrides.css
.. _theme_overrides.css:
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.
.. index:: Sphinx Thema; Tekst Kopregel aanpassen
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