{{ 'Find the interoperability resources you need'|trans }}
+{% block content %}
+
+ {{ content }}
+
+{% endblock %}
+
{% trans %}Need more search options?Use our advanced search{% endtrans %}
diff --git a/web/themes/ventuno/templates/form/form-element--views-exposed-form-search.html.twig b/web/themes/ventuno/templates/form/form-element--views-exposed-form-search.html.twig
new file mode 100644
index 0000000000..ae745a547c
--- /dev/null
+++ b/web/themes/ventuno/templates/form/form-element--views-exposed-form-search.html.twig
@@ -0,0 +1,102 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a form element views exposed form search block.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - errors: (optional) Any errors for this form element, may not be set.
+ * - prefix: (optional) The form element prefix, may not be set.
+ * - suffix: (optional) The form element suffix, may not be set.
+ * - required: The required marker, or empty if the associated form element is
+ * not required.
+ * - type: The type of the element.
+ * - name: The name of the element.
+ * - label: A rendered label element.
+ * - label_display: Label display setting. It can have these values:
+ * - before: The label is output before the element. This is the default.
+ * The label includes the #title and the required marker, if #required.
+ * - after: The label is output after the element. For example, this is used
+ * for radio and checkbox #type elements. If the #title is empty but the
+ * field is #required, the label will contain only the required marker.
+ * - invisible: Labels are critical for screen readers to enable them to
+ * properly navigate through forms but can be visually distracting. This
+ * property hides the label for everyone except screen readers.
+ * - attribute: Set the title attribute on the element to create a tooltip but
+ * output no label element. This is supported only for checkboxes and radios
+ * in \Drupal\Core\Render\Element\CompositeFormElementTrait::preRenderCompositeFormElement().
+ * It is used where a visual label is not needed, such as a table of
+ * checkboxes where the row and column provide the context. The tooltip will
+ * include the title and required marker.
+ * - description: (optional) A list of description properties containing:
+ * - content: A description of the form element, may not be set.
+ * - attributes: (optional) A list of HTML attributes to apply to the
+ * description content wrapper. Will only be set when description is set.
+ * - description_display: Description display setting. It can have these values:
+ * - before: The description is output before the element.
+ * - after: The description is output after the element. This is the default
+ * value.
+ * - invisible: The description is output after the element, hidden visually
+ * but available to screen readers.
+ * - disabled: True if the element is disabled.
+ * - title_display: Title display setting.
+ *
+ * @see template_preprocess_form_element()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+ set classes = [
+ 'input-group',
+ 'js-form-item',
+ 'form-item',
+ 'js-form-type-' ~ type|clean_class,
+ 'form-item-' ~ name|clean_class,
+ 'js-form-item-' ~ name|clean_class,
+ title_display not in ['after', 'before'] ? 'form-no-label',
+ disabled == 'disabled' ? 'form-disabled',
+ errors ? 'form-item--error',
+ col_class ? col_class,
+ margin_class ? margin_class,
+]
+%}
+{%
+ set description_classes = [
+ 'description',
+ 'form-text',
+ 'text-muted',
+ description_display == 'invisible' ? 'visually-hidden',
+]
+%}
+
+ {% if label_display in ['before', 'invisible'] %}
+ {{ label }}
+ {% endif %}
+ {% if prefix is not empty %}
+ {{ prefix }}
+ {% endif %}
+ {% if description_display == 'before' and description.content %}
+
+ {{ description.content }}
+
+ {% endif %}
+ {{ children }}
+ {% if suffix is not empty %}
+ {{ suffix }}
+ {% endif %}
+ {% if label_display == 'after' %}
+ {{ label }}
+ {% endif %}
+ {% if errors %}
+
+ {{ errors }}
+
+ {% endif %}
+ {% if description_display in ['after', 'invisible'] and description.content %}
+
+ {{ description.content }}
+
+ {% endif %}
+
+
diff --git a/web/themes/ventuno/templates/form/input--search-expose-form.html.twig b/web/themes/ventuno/templates/form/input--search-expose-form.html.twig
new file mode 100644
index 0000000000..118558ef27
--- /dev/null
+++ b/web/themes/ventuno/templates/form/input--search-expose-form.html.twig
@@ -0,0 +1,24 @@
+{#
+/**
+ * @file
+ * Theme override for an 'input' #type form element.
+ *
+ * Available variables:
+ * - attributes: A list of HTML attributes for the input element.
+ * - children: Optional additional rendered elements.
+ *
+ * @see template_preprocess_input()
+ */
+#}
+{%
+ set classes = [
+ 'search-bar__input',
+ 'form-control',
+ 'px-4',
+ 'py-3',
+ 'shadow',
+ attributes.hasClass('error') ? 'is-invalid',
+]
+%}
+
+{{ children }}
diff --git a/web/themes/ventuno/ventuno.theme b/web/themes/ventuno/ventuno.theme
index 7a34b90e46..b3c9f3b4e9 100644
--- a/web/themes/ventuno/ventuno.theme
+++ b/web/themes/ventuno/ventuno.theme
@@ -7,6 +7,7 @@
declare(strict_types = 1);
+use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Menu\MenuLinkTreeElement;
use Drupal\Core\Menu\MenuTreeParameters;
use Drupal\Core\Url;
@@ -226,3 +227,33 @@ function ventuno_smart_trim(string $string, int $length, bool $ellipsis = TRUE):
$truncate = new TruncateHTML();
return $truncate->truncateChars($string, $length, $ellipsis ? '…' : '');
}
+
+/**
+ * Implements hook_theme_suggestions_HOOK_alter() for form-element.html.twig.
+ */
+function ventuno_theme_suggestions_form_element_alter(array &$suggestions, array $variables): void {
+ if (isset($variables['element']['#joinup_parent'])) {
+ $suggestions[] = 'form_element__' . $variables['element']['#joinup_parent'];
+ }
+}
+
+/**
+ * Implements hook_form_alter().
+ */
+function ventuno_form_alter(&$form, FormStateInterface $form_state, $form_id): void {
+ $route_name = \Drupal::routeMatch()->getRouteName();
+ // Check if the form contains exposed filter form element.
+ if ($route_name != 'view.search.page_1' && $form_id == 'views_exposed_form') {
+ // Here you can define the check for specific view so that
+ // it doesn't apply to all views.
+ $view = $form_state->get('view');
+ if ($view->id() === 'search') {
+ $form['keys']['#theme'] = 'input__search_expose_form';
+ $form['keys']['#title_display'] = 'invisible';
+ $form['keys']['#attributes']['id'] = 'search-bar__input';
+ $form['keys']['#attributes']['placeholder'] = t('Start typing to search…');
+ $form['keys']['#joinup_parent'] = $form_id . '_' . $view->id();
+ $form['sort_by']['#type'] = 'hidden';
+ }
+ }
+}