Okay
  Public Ticket #831803
Research function in "standard menu"
Closed

Comments

  • Guillaume started the conversation

    Hi !

    First, I would like to thank you for the quality of your theme.

    In the header "standard menu", there is no way to have a search field after the last menu item, like in "full background menu" : an icon "magnifying glass" would be nice, like a cart icon for woo. On click, a search field could open in the menu, or in a plain screen popup (like the full background menu). The search function is, in my opinion, a must that should be always accessible.

    I can do it myself, but any future theme's update will erase my work.

    So,

    • do you plan such an add in a future update ? IF yes, is it a question of weeks, months ?
    • or is there a way to localize my php theme modifications somewhere it can't be overwrote by a future update ?

    I use the last version of Kalium & can't give you my URL cause my website is local so far.

    Thanks for reading me & sorry for my english.

    Guillaume

  • [deleted] replied

    Hi Guillaume,

    I understand your issue and we have not implemented this functionality yet. However we are in the process of implementing this functionality, our designer has designed this page already:


    (view large version)

    To add the search functionality in the menu (hard fix) please add the following code:

    <style>
        .search-input-menu {
            float: right;
            margin-right: -15px;
            margin-left: 25px;
            z-index: 10000;
            position: relative;
            pointer-events: all;
        }
        
        .search-input-menu .search-input {
            position: absolute;
            right: -10px;
            top: -8px;
            width: 200px;
            visibility: hidden;
            opacity: 0;
            transform: scale(0);
            transform-origin: right center;
        }
        
        .input-visible.search-input-menu .search-input {
            opacity: 1;
            visibility: visible;
            transform: scale(1);
        }
        
        .search-input-menu .search-input input[type="submit"] {
            display: none;
        }
        
        .search-input-menu .open-search {
            font-size: 18px;
            color: #333;
        }
        
        .search-input-menu .open-search:after {
            display: none;
        }
    </style>
    <script type="text/javascript">
        jQuery( document ).ready( function( $ ) {
            $( ".search-input-menu a" ).on( 'click', function( ev ) {
                ev.preventDefault();
                var $parent = $( this ).parent();
                
                $parent.toggleClass( 'input-visible' );
                setTimeout( function() {
                    $parent.find( '.form-control' ).focus();
                }, 200 );
            } );
        } );
    </script>
    <div class="search-input-menu">
        
        <div class="search-input transall">
            <?php get_search_form( true ); ?>
        </div>
        
        <a href="#" class="open-search">
            <i class="fa fa-search"></i>
        </a>
    </div>

    And then add this code in: wp-content/themes/kalium/tpls/header-main.php on line 283 after "menu-bar" item:

    (view large version)

    This is what I can offer for you, for more you must utilize this code.


    As for site localization, the best way is to translate your site with Loco Translate and save your translations in wp-content/languages/themes/ folder. Here is how to translate theme strings (without needing to care about new theme updates that will override them):

    To translate or rename theme strings, you can do this via Loco Translate plugin. If you don't have it, please install and activate the plugin in your WordPress site.

    1. Then go to Loco Translate > Manage Translations
    2. Click "New Language" for the current active theme (if you didn't created it yet, otherwise ignore this step). On the new language page, choose these options – Screenshot
    3. After that you will be redirected to the editing screen for theme translations. Before you continue with your translations make sure the current language of your site is selected – Screenshot
    4. Follow these instructions to learn how to translate strings – Screenshot
    5. The changes will be applied immediately – Screenshot

    Note: Translation files will be saved to wp-content/themes/{theme-name}/languages folder or global directory of theme translations: wp-content/languages/themes/ (based on your choice). If you have saved your translations inside theme folder, always save a backup of *languages/* folder (inside the theme) when there is new theme update. After you update the theme (languages folder will be replaced with an empty folder), just move the backup files you previously saved to the same languages directory and your changes will still be applied.



  • Guillaume replied

    Hi Arlind,

    Thanks a lot for your time : your code works just fine. Specially thanks for given us the CSS classes - time saved.

    For the localization, the work was already done by my side. I meant (problem with my english...) how put the code somewhere it would not be overwrited by a future update of the theme (like custom CCS) ? Cause the code added in: wp-content/themes/kalium/tpls/header-main.php on line 283 will be erased by an update - no ?

    Regards,

    Guillaume

  • [deleted] replied

    Hi Guillaume,

    I am glad that it helped you.

    The best way to keep this change even when you update the theme is to install Kalium Child Theme and activate it.

    Then just copy the kalium/tpls/header-main.php to kalium-child/tpls/header-main.php and it will not be overwritten when the update is applied to Kalium. This is the best practice.

  • Guillaume replied

    Hi Arlind,

    Thanks.

    How install Kalium Child Theme and activate it ?

  • [deleted] replied

    Hi Guillaume,

    To install Kalium Child, simply go to Kalium download file  you got from Themeforest and then go to Appearance > Themes, click Upload for the new theme, and upload kalium-child.zip file inside TF download Kalium main file.