[Resolved] On Page Search Box

[Sourabh]

Hi David,

Refer Snapshot and a URL in P-section and let me know how to change that search box same as visible in the sidebar, I think you have given me CSS for Sidebar search, so can I use the same for changing this search box also ??

What is the selector which I need to change.

[David]

Hi there,

that CSS is specific to the sidebars. You also have similar CSS for .post class.
Adding elements one at a time like this is going to lead you to asking a lot of the same questions for lots of different elements.

For all pages, posts, and archives the one element that is present for all is the inside-article – so you can use that CSS Selector apply that style to the container for any of your content ( not sidebars / widget areas )

[Sourabh]

Ha.Ha.Ha, I am confused now.

So thought I need your help…

Hope you understand.

[David]

The search form inside the page content is not a widget. It just a plain Search Form field without the .widget container – so you cannot simply style it in the same way….

You can try .entry-content .search-form

It will add the shadow just to the form.
But you may want to give it some padding, and make it an inline block to stop it from spanning the width of the entry-content eg.

.entry-content .search-form {
    padding: 20px;
    display: inline-block; 
}

[Sourabh]

Indeed It’s a great help David, Thanks.

I created code and it’s working but a small issue is how to make the search bar long or short ?? (Refer P-Section for snapshot).

You can check out the code also with the credential if I made any fault..!!

[David]

I am not able to see the search page that was there before ?

[Sourabh]

wait, doing something with elementor hence it did not show, it is there now… Check

[Sourabh]

yes its visible now, you can check… also have a look as seems the search icon changing in mobile and tablet view (I hope length issue will fix it).

[David]

Try:

.entry-content .search-field {
    width: 100%;
}

If you don’t want it overlapping the search icon then you can reduce the 100% width by a number of pixels like so:

.entry-content .search-field {
    width: calc(100% - 30px);
}

[Sourabh]

I think It’s already there in the code

[David]

The CSS i provided targets the search-field not the form

[Sourabh]

Okay I got it.. Thanks, I will adjust the value then…

The last question do we have any article on, how many CSS selectors are active on the GP theme, If I have to customize the same so that I can refer to the same…??

[David]

That would be a very complicated document 🙂

The best thing is to practice more with the browser developers tools.
Right click and inspect an element will display its Styles, you can see which selectors are being applied and which are common.

[Sourabh]

I tried, but it’s difficult to identify, Maybe I need a bit more practice. Thanks David.

[David]

Yeah – it gets easier the more you use Dev Tools… before you know it you’ll be a CSS Ninja 🙂

[Author]

Posts