Hello,
I’ve tried hard to find the source code related to the built-in Search function. I wanted to changed the placeholder and the styles. However, there is no file that I can find in any Ghost folders that contains the Search input or any other elements. It seems it is created dynamically using a React library.
Could you please help with this?
If you’re using the built in search (“sodo search”), the actual ‘search’ happens on your browser.
The js-script is loaded when you use the theme helper {{ghost_head}} in the default.hbs: <script defer="" src="https://cdn.jsdelivr.net/ghost/sodo-search@~1.5/umd/sodo-search.min.js" ....
It the same as the Ghost Portal: it’s an IFrame.
You can not directly apply styles to the inner IFrame element through parent window CSS class.
You can change it with another search tool “Algolia” - see the comments of @cathy_sarisky making-use-of-search
If have found a way to change the search-text - see:
https://forum.ghost.org/t/is-there-a-way-for-themes-to-call-a-function-when-sodo-search-is-activated/32812
You can find the sodo-search code in Ghost’s github repo - it’s in the main Ghost repo, in apps/search. You can make edits to the code, then build it and host it somewhere (uploading with the theme files is an option).
I had my fingers pretty deep in the search code when I set it up for translation, so if you get stuck, feel free to post again! 