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="PixlzThemeSearchI…

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 th…

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…

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:

테마에 맞는 검색 아이콘 만들기

지원

darkpixlz (Pyx ) 8월 3, 2022, 3:39오후 3

좋아요, 거의 성공했네요!

검색 배너를 수정했는데 이렇게 동작합니다.

이렇게 복잡할 줄은 몰랐지만, 감사합니다! 단순한 3줄짜리 JS 스크립트로 끝날 줄 알았거든요.

글		댓글	조회수
Advanced Header Search Theme component official , header-search	49	7316	8월 27, 2025
Search section like on Reddit? Development	15	1131	3월 31, 2024
Bringing popular features to Discourse: Header search, welcome banner, and category icons / emoji Announcements	15	1928	4월 19, 2025
Adding a custom Link/Icon to the discourse header Support	3	3841	1월 21, 2019
Search icon covers search input Site feedback search , ux	4	180	8월 29, 2026

테마에 맞는 검색 아이콘 만들기

Related topics