How can I modify the search section of the navbar?

[benruijl]

Description

I would like to modify the search part in the navbar so that it will look like this (found on this website):

I like this more than the default Quarto small icon, since search is an important feature on my website and I want to highlight that. Since Quarto 1.4 will have shortcuts to open up the search window, I want to display the shortcut as well.

I know I can change the CSS of the current search button, .navbar .aa-DetachedSearchButton .aa-DetachedSearchButtonIcon but I don't quite know how I can add elements to the DOM, i.e., I don't know how to add "Search" and the shortcut ("Ctrl-k" in the image).

Can someone help me out?

[mcanouil]

You could use .aa-InputWrapperPrefix and .aa-InputWrappeSuffix.

[benruijl]

I would like to have it added to the navigation bar on top, which still only has the icon in your screenshot.

…

On Thu, Aug 24, 2023, 20:56 Mickaël Canouil ***@***.***> wrote: You could use .aa-InputWrapperPrefix and .aa-InputWrappeSuffix. [image: image] <https://user-images.githubusercontent.com/8896044/263075628-d8962d7d-5eb9-4f77-844c-c71294271c3a.png> — Reply to this email directly, view it on GitHub <#6564 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACEMGI3MQUIEYZQ7DK7Z3DXW6PURANCNFSM6AAAAAA3X52DDQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[mcanouil]

You can use inspect/developer mode to tweak this.
The search bar is JavaScrip/CSS.
And switch the type of the search bar, see https://quarto.org/docs/websites/website-search.html.

[benruijl]

Thanks! I managed to produce the following (I am bad at CSS):

.navbar #quarto-search.type-overlay .aa-Autocomplete {
    width: 120px;
}

.navbar .aa-DetachedSearchButton .aa-DetachedSearchButtonIcon {
    font-size: medium;
    border: 2px solid #b9b4b4;
    border-radius: 5px;
    display: flex;
    flex: 1 1 auto;
    padding: 5px;
}

body.quarto-light .navbar .aa-DetachedSearchButton .aa-DetachedSearchButtonIcon {
    color: #838689;
    border: 2px solid #ccc6c6;
}

body.quarto-dark .navbar .aa-DetachedSearchButton .aa-DetachedSearchButtonIcon {
    color: #d9e3eb;
    border: 2px solid #b9b4b4;
}

.aa-DetachedSearchButtonIcon::after {
    margin-left:10px;
    content: "  Shift-F";
}