X Search modal related questions

[newmangreece]

Hi,
I need to translate the search label in the main search modal (Integrity stack) > Type and Press “enter” to Search < text
and also to remove the uppercase style from the input element (tt-upper css class).

Any help would be greatly appreciated.
Nick

[Prasant]

Hello @newmangreece,

Thanks for asking.

1. Please add following code in child theme function.php file to translate search text. Please replace TEXT GOES HERE from the code shared below.

    if ( ! function_exists( 'x_navbar_searchform_overlay' ) ) :
      function x_navbar_searchform_overlay() {
   
        if ( x_get_option( 'x_header_search_enable', '' ) == '1' ) :
   
          ?>
   
          <div class="x-searchform-overlay">
            <div class="x-searchform-overlay-inner">
              <div class="x-container-fluid max width">
                <form method="get" id="searchform" class="form-search center-text" action="<?php echo esc_url( home_url( '/' ) ); ?>">
                  <label for="s" class="cfc-h-tx tt-upper">{TEXT GOES HERE}</label>
                  <input type="text" id="s" class="search-query cfc-h-tx center-text tt-upper" name="s">
                </form>
              </div>
            </div>
          </div>
   
          <?php
   
        endif;
   
      }
      add_action( 'x_before_site_end', 'x_navbar_searchform_overlay' );
    endif;  
   

2. To remove upper case styling please add following CSS under X > Launch > Options > CSS:

.x-searchform-overlay .form-search label {text-transform: initial;}

To learn more about CSS text transform property, please refer following post. https://www.w3schools.com/cssref/pr_text_text-transform.asp

I am also sharing few resources that you can refer to download and set up child theme.

https://theme.co/apex/child-themes

Child Themes | Themeco Docs

Thanks.

[newmangreece]

Hi @Prasant,

Thank you for the detailed help on this. It work like a charm!

N.

[paul.r]

On behalf of my colleague, you’re welcome. Cheers!