.. 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