A variety of topics

This topic contains 15 replies, has 2 voices, and was last updated by  NaturesLens 6 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #15974

    NaturesLens
    Participant

    How can I change it to close settings on click away from settings panel – it is bad UX to have this remain open over search results

    How can I change it to remove “search in comments” from the search options panel – I have comments globally disabled – this setting in the search options panel makes no sense – this is pretty common to not have comments enabled

    How can I add arrow so it looks like menus and search panel – I have a CSS arrow at the top of my menus and the search options panel – I cannot get it to apply to the main search panel – can you give any clue on what I should be applying this to? I am CSS competent, but this is causing issues – see screenshot

    How can I add a font awesome icon before each title according to Post Type – in the same way that I can add a cost for events (if the cost field is present)

    How can I change it to NOT display results when no search text – again this is bad UX – leave the text box empty, change a setting in the search options panel, it executes an empty term search

    CPT tagged with tag ‘Past Event’, this is entered into the Exclude terms by ID box, as 1575, but the event still appears in the search list – have I misunderstood how to exclude items from the search?

    Attachments:
    You must be logged in to view attached files.
    #15984

    Ernest Marcinko
    Keymaster

    Hi,

    1. It depends on the viewpoint, most users requested it to be this way by default. You can change that here: https://i.imgur.com/BHiyRkU.png
    The settings box (in hovering mode) automatically closes whenever a click is made to the body element, except when the origin is any of the search elements.
    Another possibility is to change the settings box z-index to be lower as the results box: https://i.imgur.com/onNUYA0.png

    2. Here: https://i.imgur.com/u3KcyhK.png
    Again, this depends on the viewpoint. A lot of users have requested this, it had been added.

    3 – 4. Will check on this a bit later on my test environment. I believe a few lines of custom CSS will most likely do the trick. I will have to test it first.

    5. Here, by changing the number of characters to trigger the search: https://i.imgur.com/S3fHYFC.png
    Again, most of users prefer it to execute an empty search with the settings changed. Initially it was set to 3, but due to the large number of requests, it was changed to 0.

    6. I believe that is not the box you are looking for. On the <span class=”code”>Advanced Options -> Exclude results</span> panel you can exclude CPT by categories/taxonomyies: Exclude CPT results by terms documentation

    I hope this helps!

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #15986

    NaturesLens
    Participant

    4 – do you want access to my test server to see the CSS i am using?

    5 – can it be an option to not run if there are less than X characters in the search box?

    6 – I thought I had done that – will check again

    #15994

    NaturesLens
    Participant

    1, 2, 5, – sorted thanks

    6 – worked your way – but got crowded – so I will set up a taxonomy of my own for this purpose – and then follow your guidelines above – and it will work but be neater

    So just some CSS to sort out

    #15996

    Ernest Marcinko
    Keymaster

    Okays.
    Access to the test environment would help a lot actually. I will have to see the exact icon code to use there, it would help with the arrow as well. Thanks!

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #16000

    NaturesLens
    Participant
    You cannot access this content.
    #16001

    NaturesLens
    Participant
    You cannot access this content.
    #16002

    Ernest Marcinko
    Keymaster

    Thanks, will look into this tomorrow, as I'm just leaving the office in a few minutes.

    Please note that customization requests are not part of the support process, however I will try to help you as much as I can with this. Most of it looks doable within reasonable time and with a few lines of code (possibly).

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #16003

    NaturesLens
    Participant

    Cheers – appreciated – I have tried my standard arrow CSS on a number of the containers – and cannot get it to look right – if you can just give me a pointer then that would be awesome

    #16008

    Ernest Marcinko
    Keymaster

    Hi!

    I think I may have found a solution for the CSS arrow, at least it seemingly works on my end.

    To make it work:
    1. Make sure to remove the custom CSS you added for the arrow, it will conflict with this solution. From the browser inspector, this should be removed:

    #ajaxsearchprores1_1.vertical:before 
    {
    content: ”;
    position: absolute;
    border-style: solid;
    border-width: 0 9px 9px;
    border-color: #cccccc transparent;
    display: block;
    width: 0;
    z-index: 0;
    top: -12px;
    left: 21px;
    }

    2. Add this custom CSS instead:

    .asp_r {
    	overflow: inherit !important;
    }
    
    .asp_r:after, .asp_r:before {
    	bottom: 100%;
    	left: 20%;
    	border: solid transparent;
    	content: " ";
    	height: 0;
    	width: 0;
    	position: absolute;
    	pointer-events: none;
    	z-index: 1;
    }
    
    .asp_r:after {
    	border-color: rgba(255, 255, 255, 0);
    	border-bottom-color: #fff;
    	border-width: 8px;
    	margin-left: -8px;
    }
    .asp_r:before {
    	border-color: rgba(204, 204, 204, 0);
    	border-bottom-color: #ccc;
    	border-width: 12px;
    	margin-left: -12px;
    }

    3. Clear your cache if you use any, then reload the page. It should look like this: https://i.imgur.com/xdrJgQJ.png

    Let me know how it goes. I'm not yet sure about the icons though, will try to figure out something for that as well.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #16017

    NaturesLens
    Participant

    Almost there – I still have slight positioning errors

    Attachments:
    You must be logged in to view attached files.
    #16019

    Ernest Marcinko
    Keymaster

    Hi,

    There appears to be another previous custom code that conflicts, make sure to remove that as well:

    #ajaxsearchprores1_1.vertical:after 
    {
    content: ”;
    position: absolute;
    border-style: solid;
    border-width: 0 7px 7px;
    border-color: #fff transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: -7px;
    left: 23px;
    }
    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #16030

    NaturesLens
    Participant

    All working now – looks great – for adding the icon before the event name – how about – in the class of the href, insert a sanitised name of the custom post type – that way I can identify it in CSS and use a :before statement against it

    Do you think that is a valid suggestion?

    #16031

    NaturesLens
    Participant

    Oh – and Happy Christmas!

    #16060

    Ernest Marcinko
    Keymaster

    I hope you had a Happy Christmas too 🙂

    That is exactly the solution what I was thinking of, but it is a bit difficult, as you will have to make changes to the result template files.
    Before starting, I suggest quickly reading through the Results templating knowledge base article. In short, it's a similar way of making direct and permanent changes to the HTML output of the results using a template system, similarly to WooCommerce.
    Basically, you need to make a new folder in your theme directory, then copy the result template files from the search plugin folder to that, where you can modify them – it is all explained in the article.

    Then, depending on the result layout you have, you open the corresponding template file. Let's say, you use the vertical layout, so then:
    – Open the vertical.php file
    – then scroll to line 49-53, which prints the result heading and the link elements, it looks like this:

    – Now, the $r variable holds the result object, and the $r->post_type holds the post type, if this is a post type result, otherwise it is not defined. My solution would be to add the asp_res_{post_type} class to each result, which will result in asp_res_post for posts ' asp_res_page for pages etc.. For that, change those lines to:

    Now, for each post type, the asp_res_{post_type} class will be added to the link element, so you can target them with CSS rules, like:

    a.asp_res_post::before {
        /* CSS rules for posts here */
    }
    
    a.asp_res_page::before {
        /* CSS rules for pages here */
    }

    That should help you get started with this.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


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

You must be logged in to reply to this topic.