Home Forums Weaver Xtreme Theme Slide Open Search with Short Code

Topic Resolution: Answered

This topic contains 17 replies, has 2 voices, and was last updated by  scrambler 3 months, 2 weeks ago.

Viewing 16 posts - 1 through 16 (of 18 total)
  • Author
    Posts
  • #58332
    Answered

    diprecipes
    Participant

    Is there any way to get the search short code to slide open vs being the expanded box on the latest versions of Extreme and Plus?

    I tried the instructions on the guide (http://guide.weavertheme.com/search-bar-advanced-customizations), but they don’t seem compatible with the latest versions.

     

    #58334

    scrambler
    Moderator

    Can you put the rules in and post a link to the page with the search so we can see what may have changed

    #58335

    diprecipes
    Participant

    I’m testing on my staging site that is password protected. What’s the best way to send you the info?

    #58336
    Private Reply

    diprecipes
    Participant
    This reply has been marked as private.
    #58337

    scrambler
    Moderator

    The rule is not there, so if you have placed it in the Theme Global Custom CSS rule box, something is breaking your CSS.

    That said, I also see a script error in the browser developer tools console which means something is also breaking the theme Script.

    Usually, this is indicative of some CSS / script optimizer being used, and these are famous to break things. Weaver already optimizes its CSS and scripts, and its scripts must be run in very specific order and time.

    If you are using any optimizer plugin, deactivate it, If not, one of your plugins may have an optimizer option, and deactivate that.

    Something name cloudways app may be responsible

    #58342

    diprecipes
    Participant

    Thanks Scrambler. I’ve deactivated all my plugins except the Weaver ones and still the same issue. Cloudways is my host.

    #58343

    scrambler
    Moderator

    The script error is gone, so that is one thing, but the custom CSS is still not there, and if I try to open the Weaver CSS file I get the following error

    Failed to open https://wordpress-132302-641014.cloudwaysapps.com/wp-content/uploads/weaverx-subthemes/style-weaverxt.css?ver=658

    So I am not sure what is going on.

    May be you need to speak to you host and ask why we are seeing this error, there may be a permission issue in your installation.

    @weaver, are you seeing anything I am not that would explain why the custom CSS is not there?

    Edit to weaver: forget question above, problem solved

    #58344

    diprecipes
    Participant

    That’s so weird. I can access the CSS file fine. I temporarily turned off password protection, could you please see if you can access now?

    #58345

    scrambler
    Moderator

    OK, I can open it now, but the custom CSS described in the article is not there.

    Can you paste here the content of Main options > Fonts & Custom > Custom CSS rule box

    #58346

    diprecipes
    Participant

    Custom CSS below (last 2 are the ones I copied from the 2nd tutorial)

    #primary-widget-area .weaver-social {text-align: center !important;}

    #read-more {
    background-color: #472F1D;
    color: #FFFFFF;
    }

    #header-widget-area
    {
    padding-left: 10%;
    }

    #custom_html-8
    {
    background-image: url(“https://www.diprecipecreations.com/wp-content/uploads/2019/01/dip-recipe-creations-header-logo800.png”);
    background-repeat: no-repeat;
    background-size: contain;
    min-height: 120px !important;
    }

    #custom_html-9
    {
    padding-top:3em;
    padding-right: 10%;
    }

    #header-search .search-form::before,
    .menu-search .search-form::before {
    font-weight: bolder !important;
    }

    .is-mobile #infobar_search
    {display: none;
    }

    .menu-primary .wvrx-menu-html
    {
    float: none;
    }

    .is-desktop .menu-search
    {
    margin-top: .9em;
    }

    .search-field {
    background-color:transparent;
    background-position:2px center;
    background-size:24px 24px;
    border:0;
    cursor:pointer;
    height:24px;
    margin:3px 0;
    padding:0 0 0 32px;
    position:relative;
    width:0;
    z-index:21;
    }
    .search-field:focus {
    background-color:#f0f0f0;
    border:2px solid #c3c0ab;
    cursor:text;
    outline:0;
    width:230px;
    }

    #58347

    scrambler
    Moderator

    Well, you did not insert the rule mentioned in the article…..

    The first rule that must be there is the one below
    #header-search .search-form .search-field,.header-search .search-form  .search-field,.menu-search .search-form  .search-field {
    background-color:#f0f0f0;border:2px solid #c3c0ab;cursor:text;outline:0;width:230px;
    }


    Using the values you want. but if you change any of the values, then you need to ALSO add the rule below (with same custom values) AFTER the one mentioned above. Both must be present. the first one keeps the box open, the second makes sure that your custom values are not changed with the default ones when in focus


    #header-search .search-form  .search-field:focus,.header-search .search-form  .search-field:focus,.menu-search .search-form  .search-field:focus {
    background-color:#f0f0f0;border:2px solid #c3c0ab;cursor:text;outline:0;width:230px;
    }

    So remove your two search-field rules, and use the one mentioned above instead. Once it works, you can tweak them

    #58357

    diprecipes
    Participant

    Apologies as I thought the css from the first section made the box stay open and wasn’t related.

    I’ve added the additional css but still no luck.

    I have the search added to the info bar (not with the short code) and that’s how I want the short code to work.

    #58359

    scrambler
    Moderator

    OK, I obviously got confused from the beginning

    When I opened your site, there was a search icon on the search bar, that slides open when you click on it, so I assumed you were trying to do the reverse and keep it opened.

    Re reading your first post, I now see you were actually trying to do the reverse on a search shortcode which is in the sidebar (I assume).

    So remove the rules I mentioned, put back the ones you had from the article (below). I added a selector so it does not interfere with your other header search

    .weaverx-plus-search .search-field {
    background-color:transparent;
    background-position:2px center;
    background-size:24px 24px;
    border:0;
    cursor:pointer;
    height:24px;
    margin:3px 0;
    padding:0 0 0 32px;
    position:relative;
    width:0;
    z-index:21;
    }
    .weaverx-plus-search .search-field:focus {
    background-color:#f0f0f0;
    border:2px solid #c3c0ab;
    cursor:text;
    outline:0;
    width:230px;
    }
    Then let us start again…
    Sorry
    #58360
    Best Answer

    scrambler
    Moderator

    This reply has been accepted as the best answer.

    Ok, So I ran a test on my side, and the article CSS seems to be missing the Icon.

    This is the CSS I have so far to make the search shortcode ([search]) display like the search in the header.

    Let me know if it works for you, and if not, post back with the rules below In place

    .weaverx-plus-search {overflow:hidden;}
    
    .weaverx-plus-search .search-form {
    position:absolute;
    right:10px;
    top:5px;
    }
    .weaverx-plus-search .search-form:before,.menu-search .search-form:before{
    position:absolute;
    top:5px;
    left:2px;
    font:normal 36px/1 Genericons!important;content:"\f400";
    speak:none;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    z-index:2000
    }
    .weaverx-plus-search .search-form .search-field,.menu-search .search-form .search-field{
    background-color:transparent;
    border:none;
    box-sizing:border-box;
    cursor:pointer;
    margin:3px 0px;
    padding:0 0 0 36px;
    position:relative;width:0
    }
    .weaverx-plus-search .search-form .search-field{
    height:39px;
    font-size:120%;
    z-index:2000
    }
    .weaverx-plus-search .search-field:focus {
    background-color:#f0f0f0;
    border:2px solid #c3c0ab;
    cursor:text;
    outline:0;
    width:230px;
    z-index:1999;
    }
    #58379

    diprecipes
    Participant

    Thanks! I removed the other CSS and add your latest from above. Search box slides open now, but is still missing the icon. It’s at the top right of the page.

    #58380

    scrambler
    Moderator

    The double quote in content:”\f400″; got messed up by the forum.

    Retype the double quote in the CSS rule box, it should be

    content:"\f400";

     

Viewing 16 posts - 1 through 16 (of 18 total)

You must be logged in to reply to this topic.