Theming
The GDI User Portal offers extensive customization options through configuration files and public assets. This guide will help you understand how to customize various aspects of the portal.
The following configuration options can be set in the properties.json
file:
Variable Name | Explanation | Example Value |
---|---|---|
NEXT_PUBLIC_SITE_TITLE | Main title of the website | “GDI - User Portal” |
NEXT_PUBLIC_SITE_DESCRIPTION | Brief description of the site | “Genomic Data Infrastructure User Portal” |
NEXT_PUBLIC_HOMEPAGE_TITLE | Main heading on the homepage | “WELCOME TO GDI” |
NEXT_PUBLIC_HOMEPAGE_SUBTITLE | Subheading text on the homepage | “The Genomic Data Infrastructure (GDI) project…” |
NEXT_PUBLIC_HOMEPAGE_ABOUT_CONTENT | Detailed content for the about section | “The Genomic Data Infrastructure (GDI) homepage…” |
NEXT_PUBLIC_BANNER_LINK | Navigation link for the banner | “/howto” |
NEXT_PUBLIC_FOOTER_TEXT | Text displayed in the footer | “GDI project receives funding from the European Union…” |
NEXT_PUBLIC_LINKEDIN_URL | LinkedIn social media link | “https://www.linkedin.com/company/gdi-euproject/" |
NEXT_PUBLIC_TWITTER_URL | Twitter/X social media link | “https://twitter.com/GDI_EUproject" |
NEXT_PUBLIC_GITHUB_URL | GitHub repository link | “https://github.com/GenomicDataInfrastructure" |
NEXT_PUBLIC_WEBSITE_URL | Main project website link | “https://gdi.onemilliongenomes.eu/" |
NEXT_PUBLIC_EMAIL | Contact email address | “gdi-coordination@elixir-europe.org” |
NEXT_PUBLIC_SHOW_BASKET_AND_LOGIN | Feature flag for basket and login functionality | “true” |
The portal’s appearance can be customized through various files in the /public
directory:
properties.json
: Contains main site configuration including:- Site title and description
- Homepage content and titles
- Social media links
- Contact information
- Footer text
- Feature flags
palette.css
: Defines the color scheme including:- Primary and secondary colors
- Info and warning colors
- Hover states
- Surface colors
- Dark mode support
Logos:
header-logo.svg
: Main logo displayed in the headerfooter-logo.png
: Logo displayed in the footerfavicon.ico
: Browser tab icon
Images:
homepage-about-background.png
: Background image for the about section
fonts.css
: Custom font definitions and typography settingsfonts/
directory: Contains custom font files
about.md
: About page contenthowto.md
: How-to guide contentlegal.md
: Legal information and terms
Colors:
- Use the
palette.css
file to maintain consistent branding - Consider both light and dark mode color schemes
- Ensure sufficient contrast for accessibility
- Use the
Typography:
- Add custom fonts to the
fonts/
directory - Define font faces in
fonts.css
- Maintain consistent font usage throughout the application
- Add custom fonts to the
Content:
- Keep content in markdown files for easy maintenance
- Update
properties.json
for site-wide text changes - Maintain proper licensing information in
.license
files
Images:
- Use SVG format for logos when possible
- Optimize image sizes for web performance
- Include appropriate alt text in implementation
Environment Variables:
- Use different values for development, staging, and production
- Keep sensitive values secure
- Document any new variables added to the system