Hudu has a wide variety of customization options that are just a few clicks away. For our more advanced customization, Hudu allows users to enter their own scripting to truly make their Hudu environments their own.
To help skip past the digging, trial, and error, we've set up a few custom scripts that will help users get started.
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.
Guides
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
.button--primary, .form input[type=submit] {
border: 1px red solid !important;
background-color: red !important;
background: red !important;
color: white;
}
Resize Scripts
The numbers before px are designated as '000'. Replace these with the size you would like.
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!