How to Access
- Navigate to the Hudu admin area.
- Select the Design tab.
- Identify the Custom CSS and the code box below.
- Copy and paste (or write in) the script you'd like to apply.
- Select Update at the bottom to apply the script.
When choosing colors to style your Hudu with, we typically recommend using a service like: https://coolors.co/. This gives you a neat way to match palettes and create an aesthetically-pleasing color scheme.
Changing Header Color
Dark theme
.header { background: #000; }
Light theme
.header { background: white; } a.header__a { color: #5b17f2; } a.header__a:hover { background: #5b17f2; } .header__a {color: black; }.header__a i {color: #000;}Changing Background Color
body { background: #EEE; }Changing Buttons
To change the color of primary buttons and accent colors, navigate to Admin > Design > Branding and select the color of your choice for both Light and Dark Modes.
To change the secondary button colors, you can use the following custom CSS in Admin > Design.
.button--secondary {
background: red !important;
border: 1px solid red !important;
color: white;
}Resize Scripts
The numbers before px are placeholders shown as '000'. Replace these with the size you'd like.
Which selector you target depends on where the content appears. Main app pages use the navigation header (.header, .header__logo). Shared and public article pages hide that header and use a separate fixed top bar (.shared__logo) instead, so CSS that targets .header won't change shared pages — target .shared__logo for those.
Shared Articles Image
/*
Shared article pages hide the main app header (.header)
and use this fixed top logo bar instead.
*/
.shared__logo {
background: #HEX CODE HERE; /* Top bar background color */
height: 000px; /* Bar height — Hudu's default is 56px */
}
.shared__logo img {
height: 000px !important; /* Logo image height — default is 42px.
!important overrides the inline height on the <img>. */
}
.shared-article {
padding-top: 000px; /* Adds space below the bar if a taller
bar overlaps the article title. */
}
Optional — resize the default (Hudu) logo in the shared top bar:
.shared__logo .hudu,
.shared__logo svg {
width: 000px !important;
height: auto !important;
}
Have a theme you want to share? Let us know!
Top Navigation Theme Color Change (Version 2.41)
In version 2.41, we removed the use of theme color as the background fill for the top navigation bar.
Why was this change made?
Using a theme color in the top navigation has historically caused visibility and accessibility issues, especially with logos.
To ensure better accessibility, consistent visibility, and improved design quality across all instances, the top navigation now uses a neutral background by default.
Can I restore the theme color in the top navigation?
Yes. If you prefer the previous look, you can re-apply a custom color to the top navigation using custom CSS.
Set a custom background color for the top navigation (all themes/modes):
.header { background: #HEX CODE HERE; }
.dark-portal .header { background: #HEX CODE HERE; }Set a custom font color for top navigation menu items (all themes/modes):
.header a:not(.button).header__a.active,
.header a:not(.button).header__a {
color: COLOR HERE;
}
.dark-portal a:not(.button).header__a.active,
.dark-portal a:not(.button).header__a {
color: COLOR HERE;
}Customize hover and active states (light mode only):
body:not(.dark-portal) a:not(.button).header__a.active {
color: white;
background: #00000033;
}
body:not(.dark-portal) a:not(.button).header__a:hover {
color: white;
background: #00000033;
}