Customising Visuals
DeveloperHub supports the following customisations: UI , CSS, Footer, theme (dark mode), code theme, logos, header colour, link colour, font and navigation links.
Custom CSS and Footer
Check Custom CSS, and Custom Footer pages.
Changing Logo
To change the logo:
- Hover over the top navigation and click on Edit Navigation
in the top left corner. - Click "Change" next to Logo.
- Choose the new logo.
You can also change the URL which is navigated to when the logo is clicked on.
It is best to have a wide logo with transparent background
To change the website icon (favicon):
- Hover over the top navigation and click on Edit Navigation
in the top left corner. - Click "Change" next to Favicon.
- Choose the new favicon.
We automatically rescale your favicon if it was too big. Note that the favicon only shows on live mode, and not in the editing mode
Logo and favicon will be automatically saved on change without prompt
Changing UI
DeveloperHub provides two UIs, DeveloperHub Original and DeveloperHub Next.
Original UI
Original UI is the first UI of DeveloperHub, notable for its hovering search bar. The different sections and version are hidden behind dropdown, and the index has coloured categories.
Next UI
Next UI is the new UI. Next UI features a sleek design where different sections are visible in the top navigation, and a redesigned index with clearer margins and animation. It also providers a better search experience.
To change the UI:
- Click on Project settings
in the sidebar. - Under Customisation, choose which UI to use.
- Click Save.
In Next UI, the different sections are laid out in the top navigation bar. In mobile layout, they would collapse into a section picker dropdown.
Changing Colours
The header, link and navigation colours are modifiable. To change the colours:
- Click on Project settings
in the sidebar. - Under Customisation, choose which colour to change.
- Pick the desired colour (We will warn you if the colour is not contrasting enough)
- Click Save.
Make sure to set the link colour distinct from the font colour. This is usually your secondary brand colour. The text in your pages is almost black in light theme (white in dark theme), so you need a colourful link for it to be distinguished.
Changing Font
To change the font of the entire project:
- Click on Project settings
in the sidebar. - Under Customisation, edit the font.
- Choose from the list of Google Fonts available. The font will be previewed immediately in the current documentation.
Font will be automatically saved on change without prompt
Changing font is only a paid plan feature
Not using Google Fonts?
If you are not using Google Fonts, you can serve your own font to your documentation portal as described in our own blog post: Using your own Custom Font
Font Weights Missing?
If the font you are using does not have all the font weights we expect, then you can change the actual font weight for an expected one. See Font Weights.
Adding Links / Home Button
The logo, and four top navigation links can be setup for external linking to another website, or internal linking inside the documentation. To setup the navigations links:
- Hover over the top navigation and click on Edit Navigation
in the top left corner. - Type in the title.
- Type in the link.
- Click outside the window to close the top navigation editor and save.
You can change if links open in a new tab or the same tab by checking Open Links in New Tab.
The last two links only show in documentations that have wide layout.
Setting the link to / goes to the landing page, or the default page if no landing page is setup.
Navigation links will be automatically saved on change without prompt
Sticky Top Navigation Bar
To set the top navigation bar to stick to the top when page is scrolled:
- Click on Project settings
in the sidebar. - Under Customisation, check "Is Top Navigation Bar Sticky?"
- The setting will be saved immediately.
Inline Code Colour
Check --inline-code in CSS Variables.
Need More Customisation?
Check also our popular customisations.
Let us know what you need, we'd love to help!