nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How can I customize the text inside the Search Control?

Roy Youngman1

We use the Documentation theme quite a bit and a search control is automatically included on the upper-right of every page. Inside the control, the words "Search Confluence" appears before you actually type any search text in the field. We'd like to change what appears in that control but I can't find what "properties" file contains the text that gets displayed. Any ideas? Thanks.

Accepted answers

RianA

Hi Roy,

You could put the following on the Confluence Admin >> Custom HTML >> At end of the HEAD

&lt;script type="text/javascript"&gt;
AJS.toInit(function() {
AJS.$('#quick-search-query').attr('placeholder','Your String Here');
});
&lt;/script&gt;

Please change Your String Here to relevant text.

Hope it helps

All comments

UdayK

AJS.$("#header .quick-search-query").val("your search Text Here");

You can place this in 'At end of the HEAD' section.

Hope this will help.

Roy Youngman1

Tried it. All that happenned was the "AJS.$("#header.quick-search-query").val("My Search Test");" showed up as a text string above the menu bar. I'm sure I'm doing something wrong, but still looking for a solution.

RianA

Hi Roy,

You could put the following on the Confluence Admin >> Custom HTML >> At end of the HEAD

&lt;script type="text/javascript"&gt;
AJS.toInit(function() {
AJS.$('#quick-search-query').attr('placeholder','Your String Here');
});
&lt;/script&gt;

Please change Your String Here to relevant text.

Hope it helps

UdayK

AJS.toInit(function() {

AJS.$("#header .quick-search-query").val("your search Text Here");

});

The above code will work. you should add the line betwen toInit() method.

Place the aboce code in custom HTML-->At the end of the Head.

Roy Youngman1

Thanks both Uday and Rian, this worked (mostly). It solves my basic problem. Unfortuantely, it leaves a little artifact on a space that uses the Adaptavist Theme Builder but that is a small matter. It works prefectly on all the main spaces in our site and is a good technique to recommend to others who are trying to brand their sites. Appreciate the help!