London Dev Meetup Rescheduled! Due to unavoidable reasons, the event has been moved to 21st May. Speakers remain the same—any changes will be communicated. Seats are limited—register here to secure your spot!

AI OnAI Off
Navigation [hide] [expand]
Area: Optimizely Search & Navigation
ARCHIVED This content is retired and no longer maintained. See the latest version here.

Customized search block styling guide

This page provides an example of how to apply styling to a customized search block, available after installing EPiServer Find. The feature lets editors create a block based on search criteria that they define. The resulting block displays content that satisfies the search criteria as a list of links with optional descriptions and a heading.

Example

Each part of the block rendering has its own CSS class. Below is a schematic example of the block's rendering, demonstrating all available CSS classes.

<div class="find-custom-search-block">
    <h2 class="find-custom-search-block__header">List Header</h2>
    <ul class="find-custom-search-block__list">
        <li>
            <a href="url 1" class="find-custom-search-block__list__title">Title</a>
            <p class="find-custom-search-block__list__description">Description</p>
        </li>
 ... 
    </ul>
</div>
Resulting block rendering:

sample customized search block

See also: Customized Search Block in EPiServer Find

Last updated: Sep 21, 2015