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
Shared Articles Image
.shared__logo img {height: 000px !important;} /*This will resize the image*/
.shared__logo { height: 000px;}
.shared-article{padding-top: 000px;} /*This will move the content down*/Home Page Custom Logo
.header__logo img {max-height: 000px !important;} /*Changes the size of custom logo*/
.header {height: 000px;} /*Adjust header height*/
.container.container--medium {padding-top: 000px;} /*Adjust Content in the Design Admin*/
main.cpanel__main {padding-top: 000px;} /*Adjusts content in Company*/
.breadcrumb {padding-top: 000px;} /*Used to shift breadcrumbs on content down*/
.toolbar.toolbar--not-sticky {height: 000px;} /*Used to move the breadcrumb container to match the breadcrumb*/
.nasa__title.for-bg {padding-top: 000px;} /*Content for the Dashboard, main content*/
.nasa.nasa--with-title {padding-top: 100px;} /*Moves the Title content down on Dashboard*/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;
}