The European Space Agency
Home
APEx Application Propagation Environments
Main navigation
  • Algorithm Support
  • Project Environments
    QGIS
    CodeServer
    JupyterLab
    Web Portal
    Geospatial Explorer
    Documentation Hub
    User Forum
    Product Catalogue
  • Resources
    • Algorithm Services Catalogue
    • Data Catalogue
    • Geospatial Explorer
  • Community
    • Documentation
    • User Forum
    • FAQ
  • About APEx
    • Mission Statement
    • News
Contact us
Main navigation
  • Algorithm Support
  • Project Environments
  • Resources
  • Community
  • About APEx
APEx - Documentation Portal
  1. Guides
  2. Project Portal - User Documentation
  3. Customizing the look and feel
  • Welcome
  • On-demand EO services
    • Using openEO service
    • APEx-Compliant Platforms
  • Project Environments
    • Use Cases
    • Geospatial Explorer
    • Project Portal
    • User Workspace
    • Interactive Development Environment
    • Product Catalogue
    • Documentation Portal
    • User Forum
  • Algorithm Support
    • On-Demand EO Services
    • Use Cases
    • Algorithm Porting
    • Algorithm Onboarding
    • Algorithm Upscaling
    • Algorithm Enhancement
    • Toolbox Cloudification
    • Algorithm Intercomparison
  • Guides
    • Creating an APEx account
    • Creating APEx single sign-on token
    • Creating openEO based services
    • Creating EOAP based services
    • Upscaling openEO based services
    • Ingesting STAC metadata in APEx Product Catalogue
    • Linking APEx STAC catalogue with an openEO service
    • File format recommendations
    • Project Portal - User Documentation
      • Login to the Project Portal and the Drupal content overview
      • Manage web pages or add a new page
      • Edit web pages via paragraphs
      • Add content and/or visuals
      • Add a Call-To-Action (CTA)
      • Add news items and an overview of the latest or all news
      • Add an event and an overview of the latest or all events
      • Add a web form
      • Add a logo (partners) banner
      • Add publications or downloads (files)
      • Edit the menu navigation
      • Edit the footer
      • Customizing the look and feel
  • Interoperability and Compliance Guidelines
    • Definitions & Actors
    • Algorithm Service Development Options
    • Algorithm Developer and Provider Guidelines
    • Algorithm Hosting Platforms Guidelines
    • Geospatial Explorer
    • Federated Business Model
  1. Guides
  2. Project Portal - User Documentation
  3. Customizing the look and feel

Customizing the look and feel

Changing the look and feel of your web portal is an important step in making your site reflect your project’s identity and branding. The APEx platform provides several ways to tailor the appearance of your website, ranging from simple color adjustments to advanced custom styling. This flexibility allows you to create a unique and professional presence for your project while maintaining usability and accessibility.

Customizing Color Settings

The default APEx template includes built-in options for adjusting the main colors used throughout your site. To access these settings, navigate to website settings in the navigation bar and locate the color settings section. Here, you can modify the primary and secondary colors to better align with your project’s branding guidelines.

Changing these color settings will automatically update elements such as headers, buttons, and links across your website, ensuring a consistent and cohesive appearance. This method is user-friendly and does not require any coding knowledge, making it suitable for most administrators and editors.

Adding Custom CSS

For more advanced customization, Drupal allows you to add custom CSS descriptors to further refine the website’s appearance. By entering your own CSS, you can override the default styles provided by the template and implement unique design elements or layouts.

To add custom CSS, click CSS in the navigation bar and look for the option to include custom styles.

Important

Please note that using custom CSS requires a solid understanding of web design and CSS syntax and requires additional approval from the project administrator and APEx team. Additionally, be aware that extensive customizations may affect compatibility with future template updates, and APEx cannot guarantee that custom styles will remain functional after such changes.

Custom CSS is a powerful tool for those who need maximum flexibility, but it should be used with caution and only when the built-in settings are insufficient for your needs.

Screenshots

Customize - Colors

Customize - Colors

Customize - Result

Customize - Result
Edit the footer
Interoperability and Compliance Guidelines