2.1.6 Theming and Branding
Accessing the Appearance Settings
Follow these steps to open the Appearance configuration panel:
Login to the Hyku using a super admin account.
Scroll down to the Configuration section in the main sidebar.
Select Appearance under Settings.
You will now see multiple tabs that control following theming settings:
Logo, Favicon, Banner Image, Directory Image, Default Images, Colors, Fonts, Custom CSS, Themes
Guidelines/Requirements
Logo
The image uploaded in this field replaces the application name text link in the top left of the application, and takes over that link’s function as a Homepage button.
Requirement | Details |
|---|---|
File Types | JPG, GIF, PNG |
Max Width | 400px |
Height | Should not be taller than the site header |
Recommended Style | Simple, clean, minimal; avoid logos with complex backgrounds |
Alt Text | Required |
Favicon
The image uploaded here replaces the global application favicon (if any) on browser tabs.
Requirement | Details |
|---|---|
File Type | PNG only |
Shape | Square required |
Maximum Size | 228 × 228 px |
Recommended Size | 128 × 128 or 228 × 228 |
Best Practices
Use a simple icon
Ensure high contrast for small sizes.
Keep background solid and flat.
Banner Image
The image uploaded here replaces the default banner image across the top of the Public User Interface homepage.
Requirement | Details |
|---|---|
File Types | JPG, GIF, or PNG |
Minimum Size | 120px height and 1200px width |
Recommended Size | At least 1800px wide for best display quality |
Alt Text | Required (describe the banner image clearly for accessibility ) |
Additional Notes
Cropping: You can crop the banner image after upload, but cropping reduces the visible area and may vary depending on screen size.
Dynamic Resizing: The banner automatically adjusts to the browser window size. Avoid using images with small text or detailed elements that may not scale well.
Restoring Full Image: Cropping cannot be undone. To restore the original image, you must reupload the full, uncropped version.
Directory Image
The image uploaded here appears on the general domain homepage and functions as a link to this repository.
Requirement | Details |
|---|---|
File Types | JPG, GIF, or PNG |
Maximum Width | 400px |
Height Limit | Should not be taller than the site’s header |
Alt Text | Required |
Default Collection Image
The image uploaded here replaces the default Default Collection Image, used for collections that do not have a unique Collection Image set.
Requirement | Details |
|---|---|
File Types | JPG, GIF, PNG |
Dimensions | 100 × 100 pixels (equal height & width required) |
Usage | Shown whenever a collection has no custom cover image |
Alt Text | Not required |
Default Work Image
The image uploaded here replaces the default Default Work Image, used for works that do not have a thumbnail from a supported file type.
Requirement | Details |
|---|---|
File Types | JPG, GIF, PNG |
Dimensions | 100 × 100 pixels |
Usage | Shown whenever a work/item has no image |
Alt Text | Not required |
Colors
The Colors section allows you to customize the visual appearance of your repository by adjusting the color palette used across the header, footer, navigation bar, buttons, banner text, links, and facet panel.
You can change colors for elements such as:
Homepage tabs
Collection banner text
Primary and secondary buttons
Links and link hovers
Navbar background and text
Header and footer
Facets and filters
Additional Notes
Ensure sufficient contrast for accessibility and readability.
Avoid using overly bright or low-contrast combinations that may affect usability.
This section gives you the flexibility to match your repository’s look and feel to institutional branding or your preferred style while keeping all UI elements readable and consistent.
Fonts
You can select separate fonts for the body text and header text, allowing you to style the overall look of your repository’s typography. The chosen fonts will apply consistently across all pages based on your selections.
Custom CSS
There are no strict rules for adding custom CSS; however, administrators should be aware that custom CSS overrides may stop working or cause layout issues once your Hyku instance is upgraded. Always test custom styles after updates and keep a record of any overrides you apply.
Themes
You can select different visual themes for the home page, search results page, and individual work show pages. Each theme provides its own layout and style, allowing you to customize how content is presented across the repository.
For search results page, Users can select their preferred views that will override the default selection set up in admin settings.