# Making a search icon with a theme

**URL:** https://meta.discourse.org/t/making-a-search-icon-with-a-theme/234929
**Category:** Support
**Created:** [August 3, 2022, 4:21am UTC](https://meta.discourse.org/t/making-a-search-icon-with-a-theme/234929 "2022-08-03T04:21:04Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz)
#### Post date: [August 3, 2022, 4:21am UTC](https://meta.discourse.org/t/making-a-search-icon-with-a-theme/234929/1 "2022-08-03T04:21:04Z")

</div>

Hi!

I was trying to insert an icon next to the search header to try and learn how to inset items into Discourse for a start.

However, this didn’t work.

```plaintext
<script>
node = document.getElementsByClassName('search-page-heading');
node.insertAdjacentElements('beforebegin', '<svg class="PixlzThemeSearchIcon" aria-hidden="true"><use xlink:href="#search"></use></svg>');
</script>

```

It could be a stupid mistake (as some of you know I become more stupid at night), but help is appreciated.  
Thanks!

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [August 3, 2022, 7:46am UTC](https://meta.discourse.org/t/making-a-search-icon-with-a-theme/234929/2 "2022-08-03T07:46:07Z")

</div>

Hello,

If I understand correctly you would like to add search icon here on search page 🔽

 ![Screenshot 2022-08-03 at 9.16.37](https://global.discourse-cdn.com/meta/original/4X/7/e/e/7ee2e8f8feeebac2d9f744411049ed97a13cb852.png) ![Screenshot 2022-08-03 at 10.22.31](https://global.discourse-cdn.com/meta/original/4X/7/8/0/78088e67d49b1e37dfcc6eda4a7b36f9d974aa82.png)

I think for this you need to override the Discourse template.  
Here is how to do it: [Overriding Discourse templates](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648#overriding-discourse-templates-23) but I suggest to read the all documentation.

* * *

In this case is looks something like this. First you have to find the search page template. Here are the templates: [https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates](https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates)

The template we looking for is the `full-page-search.hbs` and we can clearly see which part we should edit to make this change.

This is the heading part of the template which we will edit…but that is a little bit later…

```xml
    <h1 class="search-page-heading">
      {{#if this.hasResults}}
        <div class="result-count" id="search-result-count" aria-live="polite">
          {{html-safe this.resultCountLabel}}
        </div>
      {{else}}
        {{i18n "search.full_page_title"}}
      {{/if}}
    </h1>

```

Now we know from the doc above, we should start like this:

The template goes to the **header** section.

```xml
<script type="text/x-handlebars" data-template-name="full-page-search">

</script>

```

Than we have to copy the full template inside:

> **Looks like this**
>
> ```xml
> <script type="text/x-handlebars" data-template-name="full-page-search">
> <DSection @pageClass="search" @class="search-container">
> <ScrollTracker @name="full-page-search" @tag={{this.searchTerm}} @class="hidden" />
> <div class="search-header" role="search">
> <h1 class="search-page-heading">
> {{#if this.hasResults}}
> <div class="result-count" id="search-result-count" aria-live="polite">
> {{html-safe this.resultCountLabel}}
> </div>
> {{else}}
> {{i18n "search.full_page_title"}}
> {{/if}}
> </h1>
> <div class="search-bar">
> <SearchTextField @value={{this.searchTerm}} @class="full-page-search search no-blur search-query" @aria-label={{i18n "search.search_term_label"}} @enter={{action "search" (hash collapseFilters=true)}} @hasAutofocus={{this.hasAutofocus}} @aria-controls="search-result-count" />
> <ComboBox @id="search-type" @value={{this.search_type}} @content={{this.searchTypes}} @onChange={{action (mut this.search_type)}} @options={{hash
> castInteger=true
> }} />
> <DButton @action={{action "search" (hash collapseFilters=true)}} @icon="search" @label="search.search_button" @class="btn-primary search-cta" @ariaLabel="search.search_button" @disabled={{this.searchButtonDisabled}} />
> </div>
> {{#if this.usingDefaultSearchType}}
> {{!-- context is only provided when searching from mobile view --}}
> {{#if this.context}}
> <div class="search-context">
> <label>
> <Input @type="checkbox" name="searchContext" @checked={{this.searchContextEnabled}} /> {{this.searchContextDescription}}
> </label>
> </div>
> {{/if}}
> 
> <div class="search-filters">
> <SearchAdvancedOptions @searchTerm={{readonly this.searchTerm}} @onChangeSearchTerm={{action (mut this.searchTerm)}} @search={{action "search" (hash collapseFilters=true)}} @searchButtonDisabled={{this.searchButtonDisabled}} @expandFilters={{this.expandFilters}} />
> </div>
> {{/if}}
> 
> <div class="search-notice">
> {{#if this.invalidSearch}}
> <div class="fps-invalid">
> {{i18n "search.too_short"}}
> </div>
> {{/if}}
> </div>
> 
> </div>
> 
> <div class="search-advanced">
> {{#if this.hasResults}}
> {{#if this.usingDefaultSearchType}}
> <div class={{this.searchInfoClassNames}} role="region" ariaLabel={{i18n "search.sort_or_bulk_actions"}}>
> {{#if this.canBulkSelect}}
> <DButton @icon="list" @class="btn-default bulk-select" @title="topics.bulk.toggle" @action={{action "toggleBulkSelect"}} />
> {{#if this.selected}}
> <DButton @class="btn-default bulk-select-btn" @selected={{this.selected}} @action={{action "showBulkActions"}} @icon="wrench" />
> {{/if}}
> {{/if}}
> 
> {{#if this.bulkSelectEnabled}}
> {{#if this.hasUnselectedResults}}
> <DButton @icon="check-square" @class="btn-default" @action={{action "selectAll"}} @label="search.select_all" />
> {{/if}}
> 
> {{#if this.hasSelection}}
> <DButton @icon="far-square" @class="btn-default" @action={{action "clearAll"}} @label="search.clear_all" />
> {{/if}}
> {{/if}}
> 
> <div class="sort-by inline-form">
> <label>
> {{i18n "search.sort_by"}}
> </label>
> <ComboBox @value={{this.sortOrder}} @content={{this.sortOrders}} @onChange={{action (mut this.sortOrder)}} @id="search-sort-by" @options={{hash
> castInteger=true
> }} />
> </div>
> </div>
> {{/if}}
> {{/if}}
> 
> <PluginOutlet @name="full-page-search-below-search-info" @tagName="span" @connectorTagName="div" @args={{hash search=this.searchTerm}} />
> 
> {{#if this.searching}}
> {{loading-spinner size="medium"}}
> {{else}}
> <div class="search-results" role="region">
> <LoadMore @selector=".fps-result" @action={{action "loadMore"}}>
> {{#if this.usingDefaultSearchType}}
> <SearchResultEntries @posts={{this.model.posts}} @bulkSelectEnabled={{this.bulkSelectEnabled}} @selected={{this.selected}} @highlightQuery={{this.highlightQuery}} @searchLogId={{this.model.grouped_search_result.search_log_id}} />
> 
> <ConditionalLoadingSpinner @condition={{this.loading}}>
> {{#unless this.hasResults}}
> {{#if this.searchActive}}
> <h3>{{i18n "search.no_results"}}</h3>
> 
> {{#if this.model.grouped_search_result.error}}
> <div class="warning">
> {{this.model.grouped_search_result.error}}
> </div>
> {{/if}}
> 
> {{#if this.showSuggestion}}
> <div class="no-results-suggestion">
> {{i18n "search.cant_find"}}
> {{#if this.canCreateTopic}}
> <a href {{action "createTopic" this.searchTerm}}>{{i18n "search.start_new_topic"}}</a>
> {{#unless this.siteSettings.login_required}}
> {{i18n "search.or_search_google"}}
> {{/unless}}
> {{else}}
> {{i18n "search.search_google"}}
> {{/if}}
> </div>
> 
> <GoogleSearch @searchTerm={{this.searchTerm}} />
> {{/if}}
> {{/if}}
> {{/unless}}
> 
> {{#if this.hasResults}}
> <h3 class="search-footer">
> {{#if this.model.grouped_search_result.more_full_page_results}}
> {{#if this.isLastPage}}
> {{i18n "search.more_results"}}
> {{/if}}
> {{else}}
> {{i18n "search.no_more_results"}}
> {{/if}}
> </h3>
> {{/if}}
> </ConditionalLoadingSpinner>
> {{else}}
> <ConditionalLoadingSpinner @condition={{this.loading}}>
> {{#if this.hasResults}}
> {{#if this.model.categories.length}}
> <h4 class="category-heading">
> {{i18n "search.categories"}}
> </h4>
> <div class="category-items">
> {{#each this.model.categories as |category|}}
> {{category-link category extraClasses="fps-category-item"}}
> {{/each}}
> </div>
> {{/if}}
> 
> {{#if this.model.tags.length}}
> <h4 class="tag-heading">
> {{i18n "search.tags"}}
> </h4>
> 
> <div class="tag-items">
> {{#each this.model.tags as |tag|}}
> <div class="fps-tag-item">
> <a href={{tag.url}}>
> {{tag.id}}
> </a>
> </div>
> {{/each}}
> </div>
> {{/if}}
> 
> {{#if this.model.users}}
> <div class="user-items">
> {{#each this.model.users as |user|}}
> <UserLink @user={{user}} @class="fps-user-item">
> {{avatar user imageSize="large"}}
> 
> <div class="user-titles">
> {{#if user.name}}
> <span class="name">
> {{user.name}}
> </span>
> {{/if}}
> 
> <span class="username">
> {{user.username}}
> </span>
> </div>
> </UserLink>
> {{/each}}
> </div>
> {{/if}}
> {{else}}
> {{#if this.searchActive}}
> <h3>{{i18n "search.no_results"}}</h3>
> {{/if}}
> {{/if}}
> </ConditionalLoadingSpinner>
> {{/if}}
> </LoadMore>
> </div>
> {{/if}}
> </div>
> </DSection>
> </script>
> 
> ```

* * *

Now we can edit the heading part what I mentioned before. In this case this is a really simple change but you can make more complex changes. Be sure your custom template is always up to date. If there is any change in the core template you should update your custom template as well to works everything fine. 🙂

In this case we just add an icon `{{d-icon "search"}}` before full page title and before results count.

The full template looks like this 🔽

```xml
<script type="text/x-handlebars" data-template-name="full-page-search">
  <DSection @pageClass="search" @class="search-container">
    <ScrollTracker @name="full-page-search" @tag={{this.searchTerm}} @class="hidden" />
    <div class="search-header" role="search">
      <h1 class="search-page-heading">
        {{#if this.hasResults}}
          <div class="result-count" id="search-result-count" aria-live="polite">
            {{d-icon "search"}}
            {{html-safe this.resultCountLabel}}
          </div>
        {{else}}
          {{d-icon "search"}}
          {{i18n "search.full_page_title"}}
        {{/if}}
      </h1>
      <div class="search-bar">
        <SearchTextField @value={{this.searchTerm}} @class="full-page-search search no-blur search-query" @aria-label={{i18n "search.search_term_label"}} @enter={{action "search" (hash collapseFilters=true)}} @hasAutofocus={{this.hasAutofocus}} @aria-controls="search-result-count" />
        <ComboBox @id="search-type" @value={{this.search_type}} @content={{this.searchTypes}} @onChange={{action (mut this.search_type)}} @options={{hash
            castInteger=true
          }} />
        <DButton @action={{action "search" (hash collapseFilters=true)}} @icon="search" @label="search.search_button" @class="btn-primary search-cta" @ariaLabel="search.search_button" @disabled={{this.searchButtonDisabled}} />
      </div>
      {{#if this.usingDefaultSearchType}}
        {{!-- context is only provided when searching from mobile view --}}
        {{#if this.context}}
          <div class="search-context">
            <label>
              <Input @type="checkbox" name="searchContext" @checked={{this.searchContextEnabled}} /> {{this.searchContextDescription}}
            </label>
          </div>
        {{/if}}

        <div class="search-filters">
          <SearchAdvancedOptions @searchTerm={{readonly this.searchTerm}} @onChangeSearchTerm={{action (mut this.searchTerm)}} @search={{action "search" (hash collapseFilters=true)}} @searchButtonDisabled={{this.searchButtonDisabled}} @expandFilters={{this.expandFilters}} />
        </div>
      {{/if}}

      <div class="search-notice">
        {{#if this.invalidSearch}}
          <div class="fps-invalid">
            {{i18n "search.too_short"}}
          </div>
        {{/if}}
      </div>

    </div>

    <div class="search-advanced">
      {{#if this.hasResults}}
        {{#if this.usingDefaultSearchType}}
          <div class={{this.searchInfoClassNames}} role="region" ariaLabel={{i18n "search.sort_or_bulk_actions"}}>
            {{#if this.canBulkSelect}}
              <DButton @icon="list" @class="btn-default bulk-select" @title="topics.bulk.toggle" @action={{action "toggleBulkSelect"}} />
              {{#if this.selected}}
                <DButton @class="btn-default bulk-select-btn" @selected={{this.selected}} @action={{action "showBulkActions"}} @icon="wrench" />
              {{/if}}
            {{/if}}

            {{#if this.bulkSelectEnabled}}
              {{#if this.hasUnselectedResults}}
                <DButton @icon="check-square" @class="btn-default" @action={{action "selectAll"}} @label="search.select_all" />
              {{/if}}

              {{#if this.hasSelection}}
                <DButton @icon="far-square" @class="btn-default" @action={{action "clearAll"}} @label="search.clear_all" />
              {{/if}}
            {{/if}}

            <div class="sort-by inline-form">
              <label>
                {{i18n "search.sort_by"}}
              </label>
              <ComboBox @value={{this.sortOrder}} @content={{this.sortOrders}} @onChange={{action (mut this.sortOrder)}} @id="search-sort-by" @options={{hash
                  castInteger=true
                }} />
            </div>
          </div>
        {{/if}}
      {{/if}}

      <PluginOutlet @name="full-page-search-below-search-info" @tagName="span" @connectorTagName="div" @args={{hash search=this.searchTerm}} />

      {{#if this.searching}}
        {{loading-spinner size="medium"}}
      {{else}}
        <div class="search-results" role="region">
          <LoadMore @selector=".fps-result" @action={{action "loadMore"}}>
            {{#if this.usingDefaultSearchType}}
              <SearchResultEntries @posts={{this.model.posts}} @bulkSelectEnabled={{this.bulkSelectEnabled}} @selected={{this.selected}} @highlightQuery={{this.highlightQuery}} @searchLogId={{this.model.grouped_search_result.search_log_id}} />

              <ConditionalLoadingSpinner @condition={{this.loading}}>
                {{#unless this.hasResults}}
                  {{#if this.searchActive}}
                    <h3>{{i18n "search.no_results"}}</h3>

                    {{#if this.model.grouped_search_result.error}}
                      <div class="warning">
                        {{this.model.grouped_search_result.error}}
                      </div>
                    {{/if}}

                    {{#if this.showSuggestion}}
                      <div class="no-results-suggestion">
                        {{i18n "search.cant_find"}}
                        {{#if this.canCreateTopic}}
                          <a href {{action "createTopic" this.searchTerm}}>{{i18n "search.start_new_topic"}}</a>
                          {{#unless this.siteSettings.login_required}}
                            {{i18n "search.or_search_google"}}
                          {{/unless}}
                        {{else}}
                          {{i18n "search.search_google"}}
                        {{/if}}
                      </div>

                      <GoogleSearch @searchTerm={{this.searchTerm}} />
                    {{/if}}
                  {{/if}}
                {{/unless}}

                {{#if this.hasResults}}
                  <h3 class="search-footer">
                    {{#if this.model.grouped_search_result.more_full_page_results}}
                      {{#if this.isLastPage}}
                        {{i18n "search.more_results"}}
                      {{/if}}
                    {{else}}
                      {{i18n "search.no_more_results"}}
                    {{/if}}
                  </h3>
                {{/if}}
              </ConditionalLoadingSpinner>
            {{else}}
              <ConditionalLoadingSpinner @condition={{this.loading}}>
                {{#if this.hasResults}}
                  {{#if this.model.categories.length}}
                    <h4 class="category-heading">
                      {{i18n "search.categories"}}
                    </h4>
                    <div class="category-items">
                      {{#each this.model.categories as |category|}}
                        {{category-link category extraClasses="fps-category-item"}}
                      {{/each}}
                    </div>
                  {{/if}}

                  {{#if this.model.tags.length}}
                    <h4 class="tag-heading">
                      {{i18n "search.tags"}}
                    </h4>

                    <div class="tag-items">
                      {{#each this.model.tags as |tag|}}
                        <div class="fps-tag-item">
                          <a href={{tag.url}}>
                            {{tag.id}}
                          </a>
                        </div>
                      {{/each}}
                    </div>
                  {{/if}}

                  {{#if this.model.users}}
                    <div class="user-items">
                      {{#each this.model.users as |user|}}
                        <UserLink @user={{user}} @class="fps-user-item">
                          {{avatar user imageSize="large"}}

                          <div class="user-titles">
                            {{#if user.name}}
                              <span class="name">
                                {{user.name}}
                              </span>
                            {{/if}}

                            <span class="username">
                              {{user.username}}
                            </span>
                          </div>
                        </UserLink>
                      {{/each}}
                    </div>
                  {{/if}}
                {{else}}
                  {{#if this.searchActive}}
                    <h3>{{i18n "search.no_results"}}</h3>
                  {{/if}}
                {{/if}}
              </ConditionalLoadingSpinner>
            {{/if}}
          </LoadMore>
        </div>
      {{/if}}
    </div>
  </DSection>
</script>

```

Hope this helps 🙂

---

<div class="post-metadata">

### Author: ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz)
#### Post date: [August 3, 2022, 3:39pm UTC](https://meta.discourse.org/t/making-a-search-icon-with-a-theme/234929/3 "2022-08-03T15:39:49Z")

</div>

Alright, that almost worked!

I modified the search banner, and it does this

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/7/e/f7e30fa84cfba0631f2db5b0d28e0ad268c77ce0.png)  
Never knew it would be that cmplex, but thanks! Thought it would be a simple 3 line JS script

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [August 3, 2022, 7:27pm UTC](https://meta.discourse.org/t/making-a-search-icon-with-a-theme/234929/4 "2022-08-03T19:27:18Z")

</div>

Yeah I think that is because your custom css. You probably have to customize this area. 🙂

---

<div class="post-metadata">

### Author: ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz)
#### Post date: [August 3, 2022, 9:49pm UTC](https://meta.discourse.org/t/making-a-search-icon-with-a-theme/234929/5 "2022-08-03T21:49:24Z")

</div>

Sorry for the late reply but this is the CSS for it.

```plaintext
svg.PixlzThemeSearchIcon {
      position: relative;
      display: table-row;
      height: 50px !important;
      width: 50px;
      top: 227px;
      left: 220px;
      fill: #e0e0e0;
}

```

Is anything wrong with it?

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [August 4, 2022, 9:44am UTC](https://meta.discourse.org/t/making-a-search-icon-with-a-theme/234929/6 "2022-08-04T09:44:21Z")

</div>

Hello,

You don’t need to add custom css to svg if you want to appear it before title because we put it in the `h2` tags so it will use `h2` styles. But you have to modify the search title section. If I am correct this screenshot you share above is from your theme [DarkPixlz’s Modern Theme](https://meta.discourse.org/t/darkpixlzs-modern-theme/232543)?

I checked that theme and I think the problem is you use huge paddings and font-size to align title to center and there is no enough space to the search icon.

 ![Screenshot 2022-08-04 at 10.40.38](https://global.discourse-cdn.com/meta/original/4X/7/2/f/72fb8f2e1361c4334a7b0e994d0ca5e1a208c5d9.png)

```scss
.search-container .search-page-heading {
  padding: 2em 3.8em;
  font-size: 5em;
}

```

* * *

My suggestion:

I use margins instead of padding but not needed on sides - _because `.search-header` already have 10% padding on sides_ - to have enough space to the icon and use smaller font-size especially on mobile. To fix the vertical align you can add 1em margin to top as your `.main-outlet` has a 3em padding on top.

 ![Screenshot 2022-08-04 at 11.17.52](https://global.discourse-cdn.com/meta/original/4X/3/6/6/36618d57e94d3ba3fe891ddfebfbda58e39f737a.png)

Probably better to see if I change the background.

 ![Screenshot 2022-08-04 at 11.33.56](https://global.discourse-cdn.com/meta/original/4X/1/3/f/13f142fb2d32395db3c3957b9c2243660827744e.png)

```scss
.search-container .search-page-heading {
  margin: 1em 0 2em 0;
  font-size: 5em; // use smaller font size on smaller screen
  text-align: center;
}

```

---

<div class="post-metadata">

### Author: ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz)
#### Post date: [August 4, 2022, 10:30pm UTC](https://meta.discourse.org/t/making-a-search-icon-with-a-theme/234929/7 "2022-08-04T22:30:16Z")

</div>

Thanks, that worked 🙂

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [September 3, 2022, 10:30pm UTC](https://meta.discourse.org/t/making-a-search-icon-with-a-theme/234929/8 "2022-09-03T22:30:34Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.