executablebooks / sphinx-book-theme

A clean book theme for scientific explanations and documentation with Sphinx
https://sphinx-book-theme.readthedocs.io
BSD 3-Clause "New" or "Revised" License
438 stars 201 forks source link

Add icon links to header #833

Open RemDelaporteMathurin opened 6 months ago

RemDelaporteMathurin commented 6 months ago

Hi all,

Thanks for this very good theme!

I would like to add a link to our discourse page next to the repository, download, full screen and dark mode buttons.

Unfortunately, I've only been able to add it to the sidebar following the documentation.

Is there anyway to move this icon link there?

Thanks!

image

My conf.py html_theme_options

html_theme_options = {
    "repository_url": "https://github.com/festim-dev/FESTIM",
    "use_repository_button": True,
    "use_edit_page_button": True,
    "repository_branch": "main",
    "path_to_docs": "./docs/source",
    "icon_links": [
        {
            "name": "Community Forum",
            "url": "https://festim.discourse.group/",
            "icon": "fa-brands fa-discourse",
        },
    ],
}
danilopeixoto commented 4 months ago

+1

danilopeixoto commented 4 months ago

@RemDelaporteMathurin We can do this ourselves by adding to the theme configuration the following:

html_theme = "sphinx_book_theme"
html_theme_options = {
    'icon_links': [
        {
            'name': 'PyPI',
            'url': 'https://pypi.org/project/jupyterhub-ai-gateway',
            'icon': 'fab fa-python',
        },
    ],
    "article_header_end": [
        "navbar-icon-links",
        "article-header-buttons",
    ],
}

html_sidebars = {
    "**": [
        "navbar-logo",
        "search-button-field",
        "sbt-sidebar-nav",
    ],
}
RemDelaporteMathurin commented 4 months ago

This works! Thank you very much @danilopeixoto !! 🚀

dylanh724 commented 3 months ago

Thanks @danilopeixoto ! It did align there and set the initial color, but hovering will be very different than the gitlab icon:

image

image

I'm having trouble finding the CSS for it; any tips?