Docs

[Nico]

Happy to hear that.

Feel free to ask us again.

Have great day! 🙂

[Amma1]

Hi there,

I was wondering if there is a way that I can get the magnifying glass icon to be clickable so the user can click it instead of pressing enter?

Thanks

[Christopher]

Hi there,

Please update your code in _topbar.php file to :

<?php

// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================

?>

<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>

  <div class="x-topbar">
    <div class="x-topbar-inner x-container max width">
      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
      <?php endif; ?>
      <?php x_social_global(); ?>
      <form id="searchform" class="form-search">        
      <input type="text" id="s" class="search-query" name="s" placeholder="">                                    
    <button class="icon"><i class="x-icon-search" data-x-icon=""></i></button>
 </form>
    </div>
  </div>

<?php endif; ?>

You may require additional CSS after updating the code.

Hope it helps.

[Amma1]

Hi, This is partially working. It does create a button to press but the search seems to provide only results from the current page rather than from the whole site.

Also, the search icon has gone down onto the next line and i can’t seem to figure out how to get it back onto the same line?

Thanks

[Christopher]

Hi there,

Please update your code to :

<?php

// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================

?>

<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>

  <div class="x-topbar">
    <div class="x-topbar-inner x-container max width">
      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
      <?php endif; ?>
      <?php x_social_global(); ?>
      <form method="get" id="searchform" class="search-form" action="<?php bloginfo('home'); ?>/">
<input type="text" size="put_a_size_here" name="s" id="s" value=""/><button class="icon"><i class="x-icon-search" data-x-icon=""></i></button>
</form>
    </div>
  </div>

<?php endif; ?>

Hope it helps.

[Amma1]

Great, thanks!

I’m now trying to customize the results and I’m a little confused.

I’ve added this code to try and make it a little more readable as by default its extremely wide:

/* Search Results */
.x-main.full .hentry {
    max-width: 39%;
    display: inline-block;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 0px !important;
}
.x-main.full .entry-wrap {
    margin: 20px 0;
}

This can be seen in the first screenshot

The problem is that firstly, for some reason, the second entry appears slightly higher than the first, despite there being no margin above either??

Second, the styling from this seems to be affecting many other parts of the site! Like the second screen shot.

Thanks!

[Amma1]

I just realized that the first screenshot did not upload, I am re-uploading it here

[Rupok]

Hi there,

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Author]

Posts