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. node = document.getElementsByClassName('search-page-heading'); node.insertAdjacentElements('beforebegin', ' '); It could be a stupid mistake (as some of you know I become more stupid at night), but help is appreciated. Thanks!

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. [Screenshot 2022-08-04 at 10.40.38] .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] Probably better to see if I change the background. [Screenshot 2022-08-04 at 11.33.56] .search-container .search-page-heading { margin: 1em 0 2em 0; font-size: 5em; // use smaller font size on smaller screen text-align: center; }

Hello, If I understand correctly you would like to add search icon here on search page :arrow_down_small: [Screenshot 2022-08-03 at 9.16.37] [Screenshot 2022-08-03 at 10.22.31] 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: 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… {{#if this.hasResults}} {{html-safe this.resultCountLabel}} {{else}} {{i18n "search.full_page_title"}} {{/if}} Now we know from the doc above, we should start like this: The template goes to the header section. Than we have to copy the full template inside: Looks like this {{#if this.hasResults}} {{html-safe this.resultCountLabel}} {{else}} {{i18n "search.full_page_title"}} {{/if}} {{#if this.usingDefaultSearchType}} {{!-- context is only provided when searching from mobile view --}} {{#if this.context}} {{this.searchContextDescription}} {{/if}} {{/if}} {{#if this.invalidSearch}} {{i18n "search.too_short"}} {{/if}} {{#if this.hasResults}} {{#if this.usingDefaultSearchType}} {{#if this.canBulkSelect}} {{#if this.selected}} {{/if}} {{/if}} {{#if this.bulkSelectEnabled}} {{#if this.hasUnselectedResults}} {{/if}} {{#if this.hasSelection}} {{/if}} {{/if}} {{i18n "search.sort_by"}} {{/if}} {{/if}} {{#if this.searching}} {{loading-spinner size="medium"}} {{else}} {{#if this.usingDefaultSearchType}} {{#unless this.hasResults}} {{#if this.searchActive}} {{i18n "search.no_results"}} {{#if this.model.grouped_search_result.error}} {{this.model.grouped_search_result.error}} {{/if}} {{#if this.showSuggestion}} {{i18n "search.cant_find"}} {{#if this.canCreateTopic}} {{i18n "search.start_new_topic"}} {{#unless this.siteSettings.login_required}} {{i18n "search.or_search_google"}} {{/unless}} {{else}} {{i18n "search.search_google"}} {{/if}} {{/if}} {{/if}} {{/unless}} {{#if this.hasResults}} {{#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}} {{/if}} {{else}} {{#if this.hasResults}} {{#if this.model.categories.length}} {{i18n "search.categories"}} {{#each this.model.categories as |category|}} {{category-link category extraClasses="fps-category-item"}} {{/each}} {{/if}} {{#if this.model.tags.length}} {{i18n "search.tags"}} {{#each this.model.tags as |tag|}} {{tag.id}} {{/each}} {{/if}} {{#if this.model.users}} {{#each this.model.users as |user|}} {{avatar user imageSize="large"}} {{#if user.name}} {{user.name}} {{/if}} {{user.username}} {{/each}} {{/if}} {{else}} {{#if this.searchActive}} {{i18n "search.no_results"}} {{/if}} {{/if}} {{/if}} {{/if}} 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. :slightly_smiling_face: 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 :arrow_down_small: {{#if this.hasResults}} {{d-icon "search"}} {{html-safe this.resultCountLabel}} {{else}} {{d-icon "search"}} {{i18n "search.full_page_title"}} {{/if}} {{#if this.usingDefaultSearchType}} {{!-- context is only provided when searching from mobile view --}} {{#if this.context}} {{this.searchContextDescription}} {{/if}} {{/if}} {{#if this.invalidSearch}} {{i18n "search.too_short"}} {{/if}} {{#if this.hasResults}} {{#if this.usingDefaultSearchType}} {{#if this.canBulkSelect}} {{#if this.selected}} {{/if}} {{/if}} {{#if this.bulkSelectEnabled}} {{#if this.hasUnselectedResults}} {{/if}} {{#if this.hasSelection}} {{/if}} {{/if}} {{i18n "search.sort_by"}} {{/if}} {{/if}} {{#if this.searching}} {{loading-spinner size="medium"}} {{else}} {{#if this.usingDefaultSearchType}} {{#unless this.hasResults}} {{#if this.searchActive}} {{i18n "search.no_results"}} {{#if this.model.grouped_search_result.error}} {{this.model.grouped_search_result.error}} {{/if}} {{#if this.showSuggestion}} {{i18n "search.cant_find"}} {{#if this.canCreateTopic}} {{i18n "search.start_new_topic"}} {{#unless this.siteSettings.login_required}} {{i18n "search.or_search_google"}} {{/unless}} {{else}} {{i18n "search.search_google"}} {{/if}} {{/if}} {{/if}} {{/unless}} {{#if this.hasResults}} {{#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}} {{/if}} {{else}} {{#if this.hasResults}} {{#if this.model.categories.length}} {{i18n "search.categories"}} {{#each this.model.categories as |category|}} {{category-link category extraClasses="fps-category-item"}} {{/each}} {{/if}} {{#if this.model.tags.length}} {{i18n "search.tags"}} {{#each this.model.tags as |tag|}} {{tag.id}} {{/each}} {{/if}} {{#if this.model.users}} {{#each this.model.users as |user|}} {{avatar user imageSize="large"}} {{#if user.name}} {{user.name}} {{/if}} {{user.username}} {{/each}} {{/if}} {{else}} {{#if this.searchActive}} {{i18n "search.no_results"}} {{/if}} {{/if}} {{/if}} {{/if}} Hope this helps :slightly_smiling_face:

Alright, that almost worked! I modified the search banner, and it does this [image] 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. :slightly_smiling_face:

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?

Thanks, that worked :slight_smile:

Making a search icon with a theme

Product Support

darkpixlz (Pyx ) August 4, 2022, 10:30pm 7

Thanks, that worked

Topic		Replies	Views
Advanced Header Search Theme component official , header-search	49	7591	August 27, 2025
Search section like on Reddit? Development	15	1200	March 31, 2024
Bringing popular features to Discourse: Header search, welcome banner, and category icons / emoji Announcements	15	2060	April 19, 2025
Adding a custom Link/Icon to the discourse header Product Support	3	3886	January 21, 2019
Search icon covers search input Site feedback search , ux	4	222	August 29, 2026

Making a search icon with a theme

Related topics