Better Search Block

A lightweight module that transforms the standard Drupal search block into an aesthetically pleasing search box with animated icon effects.

better_search
1,451 sites
40
drupal.org
gui theme
search theming UI animation css search block form styling user experience
Drupal 8 Drupal 9 Drupal 10

Install

Drupal 10, 9, 8 v2.0.1
composer require 'drupal/better_search:^2.0'

Overview

Better Search Block is a lightweight theming module that enhances the visual appearance of Drupal's default search block. With minimal configuration, site administrators can replace the standard search form with a modern, animated search interface featuring a magnifying glass icon.

The module provides four distinct animation themes that trigger on hover or focus, creating an interactive user experience. These animations include background color transitions, expanding search fields, scaling icons, and sliding icon effects. All styling is achieved through pure CSS with no JavaScript dependencies, ensuring optimal performance.

The module works seamlessly with both the search block placed in regions and the search form on dedicated search pages. It includes Bootstrap theme compatibility and offers options to customize placeholder text, search field width, and submit button visibility.

Features

  • Four animated search box themes: Background Fade, Expand on Hover, Expand Icon on Hover, and Slide Icon on Hover
  • Customizable placeholder text displayed in the search input field
  • Configurable search box width with 11 size options ranging from 10 to 30 characters
  • Option to apply Better Search styling to search pages (/search) in addition to search blocks
  • Ability to hide the submit button using visually-hidden class for cleaner appearance
  • Pure CSS animations with no JavaScript dependencies for optimal performance
  • SVG-based search icon for crisp display on all screen resolutions
  • Bootstrap theme compatibility with automatic detection and appropriate styling
  • Cross-browser support with vendor prefixes for older browsers
  • Works with both search_block_form and search_form forms

Use Cases

Enhancing site search aesthetics

A site administrator wants to improve the visual appearance of the default Drupal search block without writing custom CSS. By enabling Better Search Block and selecting the 'Expand on Hover' theme, the search field becomes an interactive element that expands when users hover over it, providing visual feedback and a modern look.

Minimalist header search

A designer needs a compact search icon in the header that expands when clicked. Using the 'Expand on Hover' theme with a smaller size setting (e.g., 10), the search field appears as just an icon initially and expands to show the full input when users interact with it.

Consistent search styling across pages

A site has both a search block in the sidebar and a search form on the /search page. By enabling 'Better Search on search pages' and 'Hide the submit button', both search interfaces receive the same animated styling for a consistent user experience throughout the site.

Bootstrap theme integration

A site using a Bootstrap-based theme wants animated search styling. Better Search Block automatically detects Bootstrap and its child themes, applying appropriate classes (using array syntax instead of Attribute objects) to ensure compatibility while maintaining the animation effects.

Accessible animated search

An organization requires accessible interfaces but still wants visual enhancements. Better Search keeps the submit button in the DOM with visually-hidden class (screen readers can still access it), while users can submit by pressing Enter, meeting accessibility requirements while providing visual polish.

Tips

  • Clear Drupal's cache after changing Better Search settings to ensure the new CSS library is loaded correctly.
  • The search icon is an SVG file located at css/images/search-icon.svg and can be replaced with a custom icon by overriding the CSS.
  • For the 'Expand on Hover' theme to work properly, ensure your theme doesn't set a fixed width on the search form container.
  • Test the selected theme with your site's color scheme - the default uses a dark background (#2b303b) which may need CSS overrides to match your design.
  • The size setting affects the HTML size attribute; actual visual width may vary based on your theme's font settings.
  • If animations don't appear, verify that your theme or other modules aren't loading conflicting CSS for the search form.

Technical Details

Admin Pages 1
Better Search settings /admin/config/search/better-search

Configure the visual appearance and behavior of the Better Search enhanced search block. This page allows administrators to select an animation theme, customize the placeholder text, set the search box width, and control whether the styling is applied to search pages.

Permissions 1
Administer Better Search settings

Allows users to access and modify the Better Search configuration page at /admin/config/search/better-search. Users with this permission can change animation themes, placeholder text, search box size, and search page options.

Hooks 2
hook_help

Implements hook_help() to provide module documentation on the help page. Displays information about the module's purpose and links to the project page.

hook_form_alter

Alters the search_block_form and search_form forms to inject the search icon, attach the appropriate CSS library based on the selected theme, set placeholder text, configure field size, and optionally hide the submit button.

Security Notes 3
  • The module properly sanitizes the placeholder text using Drupal's translation system with @placeholder pattern to prevent XSS.
  • Configuration changes require the 'administer Better Search settings' permission, preventing unauthorized modifications.
  • No user-submitted data is stored or processed; the module only affects presentation layer.