Customizing The KadenceWP Search Modal

 

In the KadenceWP WordPress theme, when you click the search icon the entire screen is covered by a modal. I’ll show you how to make it smaller and position it wherever you wish with just a few lines of CSS!

Transcription

Hey folks, welcome to another HeroPress Tip of the Week. This week I’m going to show you how to adjust the look of the KadenceWP search modal.

I’m looking at a default Kadence theme here you can see down at the bottom it says KadenceWP. And if I click the spyglass in the top right, we get a full screen modal that is almost black, it’s a tiny bit of opacity, there are transparency there, you can see hello world back there. And if you click anywhere in the modal, it goes away. I didn’t really like that. So for HeroPress, I made mine look like this. It’s not full screen, although there is some darkening of the background. I made it blue. I added a drop shadow, I put some rounded corners on it, etc. So I’m going to show you how we did that.

First thing we’re going to do is open the customizer. And the first part is the easiest, changing the black to blue when you go to header. And then in the bottom area here you can see there’s the Search tab, which renders the spyglass, we’re going to click this little gear. And then over on the left, go to the Design tab. And at the bottom, you see modal background. And we’re going to click that and make it blue. Then if I click the spyglass, it’s blue. However, if I click over here, you can see that everything gets darker, dark gray when it’s not in focus. So I’m going to set the text colors to be white, so they’re nice and bright, even when they’re not in focus. So let’s publish that. There we have blue. So now we want to go to the CSS editor.

And I’m going to pull up the modal. And then we’re going to right click anywhere other than the search box, and “inspect”. And you can see here, what we’re inspecting is the drawer content. And we don’t want that. Nor do we want the header we want. Enter, you can see it fills the entire area. Now over on the right you can see there’s #search-drawer .drawer-inner. And that’s what we’re going to work on. We really only want to do this on desktop, we want the mobile to remain fullscreen. It just it works better.

So the first thing we’re going to put into our additional CSS is a media query. And so what this says is that anything we put inside here only works with a minimum width of 768 pixels. So basically wide. If he gets too narrow, it goes back and reverts to all the normal default styles. So I’m going to copy this line here. The #search-drawer .drawer-inner. Paste right there. So now we are editing only the drawer only with a minimum width of 768. So we want to make this modal not full width. So we’re going to give it a width of 50%. And there we are.

Now it’s on the right. Now maybe you liked the way that looks. And maybe we’re done. But I’m not done. I like mine centered. I also like the height to be 160px and then I don’t want it stuck to the top. So I’m going to put top: 25% And of course you can adjust any of these values as you see fit to make them match anything you want. If you don’t like 160 make it to 60 your site.

Now I also like rounded corners. So we’re going to do border-radius: 10px. There we go. And I’m gonna give it a drop shadow maybe 10 pixels to the right 10 pixels down 10 pixel blur and then I’m gonna make mine black. But this is really the most subjective because if you have a dark site, you may want light, it’s entirely up to you. Any any hex value works, of course. So there we are, there’s our box.

One last thing that I didn’t like, was this white that appears on focus. So here’s how we’re going to find that. So I’m going to right click here and inspect. And so down in my inspector here, we’re looking at this search field. And then I need to see the hover state. So over on the right, or not where I need to see focus. But over here, you can see there is a :hov, if we click it that lets us set any one of these things. So I’m going to turn focus on and now you can see that white drop.

And you can see that it is applied to this class right here. Just the white stuff. So I’m going to copy that very carefully. And then, also inside the media query, but next to the search drawer. Paste that in. And you’ll see that right here. There’s the box shadow. So all we have to do is put in box, dash shadow, none. And it’s gone. And there we have it.

That’s our whole model for Kadence, and just this much CSS. I hope you find it useful.

@media (min-width: 768px) {
    #search-drawer .drawer-inner {
        width: 50%;
        height: 160px;
        left: 25%;
        top: 25%;
        border-radius: 10px;
        box-shadow: 10px 10px 10px #000;
    }
    #search-drawer .drawer-inner input.search-field:focus {
      color: white;
      box-shadow: none;
   }
}