searchform sizes

[John Paul]

Hello all.  I've asked this before but never really got a definite answer.  Attached are 2 screenshots, one is the searchform.php and how it appears in WordPress (I'm using the Kloosterman Method with Astra Theme).  The other is how it appears in TNG v14.03 without WordPress.

Can anyone offer any insight as how to change the appearance in WP to closely resemble the appearance in TNG?

This one is straight TNG:

 

This one is how it appears in WP (Astra Theme):

[klooster]

Try this John Paul in WP customize --> additional css:

/* START TNG SEARCH HEIGHT BARS  */
td.fieldnameback.fieldname {
background-color: #343468 !important;
height: 43px ;
}
/* END TNG SEARCH HEIGHT BARS  */

/* START TNG SEARCH BUTTONS  */
input[type="button"], input[type="submit"], input[type="reset"], button {
background-color: #16123B !important;
color: #FFFFFF;
font-weight:bold;
}
/* END TNG SEARCH BUTTONS  */

[John Paul]

Thanks, Cees, it did change some.  The fields are better aligned and the height is better, but not where I'd like to see it at....

Also. the login and new user reg forms are 'big' like that....

I've added the menu items so you can have a look at my live test site https://joneshyman.org

 

[klooster]

Try:

td.fieldnameback.fieldname {
background-color: #343468 !important;
height: 43px !important;
}

[John Paul]

Already tried that, but no change...

[klooster]

I am at loss why the css is not working with you. I allways test it first and it (and the others css) works fine here.

When you put your css in WP-customize-additional css be sure to  PUBLISH it, then clear the cache and then reload the page

[John Paul]

14 hours ago, klooster said:

When you put your css in WP-customize-additional css be sure to  PUBLISH it, then clear the cache and then reload the page

Cees, that's what I do after any change to the css.

[KB71]

John Paul, 

You have padding in your intext fields, that might be why nothing is happening.

This is what it looks like when it is taken away 

 

So maybe add " padding:0!Important; " and see if that helps, if not you might have to add input[type=text] into your additional CSS but that might affect other places on your site. Hope that helps a bit

[John Paul]

KB, what file are you looking at?  Is it one of Astra's css files?

[KB71]

I was using the inspect function on Chrome to see what was needed to change it to the way you was wanting, it might be the main.min.css of Astra. 

I added this onto my additional CSS to test out and you will see that the text box expanded, my select box didn't expand like yours does. 

 

 

Here it is when i put it to 0

You can try that or look to change in the main.min.css to find it there, also need to make sure it doesn't mess up other text fields it might go to  

Hope it works out 

Rgds 

Kurt

[John Paul]

Kurt, thanks man.  It's looking a little better but not exactly where I want it yet.  Still playing around with the css....

[John Paul]

I think I got it where I'm ok with it now.  Thanks guys.