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.
Changing the favicon
The favicon is the small icon displayed in the browser tab, bookmarks, and shortcuts. By default, an APEx project web portal uses the ESA favicon. This can be replaced with a custom project favicon when available.
To add a custom favicon:
- Navigate to Appearance > Settings > Horizon via the navigation bar.
- On the settings page, scroll down to the Favicon section.
- Uncheck Use the favicon supplied by the theme if you want to upload your own image.
- Click Upload favicon image to upload a square-shaped custom favicon file in one of the following formats:
(recommended size: 32×32 pixels)- .ico (preferred for compatibility)
- .png
- .svg
- Don’t forget to click Save configuration to apply the changes.
Additionally, on the same page, under the Page element display section, make sure to activate the Shortcut icon option.
To verify your changes, refresh the web portal in a private/incognito window to avoid cached content interfering with the update.
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.
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
