PHPackages ec-europa/oe\_theme - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. ec-europa/oe\_theme Abandoned → [openeuropa/oe\_theme](/?search=openeuropa%2Foe_theme)Drupal-theme ec-europa/oe\_theme =================== OpenEuropa base theme. 5104.202501081505(1y ago)3744234[10 PRs](https://github.com/openeuropa/oe_theme/pulls)EUPL-1.2PHPPHP >=8.1CI failing Since Apr 23Pushed 1mo ago28 watchersCompare [ Source](https://github.com/openeuropa/oe_theme)[ Packagist](https://packagist.org/packages/ec-europa/oe_theme)[ RSS](/packages/ec-europa-oe-theme/feed)WikiDiscussions 5.x Synced 1mo ago READMEChangelog (10)Dependencies (51)Versions (720)Used By (0) OpenEuropa theme ================ [](#openeuropa-theme) [![Build Status](https://camo.githubusercontent.com/2100c5d030effc42b7c0e8c29a824c862991318752d2e0ae5f8aa7e89ad5e8d9/68747470733a2f2f64726f6e652e66706669732e65752f6170692f6261646765732f6f70656e6575726f70612f6f655f7468656d652f7374617475732e7376673f6272616e63683d6d6173746572)](https://drone.fpfis.eu/openeuropa/oe_theme)[![Packagist](https://camo.githubusercontent.com/d8600f3e82b8d596b102cf1be9c428d814d3a2202a860e248cd5682ed4e859d5/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6f70656e6575726f70612f6f655f7468656d652e737667)](https://packagist.org/packages/openeuropa/oe_theme) Drupal theme based on the [Europa Component Library](https://github.com/ec-europa/europa-component-library) (ECL). **Table of contents:** - [Requirements](#requirements) - [Installation](#installation) - [Enable the theme](#enable-the-theme) - [Upgrade to 5.0.0](#upgrade-to-5.0.0) - [Upgrade to 4.0.0](#upgrade-to-4.0.0) - [Upgrade to 3.0.0](#upgrade-to-3.0.0) - [Upgrade to 2.17.0](#upgrade-to-2.17.0) - [Upgrade to 2.15.0](#upgrade-to-2.15.0) - [Upgrade to 2.10.0](#upgrade-to-2.10.0) - [Upgrade to 2.9.0](#upgrade-to-2.9.0) - [Upgrade from 1.x to 2.x](#upgrade-from-1x-to-2x) - [Companion sub-modules](#companion-sub-modules) - [Corporate blocks](#corporate-blocks) - [Image styles](#image-styles) - [Development](#development) - [Project setup](#project-setup) - [Using Docker Compose](#using-docker-compose) - [Disable Drupal 8 caching](#disable-drupal-8-caching) - [Working with ECL components](#working-with-ecl-components) - [Contributing](#contributing) - [Versioning](#versioning) Requirements ------------ [](#requirements) This depends on the following software: - [PHP 8.1 or 8.2 or 8.3](http://php.net/) Installation ------------ [](#installation) The recommended way of installing the OpenEuropa theme is via [Composer](https://www.drupal.org/docs/develop/using-composer/using-composer-to-manage-drupal-site-dependencies#managing-contributed). Before proceeding, please note that theme releases are built by a continuous integration system, and include code coming from third-party libraries, such as [ECL](https://github.com/ec-europa/europa-component-library) templates and other assets. Simply Running `composer require openeuropa/oe_theme`will download the raw theme source code, which misses required third-party code. In order to instruct Composer to download the actual built artifact, you need to require and configure the [Composer Artifacts](https://github.com/openeuropa/composer-artifacts) project. To do so run: ``` composer require openeuropa/composer-artifacts ``` Then add the following section, in your project's `composer.json`: ``` "extra": { "artifacts": { "openeuropa/oe_theme": { "dist": { "url": "https://github.com/{pretty-name}/releases/download/{pretty-version}/{project-name}-{pretty-version}.zip", "type": "zip" } } }, } ``` Once you are done, run: ``` composer require openeuropa/oe_theme ``` This will download the fully built artifact, as opposed to the raw theme source code. If you are not using Composer, then simply download a release artifact [here](https://github.com/openeuropa/oe_theme/releases) (i.e. a `oe_theme-[x.y.z].tar.gz` file) and install it as described [here](https://www.drupal.org/docs/8/extending-drupal-8/installing-themes). ### Enable the theme [](#enable-the-theme) In order to enable the theme in your project perform the following steps: 1. Enable the OpenEuropa Theme Helper module `./vendor/bin/drush en oe_theme_helper` 2. Enable the OpenEuropa Theme and set it as default ``` ./vendor/bin/drush theme:enable oe_theme ./vendor/bin/drush config-set system.theme default oe_theme ``` Step 1. is necessary until the following [Drupal core issue](https://www.drupal.org/project/drupal/issues/474684) is resolved. Alternatively you can patch Drupal core with [this patch](https://www.drupal.org/files/issues/474684-151.patch) and enable the theme: the patched core will then enable the required OpenEuropa Theme Helper module. The OpenEuropa theme supports both the **EC** and **EU** component libraries: - Use the "European Commission" component library for European Commission websites hosted under the `ec.europa.eu` domain - Use the "European Union" component library for European Union websites hosted under the `europa.eu` domain The theme uses the "European Commission" component library by default, you can change that by visiting the theme setting page. **Note for developers**: changing the component library will only load different CSS and JS assets, the actual HTML is the same between the two libraries. Each component library can use one of the following ECL brandings: - **Standardized**: standardised websites host thematic content owned by a specific DG/Agency. This is the default solution to host DG-specific content (policy) and is closely aligned with the core site. - **Core**: core websites host general information shared by different websites or departments and serve as hubs for onward navigation to further thematic content and/or specific services. For example, the main European Commission website () uses ECL core branding. To learn more about EC/EU families and ECL branding visit the [ECL website](https://ec.europa.eu/component-library). ### CKEditor 4 Table Plugins (Deprecated) [](#ckeditor-4-table-plugins-deprecated) This theme includes a set of **CKEditor 4 plugins** to enhance table functionality within the classic WYSIWYG editor. These plugins are: - [`TableSimple.php`](./modules/oe_theme_helper/src/Plugin/CKEditorPlugin/TableSimple.php): Adds support for simplified tables. - [`TableSort.php`](./modules/oe_theme_helper/src/Plugin/CKEditorPlugin/TableSort.php): Enables sortable table columns. - [`TableZebraStriping.php`](./modules/oe_theme_helper/src/Plugin/CKEditorPlugin/TableZebraStriping.php): Adds zebra striping to table rows for improved readability. These plugins are built for **CKEditor 4**, which is **not supported in Drupal 11**, if you are using this theme with **Drupal 10**, you can continue to use these plugins without issue. These plugins are considered **deprecated** and will be removed in version 6.x or later of the theme. ### Upgrade to 5.0.0 [](#upgrade-to-500) #### Icons allowed values are now fetched from webtools: [](#icons-allowed-values-are-now-fetched-from-webtools) The icon selection for the following fields now should be done using the webtools service `WebtoolsIconsProvider` in oe\_theme\_helper to retrieve the list of available icons. You can use the `allowed_values_function` config provided by options module to rely on a function instead of a static list. The list of impacted fields are the following: - 'oe\_contact.oe\_social\_media' - 'node.oe\_social\_media\_links' - 'paragraph.field\_oe\_social\_media\_links' - 'paragraph.field\_oe\_icon' - 'paragraph.field\_oe\_flag' The country flag values have changed. This means that country values like "austria" or "belgium" are no longer valid, and you should use the icon name instead, like "at" or "be". We advise to migrate your existing values to the new format, as the old values will not be rendered as of 6.x version of the theme, because the temporary mapping will be removed. The rest of the icons like "arrow-right", "arrow-left", etc... and social media icons like "facebook", etc... are still valid and can be used as before. For more information on the service please refer to the [oe\_theme\_helper README](./modules/oe_theme_helper/README.md#webtools-icons-provider). ### Upgrade to 4.0.0 [](#upgrade-to-400) #### The following patterns have been removed: [](#the-following-patterns-have-been-removed) - `banner_hero` - `banner_page` - `social_media_links_horizontal` - `social_media_links_vertical` #### The following variants of the button pattern have been removed: [](#the-following-variants-of-the-button-pattern-have-been-removed) - `form` - `form_primary` - `splash_page` The `language_switcher` field of the `page_header` pattern has been removed. The `additional_information` field of the `list_item` pattern has been removed. The `text_highlight` and `image_overlay` variants fo the `banner` pattern have been replaced by a single variant `text_overlay`. #### Two ECL components have been replaced: [](#two-ecl-components-have-been-replaced) - Message component (`twig-component-message`) replaced by Notification component (`twig-component-notification`) - Language list component (`twig-component-language-list`) replaced by Splash page (`twig-component-splash-page`) #### Colors [](#colors) In order to accommodate the color changes in ECL 4.0.0 we have added two twig functions to determine the correct color for border and background based on the component library (European Union or European Commission): - `ecl_class_border_color` - `ecl_class_background_color`The grey color used in typography case has been replaced with dark. #### New patterns [](#new-patterns) - Highlighted list pattern (`highlighted_list`) - used for displaying a main highlighted item along with 3 secondary items placed on the right side of the page. All the items are using the `list_item` pattern's structure with `default`. - Tabs pattern (`tabs`) - used mainly for navigation links. We are using this to render the Drupal local tasks. #### Content display changes [](#content-display-changes) All the teaser templates are using the vertical variant for displaying the lists. ### Upgrade to 3.0.0 [](#upgrade-to-300) #### Page header pattern [](#page-header-pattern) ECL v3 adds the following features to the page header component: - The possibility of displaying a thumbnail right next to the page description - The possibility of adding a background image - The possibility of adding an overlay on top of the background image, to compensate for poor text contrast In order to accommodate these changes we have added the following optional fields to the "Page header" pattern: ``` thumbnail: type: "ImageValueObject" label: "Thumbnail" description: "Thumbnail displayed alongside the description." background_image_url: type: "array" label: "Background image URL" description: "Background image URL, only displayed when the theme ECL branding is set to 'Core'." overlay: type: "text" label: "Overlay" description: "Optional overlay on top of background image (can be 'light', 'dark'). Only used on EC sites" ``` We have also removed the following deprecated fields: ``` identity: type: "text" label: "Identity (deprecated)" description: "The site name. Deprecated from ECL 2.30." infos: type: "array" label: "Infos (deprecated)" description: "A list of infos of the current page. Deprecated from ECL 2.30." ``` In addition, the customization that allowed the content language switcher to be rendered inside the page header has been deprecated in favor of the new [ECL composition](https://europa-component-library.netlify.app/playground/ec/?path=/story/compositions-etranslation--default). Instead, the OpenEuropa Content Language Switcher block provided by OpenEuropa Multilingual needs to be used in its place. Sites updating to OpenEuropa Theme V3 are advised to place this block in the page header region if they wish still need the functionality. #### Content item compositions [](#content-item-compositions) We have removed the following compositions from our theme: ``` templates/compositions/ec-component-content-item/content-item-date.html.twig templates/compositions/ec-component-content-item/content-item.html.twig ``` Consider using the [List item](/templates/patterns/list_item/list_item.ui_patterns.yml) pattern and its variants instead. #### Text with Featured media pattern [](#text-with-featured-media-pattern) The pattern [Text with Featured media](/templates/patterns/text_featured_media/text_featured_media.ui_patterns.yml) now supports the following 4 variants: - Left simple / `left_simple`: text on the left, simple call to action. This is the default behaviour. - Right simple / `right_simple`: text on the right, simple call to action. - Left featured / `left_featured`: text on the left, featured call to action. - Right featured / `right_featured`: text on the right, featured call to action. If no variant is set, then the pattern will be visualized using the default one. This guarantees backward compatibility. #### Site header [](#site-header) ECL v3 supports the horizontal menu in both Core and Standardised branding. In order to accommodate this, we removed the visibility condition of the `Main navigation` block: ``` visibility: oe_theme_helper_current_branding: id: oe_theme_helper_current_branding branding: standardised negate: false context_mapping: { } ``` ### Upgrade to 2.17.0 [](#upgrade-to-2170) #### Dropdown UI pattern [](#dropdown-ui-pattern) In 2.17.0 we dropped support for the `Dropdown` pattern, which will be removed in the next major version. The pattern is still available, albeit hidden on the pattern overview page. The new `Dropdown` pattern is based on the ECL Expandable component and should work as a drop-in replacement of the old one. ### Upgrade to 2.15.0 [](#upgrade-to-2150) #### Social media links pattern [](#social-media-links-pattern) In 2.15.0 we introduced a new pattern ["Social media links"](./templates/patterns/social_media_links) with two variants: - `horizontal`: social media links will be arranged horizontally. - `vertical`: social media links will be arranged vertically. Therefore patterns "Social media links: horizontal" and "Social media links: vertical" are now deprecated. Use the "Social media links" pattern with an appropriate variant instead. ### Upgrade to 2.10.0 [](#upgrade-to-2100) #### ECL page header [](#ecl-page-header) In 2.10.0 we dropped supporting the following elements in the ["Page header" pattern](./templates/patterns/page_header/page_header.ui_patterns.yml): - `identity`: used to show site-identifying information (such as the site name). - `infos`: used to show secondary meta information, below the page header introduction text. As a result, if your `PageHeaderMetadata` plugins provide such data, it will no longer be displayed. #### ECL branding [](#ecl-branding) In 2.10.0 we introduced support for ECL branding (read above for more information). The OpenEuropa Theme will use the "Core" branding, visit the theme configuration page if you need to change that and use the "Standardised" branding instead. To know which branding your site is supposed to use check the [ECL website](https://ec.europa.eu/component-library). ### Upgrade to 2.9.0 [](#upgrade-to-290) #### Content type teasers [](#content-type-teasers) If you are using the `oe_content` module together with the OpenEuropa theme then updating to 2.9.0 or later will affect your existing teaser displays. The 2.9.0 version updates the teaser display of most content types provided by `oe_content`so if you want to keep any customization you have made to your site you will need to redo those modifications and override the teaser templates on your own custom theme. #### ECL site header [](#ecl-site-header) In 2.9.0 we dropped support for the legacy ECL site header. To do so we had to move the language switcher block to the `site_header_secondary` theme region. This means that: - If your site does not use a sub-theme, then you have nothing to worry about, as we will move the block there for you in a post-update hook (if we find one) - If your site does use a sub-them which displays the language switcher block, then you'll need to move it to the `site_header_secondary` region yourself ### Upgrade from 1.x to 2.x [](#upgrade-from-1x-to-2x) - The following patterns have been removed on 2.x: - `dialog` - `file_link` - The `variant` field on the `field` pattern has been removed. Instead, ui\_patterns variants definition is used. Read ui\_patterns [pattern definition documentation](https://ui-patterns.readthedocs.io/en/8.x-1.x/content/patterns-definition.html#pattern-definitions) for how it works. - [OpenEuropa Corporate Blocks](https://github.com/openeuropa/oe_corporate_blocks) 1.x is not supported anymore, you should use version 2.x instead. Companion sub-modules --------------------- [](#companion-sub-modules) - [OpenEuropa Theme Contact Forms](./modules/oe_theme_contact_forms/README.md) - [OpenEuropa Content Call for tenders companion module](./modules/oe_theme_content_call_tenders/README.md) - [OpenEuropa Content Corporate Entity Contact companion module](./modules/oe_theme_content_entity_contact/README.md) - [OpenEuropa Content Corporate Entity Organisation companion module](./modules/oe_theme_content_entity_organisation/README.md) - [OpenEuropa Content Corporate Entity Venue companion module](./modules/oe_theme_content_entity_venue/README.md) - [OpenEuropa Content Event companion module](./modules/oe_theme_content_event/README.md) - [OpenEuropa Content News companion module](./modules/oe_theme_content_news/README.md) - [OpenEuropa Content Page companion module](./modules/oe_theme_content_page/README.md) - [OpenEuropa Content Policy companion module](./modules/oe_theme_content_policy/README.md) - [OpenEuropa Content Project companion module](./modules/oe_theme_content_project/README.md) - [OpenEuropa Content Publication companion module](./modules/oe_theme_content_publication/README.md) Corporate blocks ---------------- [](#corporate-blocks) When using the theme in conjunction with the [OpenEuropa Corporate Blocks](https://github.com/openeuropa/oe_corporate_blocks)component changing the component library will show a different footer block, namely: - The European Commission footer, shipping with a set of links and references that must be present on all European Commission sites. - The European Union footer, shipping with a set of links and references that must be present on all European Union sites. Image styles ------------ [](#image-styles) OpenEuropa Theme ships with a number of image styles that should help users follow the guidelines set by the ECL. The following is a list of all the vailable styles and their preferred usage: - List item (`oe_theme_list_item`): To be used on content lists with small thumbnails. - Featured list item (`oe_theme_list_item_featured`): To be used on highlights and content lists with big thumbnails. - Medium (`oe_theme_medium_no_crop`): Medium sized image, part of the Main content responsive image style. - Small (`oe_theme_small_no_crop`): Small sized image, part of the Main content responsive image style. - Main content (`oe_theme_main_content`): Responsive image style, to be used on any image that is rendered inside a content page. - Full width (3840) (`oe_theme_full_width`): Full width image (3840px x 3840px). ### Responsive image banner styles [](#responsive-image-banner-styles) - Large Banner (`oe_theme_large_banner`) - Medium Banner (`oe_theme_medium_banner`) - Small Banner (`oe_theme_small_banner`) - 3:1 Banner (Deprecated) (`oe_theme_3_1_banner`) - 4:1 Banner (Deprecated) (`oe_theme_4_1_banner`) - 5:1 Banner (Deprecated) (`oe_theme_5_1_banner`) ### Banner image styles for different ratios [](#banner-image-styles-for-different-ratios) - Full width banner 3:1 (`oe_theme_full_width_banner_3_1`) - Extra large banner 3:1 (`oe_theme_extra_large_3_1_banner`) - Large banner 3:1 (`oe_theme_large_3_1_banner`) - Medium banner 3:1 (Deprecated) (`oe_theme_medium_3_1_banner`) - Small banner 3:1 (Deprecated) (`oe_theme_small_3_1_banner`) - Full width banner 4:1 (`oe_theme_full_width_banner_4_1`) - Extra large banner 4:1 (`oe_theme_extra_large_4_1_banner`) - Large banner 4:1 (`oe_theme_large_4_1_banner`) - Medium banner 3:2 (`oe_theme_medium_3_2_banner`) - Medium banner 4:1 (Deprecated) (`oe_theme_medium_4_1_banner`) - Small banner 4:1 (Deprecated) (`oe_theme_small_4_1_banner`) - Full width banner 5:1 (`oe_theme_full_width_banner_5_1`) - Extra large banner 5:1 (Deprecated) (`oe_theme_extra_large_5_1_banner`) - Large banner 5:1 (`oe_theme_large_5_1_banner`) - Small banner 3:2 (`oe_theme_small_3_2_banner`) - Medium banner 5:1 (Deprecated) (`oe_theme_medium_5_1_banner`) - Small banner 5:1 (Deprecated) (`oe_theme_small_5_1_banner`) Development ----------- [](#development) The OpenEuropa Theme project contains all the necessary code and tools for an effective development process, meaning: - All PHP development dependencies (Drupal core included) are required in [composer.json](composer.json) - All Node.js development dependencies are required in [package.json](package.json) - Project setup and installation can be easily handled thanks to the integration with the [Task Runner](https://github.com/openeuropa/task-runner) project. - All system requirements are containerized using [Docker Composer](https://docs.docker.com/compose). - Every change to the code base will be automatically tested using [Drone](https://drone.io). Make sure you read the [developer documentation](./docs/developer-documentation.md) before starting to use the theme in your projects. ### Project setup [](#project-setup) Developing the theme requires a local copy of ECL assets, including Twig templates, SASS and JavaScript source files. In order to download all required PHP and ECL dependencies run: ``` composer install ``` This will build a fully functional Drupal site in the `./build` directory that can be used to develop and showcase the theme. The final artifacts are automatically built in the first step drupal:site-setup which is invoked from composer install. Before setting up and installing the site make sure to customize default configuration values by copying [runner.yml.dist](runner.yml.dist)to `./runner.yml` and override relevant properties. To set up the project run: ``` ./vendor/bin/run drupal:site-setup ``` This will: - Symlink the theme in `./build/themes/custom/oe_theme` so that it's available to the target site - Setup Drush and Drupal's settings using values from `./runner.yml.dist` - Setup PHPUnit and Behat configuration files using values from `./runner.yml.dist` **Please note:** project files and directories are symlinked within the test site by using the [OpenEuropa Task Runner's Drupal project symlink](https://github.com/openeuropa/task-runner-drupal-project-symlink) command. If you add a new file or directory in the root of the project, you need to re-run `drupal:site-setup` in order to make sure they are be correctly symlinked. If you don't want to re-run a full site setup for that, you can simply run: ``` $ ./vendor/bin/run drupal:symlink-project ``` After a successful setup install the site by running: ``` ./vendor/bin/run drupal:site-install ``` This will: - Install the target site - Set the OpenEuropa Theme as the default theme - Enable OpenEuropa Theme Demo and [Configuration development](https://www.drupal.org/project/config_devel) modules ### Using Docker Compose [](#using-docker-compose) Alternatively, you can build a development site using [Docker](https://www.docker.com/get-docker) and [Docker Compose](https://docs.docker.com/compose/) with the provided configuration. Docker provides the necessary services and tools such as a web server and a database server to get the site running, regardless of your local host configuration. #### Requirements: [](#requirements-1) - [Docker](https://www.docker.com/get-docker) - [Docker Compose](https://docs.docker.com/compose/) #### Configuration [](#configuration) By default, Docker Compose reads two files, a `docker-compose.yml` and an optional `docker-compose.override.yml` file. By convention, the `docker-compose.yml` contains your base configuration and it's provided by default. The override file, as its name implies, can contain configuration overrides for existing services or entirely new services. If a service is defined in both files, Docker Compose merges the configurations. Find more information on Docker Compose extension mechanism on [the official Docker Compose documentation](https://docs.docker.com/compose/extends/). #### Usage [](#usage) To start, run: ``` docker-compose up ``` It's advised to not daemonize `docker-compose` so you can turn it off (`CTRL+C`) quickly when you're done working. However, if you'd like to daemonize it, you have to add the flag `-d`: ``` docker-compose up -d ``` Then: ``` docker-compose exec web composer install docker-compose exec web ./vendor/bin/run drupal:site-install ``` Using default configuration, the development site files should be available in the `build` directory and the development site should be available at: . #### Running the tests [](#running-the-tests) To run the grumphp checks: ``` docker-compose exec web ./vendor/bin/grumphp run ``` To run the phpunit tests: ``` docker-compose exec web ./vendor/bin/phpunit ``` To run the behat tests: ``` docker-compose exec web ./vendor/bin/behat ``` ### Step debugging [](#step-debugging) To enable step debugging from the command line, pass the `XDEBUG_SESSION` environment variable with any value to the container: ``` docker-compose exec -e XDEBUG_SESSION=1 web ``` Please note that, starting from XDebug 3, a connection error message will be outputted in the console if the variable is set but your client is not listening for debugging connections. The error message will cause false negatives for PHPUnit tests. To initiate step debugging from the browser, set the correct cookie using a browser extension or a bookmarklet like the ones generated at . ### Disable Drupal 8 caching [](#disable-drupal-8-caching) Manually disabling Drupal 8 caching is a laborious process that is well described [here](https://www.drupal.org/node/2598914). Alternatively, you can use the following Drupal Console command to disable/enable Drupal 8 caching: ``` ./vendor/bin/drupal site:mode dev # Disable all caches. ./vendor/bin/drupal site:mode prod # Enable all caches. ``` Note: to fully disable Twig caching the following additional manual steps are required: 1. Open `./build/sites/default/services.yml` 2. Set the following parameters: ``` parameters: twig.config: debug: true auto_reload: true cache: false ``` 3. Rebuild Drupal cache: `./vendor/bin/drush cr` This is due to the following [Drupal Console issue](https://github.com/hechoendrupal/drupal-console/issues/3854). ### Working with ECL components [](#working-with-ecl-components) You can use the ECL components in your Twig templates by referencing them using the [ECL Twig Loader](https://github.com/openeuropa/ecl-twig-loader)as shown below: ``` {% include '@ecl-twig/logos' with { 'to': 'https://ec.europa.eu', 'title': 'European Commission', } %} ``` *Important:* not all ECL templates are available to the theme for include, whenever you need include a new ECL template remember to add it to the `copy` section of [ecl-builder.config.js](ecl-builder.config.js) and run: ``` docker compose exec web bash ./scripts/build-ecl-pipeline.sh ``` #### Update ECL [](#update-ecl) To update ECL components change the `@ec-europa/ecl-preset-full` version number in [package.json](package.json) and run: ``` docker compose exec web bash ./scripts/build-ecl-pipeline.sh ``` This will update assets such as images and fonts and re-compile CSS. Resulting changes are not meant to be committed to this repository. #### Watching and re-compiling Sass and JS changes [](#watching-and-re-compiling-sass-and-js-changes) To watch for Sass and JS file changes - [/sass](/sass) folder - in order to re-compile them to the destination folder: ``` docker compose exec web npm run watch ``` Resulting changes are not meant to be committed to this repository. #### Patching ECL components [](#patching-ecl-components) ECL components can be patched by using the [`patch-package`](https://www.npmjs.com/package/patch-package) NPM project. To patch a component: 1. Modify its source files directly in `./node_modules/@ecl/[component-name]` 2. Run: ``` docker compose exec web npx patch-package @ecl/[component-name] ``` Patches will be generated in `./patches` and applied when running `npm install`. #### Working with a development version of ECL [](#working-with-a-development-version-of-ecl) To build the theme using a development version of ECL run `make ecl-dev` instead of the `npm install` procedure described above, this will: - Checkout a working copy of the ECL repository from the branch you indicate in `.env.dist`. - Build ECL using the above codebase. - Copy Twig templates and CSS/JS assets where the theme expects them to be. - Compile theme's SASS files using the ECL's dev version If you want to create a release using a dev ECL version, make sure that `ECL_BUILD` is set to `dev` in `.env.dist`. You can then control which branch and repo ECL will be built from by setting `ECL_BUILD_REF` and `ECL_BUILD_REPO` in the same file. Contributing ------------ [](#contributing) Please read [the full documentation](https://github.com/openeuropa/openeuropa) for details on our code of conduct, and the process for submitting pull requests to us. Versioning ---------- [](#versioning) We use [SemVer](http://semver.org/) for versioning. For the available versions, see the [tags on this repository](https://github.com/openeuropa/oe_theme/tags). ### Health Score 58 — FairBetter than 98% of packages Maintenance72 Regular maintenance activity Popularity27 Limited adoption so far Community31 Small or concentrated contributor base Maturity91 Battle-tested with a long release history Bus Factor3 3 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~6 days Total 472 Last Release 67d ago Major Versions 0.6292.202511201305 → 5.0.0-beta172025-11-21 0.5.202601051310 → 5.0.0-beta182026-01-09 0.6478.202601201600 → 5.0.0-beta192026-01-22 0.6497.202601291534 → 5.0.0-beta202026-01-29 0.5.202602201330 → 5.0.0-beta212026-03-02 PHP version history (6 changes)0.1.0PHP ^7.1 2.3.0PHP >=7.2 2.18.0PHP >=7.3 3.0.0-beta9PHP >=7.4 0.3.202303011652PHP >=8.0 0.3831.202312141300PHP >=8.1 ### Community Maintainers ![](https://www.gravatar.com/avatar/8562a7045bde4094cf1252195ae47001970518ed7281b9e13caa6b6ffea03a5b?d=identicon)[ademarco](/maintainers/ademarco) --- Top Contributors [![22Alexandra](https://avatars.githubusercontent.com/u/22908988?v=4)](https://github.com/22Alexandra "22Alexandra (1226 commits)")[![ademarco](https://avatars.githubusercontent.com/u/153362?v=4)](https://github.com/ademarco "ademarco (1153 commits)")[![sergepavle](https://avatars.githubusercontent.com/u/9432036?v=4)](https://github.com/sergepavle "sergepavle (680 commits)")[![imanoleguskiza](https://avatars.githubusercontent.com/u/14978592?v=4)](https://github.com/imanoleguskiza "imanoleguskiza (527 commits)")[![upchuk](https://avatars.githubusercontent.com/u/5848933?v=4)](https://github.com/upchuk "upchuk (443 commits)")[![nagyad](https://avatars.githubusercontent.com/u/22004498?v=4)](https://github.com/nagyad "nagyad (428 commits)")[![voidtek](https://avatars.githubusercontent.com/u/186827?v=4)](https://github.com/voidtek "voidtek (324 commits)")[![yenyasinn](https://avatars.githubusercontent.com/u/1183951?v=4)](https://github.com/yenyasinn "yenyasinn (318 commits)")[![brummbar](https://avatars.githubusercontent.com/u/8488617?v=4)](https://github.com/brummbar "brummbar (245 commits)")[![drishu](https://avatars.githubusercontent.com/u/11507647?v=4)](https://github.com/drishu "drishu (84 commits)")[![drupol](https://avatars.githubusercontent.com/u/252042?v=4)](https://github.com/drupol "drupol (74 commits)")[![hernani](https://avatars.githubusercontent.com/u/707860?v=4)](https://github.com/hernani "hernani (47 commits)")[![richardcanoe](https://avatars.githubusercontent.com/u/1321598?v=4)](https://github.com/richardcanoe "richardcanoe (31 commits)")[![enriquelacoma](https://avatars.githubusercontent.com/u/5982573?v=4)](https://github.com/enriquelacoma "enriquelacoma (30 commits)")[![aritomelo](https://avatars.githubusercontent.com/u/9381722?v=4)](https://github.com/aritomelo "aritomelo (26 commits)")[![pfrenssen](https://avatars.githubusercontent.com/u/442924?v=4)](https://github.com/pfrenssen "pfrenssen (23 commits)")[![netlooker](https://avatars.githubusercontent.com/u/7669736?v=4)](https://github.com/netlooker "netlooker (22 commits)")[![fmmribeiro](https://avatars.githubusercontent.com/u/1272997?v=4)](https://github.com/fmmribeiro "fmmribeiro (22 commits)")[![intelektron](https://avatars.githubusercontent.com/u/3647601?v=4)](https://github.com/intelektron "intelektron (12 commits)")[![gorsky87](https://avatars.githubusercontent.com/u/21284516?v=4)](https://github.com/gorsky87 "gorsky87 (12 commits)") ### Embed Badge ![Health badge](/badges/ec-europa-oe-theme/health.svg) ``` [![Health](https://phpackages.com/badges/ec-europa-oe-theme/health.svg)](https://phpackages.com/packages/ec-europa-oe-theme) ``` ### Alternatives [openeuropa/oe_theme OpenEuropa base theme. 37163.4k5](/packages/openeuropa-oe-theme)[farmos/farmos A web-based farm record keeping application. 1.2k6.7k1](/packages/farmos-farmos)[voidagency/vactory_starter_kit Vactory is a custom Drupal profile which is developed and released by VOID Agency. 1019.7k](/packages/voidagency-vactory-starter-kit) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)