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.
<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!
Hello,
If I understand correctly you would like to add search icon here on search page 
I think for this you need to override the Discourse template.
Here is how to do it: Overriding Discourse templates 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: discourse/app/assets/javascripts/discourse/app/templates at main · discourse/discourse · GitHub
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…
<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.
<script type="text/x-handlebars" data-template-name="full-page-search">
</script>
Than we have to copy the full template inside:
<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
<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
Alright, that almost worked!
I modified the search banner, and it does this
Never knew it would be that cmplex, but thanks! Thought it would be a simple 3 line JS script
Yeah I think that is because your custom css. You probably have to customize this area.
Sorry for the late reply but this is the CSS for it.
svg.PixlzThemeSearchIcon {
position: relative;
display: table-row;
height: 50px !important;
width: 50px;
top: 227px;
left: 220px;
fill: #e0e0e0;
}
Is anything wrong with it?
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?
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.
.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.
Probably better to see if I change the background.
.search-container .search-page-heading {
margin: 1em 0 2em 0;
font-size: 5em; // use smaller font size on smaller screen
text-align: center;
}
Thanks, that worked 
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.