Styling the classic search element

Is there a way of styling the classic search element? Specifically i want to:

  • Edit the “search” text in the element to something else and change the colour

  • Make the search box slightly larger in height

  • Make the search field transparent rather than white

is this doable?

Many thanks!

Hello There,

Thanks for posting in!

1.) The search text can be edited in the code I have given you in the previous thread: https://theme.co/apex/forum/t/how-to-hard-code-an-item-to-load-the-full-screen-search/41406/2
Find the Type and Press “enter” to Search and replace it with your own text.

2.) & 3.) You can make use of this custom css in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-searchform-overlay .form-search .search-query {
    height: 40px;
    font-size: 35px;
    background-color: transparent;
}

.x-searchform-overlay .form-search input:-webkit-autofill,
.x-searchform-overlay .form-search input:-webkit-autofill:hover, 
.x-searchform-overlay .form-search input:-webkit-autofill:focus{
    background-color: transparent !important;
}

Hope this helps.

Hi there for some reason this is not changing anything to my classic search element?

Hi There,

Sorry the code was mean for the search overlay. To resolve this thread, please do the following:

##1

Assuming that you have your child theme active and ready, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// SEARCHFORM.PHP
// -----------------------------------------------------------------------------
// Template for displaying search forms in X.
// =============================================================================

?>

<form method="get" id="searchform" class="form-search" action="<?php echo esc_url( home_url( '/' ) ); ?>">
  <label for="s" class="visually-hidden"><?php _e( 'Search', '__x__' ); ?></label>
  <input type="text" id="s" class="search-query" name="s" placeholder="<?php esc_attr_e( 'Search', '__x__' ); ?>" />
</form>

3] Save the file named as searchform.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/x-child/

##2

You can use this custom css instead:

.x-search-shortcode .form-search .search-query{
    font-size: 20px;
    background-color: transparent;
}

.x-search-shortcode .form-search:before {
    font-size: 18px;
    margin-bottom: -10px;
}
1 Like

Hi there, thank you the CSS worked a treat, I have uploaded the notepad file to my FTP like you said and replaced the words “search” with “test” but it is still saying “search” in the field, any ideas?

Thank you so much for your help

Hello There,

The given code when properly place in the child theme should have work.
Could you please provide WP access so that I can investigate?

Thanks.

Sure how can i confidentially send you my details?

Hey There,

You can post it in a secure note in your previous reply.
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thanks.

Hello There,

Your searchform.php file does not take effect because it is just a text file. Please rename it from searchform.php.txt into searchform.php only.

Please login to your ftp again and you can rename it from there.

1 Like

I feel like such a tool thank you so much all is fixed :slight_smile:

Don’t mention it.
We’re just happy being able to help you out.

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.