0

I have a Drupal 9.5.1 website with Bootstrap5 2.0.6 as its base theme. The theme by default places a search form by means of a block named "Search" in the "Additional navigation region".

This block "Search" is provided by core, but how its looks seems to be determined by the theme. If I change the theme to Bartik, the same block by default appears in the "Sidebar first" region, but the button to press to search is an icon (I believe it is fa-search from FontAwesome), not the text "Search".

I have enabled Twig debugging, and found that in Bootstrap5 the search form is themed by:

themes/contrib/bootstrap5/templates/form/input.html.twig

In Bartik, the search form is themed by:

core/modules/system/templates/input.html.twig

In my subtheme, I want to do replace the text "Search" on the button with a an icon, just like you get by default if you set Bartik as the default.

But I am unable to locate where the look of of the Search button is defined and how to change it from text to the fa-search icon that is used by Bartik.

So far I've looked for it in the templates that comes with Bootstrap5 and from core (used by Bartik), including the input.html.twig that comes with both. There are subtle differences, but I am not able to pinpoint where the icon used by default by Bartik comes from.

I have tried to swap the one from core into my Bootstrap5 subtheme. This just removes the background colour on the button, but has no other effect.

6
  • 1
    You’ll need to provide some more info to get a definitive answer - how is the search from provided to the site? Is it core search or search API? Is it a block? Is it an exposed filter from a View? There’s probably not a special template that already exists for the search form (it’s just a form), so you’ll need to work out how it came into existence to find out how to alter it. To clarify, Bootstrap is just a theme, it wouldn’t provide that form and its functionality, that comes from a module
    – Clive
    Commented Jan 15, 2023 at 18:26
  • @Clive It is a block named "Search" that is provided by core, and that is placed in a specific region by the theme. I believe its look & feel is determined by the theme, because if you set the Bartik theme as default, it still on the page, but with a different look. I have added this information to the question. Commented Jan 15, 2023 at 20:03
  • 1
    @FreeRadical Have you enabled Twig debugging to determine which theme file renders it?
    – mona lisa
    Commented Jan 15, 2023 at 20:11
  • 1
    @cilefen I have now enabled twig debugging and found and examined the theme file rendering the Search field, but I am not wiser. Commented Jan 17, 2023 at 20:13

1 Answer 1

0

The twig template is, probably:

core/modules/system/templates/input.html.twig

So, I think there are not many options other than something like copy core/modules/system/templates/input.html.twig to your subtheme and edit it to something like:

{% if (attributes.id == 'the-id-of-the-submit') %}
  {%
    set classes = [
      'some-class',
      'some-other-class',
    ]
  %}
  <button{{ attributes.addClass(classes) }}></button>
{% else %}
  <input{{ attributes }} />{{ children }}
{% endif %}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.