Docs

[rabbler]

Hi

How Do I reduce the size of the font and add a colour background to the search box overlay?

rabble.ie

[rabbler]

Also, is it possible to add an “x” to the top corner so people can close it down?

[Paul R]

Hi,

1. You can add this under Custom > Edit Global CSS in the Customizer.

.x-searchform-overlay .form-search .search-query {
    font-size: 5em;
    background-color:red;
}

2. You can close it by clicking anywhere outside the text box.

Adding an X, could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[rabbler]

Just for my own curiosuity, its someone on my team complaining that people “wont find out how to close it if they dont want to search.” I think its just BS, you guys must know from expereince that people are copped enough to click anywhere outside the text box at this stage?

[Rupok]

Hi there,

Thanks for writing back. As it will be closed by clicking anywhere and it’s a natural UX. So user will be able to close it unintentional by clicking anywhere. It’s rather a better UX.

Cheers!

[bttrym8]

I’ve run into the same request as our friend above. I doubt you’ve changed positions from “it’s outside the scope…” so would you mind pointing me to the file that needs to be edited to insert an X icon?

[Rupok]

Hi there,

If you want to add an X icon then it’s possible with some CSS or JS. Let’s provide your URL so that we can tailor the code for you.

Cheers!

[bttrym8]

This reply has been marked as private.

[Rad]

Hi there,

You may subscribe to this thread 🙂

And please add this CSS to your child theme’s style.css

.x-searchform-overlay-inner:before {
    content: "\f00d";
    position: fixed;
    top: 0px;
    right: 20px;
    font-family: "fontawesome";
    font-size: 30px;
    cursor: pointer;
    cursor: hand;
}

Hope this helps.

[Author]

Posts