How to make some adjustments to the serach

Home Forums Product Support Forums Ajax Search Pro for WordPress Support How to make some adjustments to the serach

This topic contains 17 replies, has 2 voices, and was last updated by

 
Keymaster
3 years, 3 months ago.

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #19565

    Participant

    Hey,
    Firstly thanks for a great plugin.
    I have two questions.
    1)can i add a serach button next to the settings boxes
    2)how can i change the live results to be 100% of the content as right now it just stays the size of the search input
    as this is the css i changed to make go to 924px but wont this effect the way it looks on mobile?
    .horizontal, .wpdreams_asp_sc-1 .asp_an_fadeInDrop{width:924px !important;}

    this is the url:https://holidayxentral.com/test-home/

    #19573

    Hi,

    Thank you for your kind words!

    1. This will help you with that
    2. I suggest trying the results shortcode. It will make a ‘block’ wherever you place it, each search instance has one results shortcode generated. This container will always follow the width of the parent container, in this case, that should be the page width.

    Best,
    Ernest Marcinko

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


    #19574

    Participant

    Hey
    one last thing the arrows in the drop downs how can i change the background color i can find the class and the editor dont have a option to customize the color background of the arround box in the dropdown feild

    #19575

    Hi!

    Can you please be a bit more specific which part? You can send a screenshot if you want, I will try to construct a custom CSS if possible.

    Best,
    Ernest Marcinko

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


    #19576

    Participant

    You see in the serach settings the drop down arrows that point down that are in grey i need to change that background color
    see the attachment

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

    Hi,

    I get it now, thank you. Unfortunately that is handled by the browser, and in most cases it cannot be changed. Chrome allows some changes, in Firefox you can only hide it:

    .asp_select_label select {
       -moz-appearance: none;
    }

    Hopefully browsers will support changes to form elements in the future, that would be really nice.

    Best,
    Ernest Marcinko

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


    #19583

    Participant

    Hey wont this help

    input:not([type="button"]):not([type="submit"]):not([type="reset"])
    #19584

    Hi,

    No, because the arrow is not an input type, but part of the ‘select’ form element, which cannot be targeted via CSS.

    Best,
    Ernest Marcinko

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


    #19585

    Participant

    On my pervious serach form it has been targeted by css go to holidayxentral.com and have alook at my serach there you will see the arrow is a select feild and it has a back ground attached to them.
    are you 100% sure we cant change it

    #19586

    Participant
    You cannot access this content.
    #19587

    That could actually work. It will still hide the select arrow, but then add an ‘icon’ after the select box as an arrow replacement. It is a very clever solution. Don’t forget to include the icon set, if there was any used, that contains the

    '\f078'

    character.

    Best,
    Ernest Marcinko

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


    #19588

    Participant

    i will pull font awesome in on the page as a seprate.
    you can use the code in your knowledge base if you want to:)

    #19589

    Participant

    HEy,
    I have found a better solution for this when done with the css adjustments i will share it with you

    #19590

    Thank you, I will add it to the knowledge base then 🙂

    Best,
    Ernest Marcinko

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


    #19591

    Participant
    select::-ms-expand {
         display: none;
    }
     
    .asp_select_label:after {
      content: '>';
      font: 28px "Consolas", monospace;
      color: #999;
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
      right: 14px;
      /*Adjust for position however you want*/
      
      top: 5px;
      padding: 0 0 2px;
      border-bottom: none;
      /*left line */
      
      position: absolute;
      pointer-events: none;
    }
     
    .asp_select_label select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      /* Add some styling */
      
      display: block;
      width: 100%;
      max-width: 320px;
      height: 50px;
      float: right;
      margin: 5px 0px;
      padding: 0px 24px;
      font-size: 16px;
      line-height: 1.75;
      color: #333;
      background-color: #ffffff;
      background-image: none;
      border: 1px solid #cccccc;
      -ms-word-break: normal;
      word-break: normal;
    }

    This will change the arround on the select drop downs you can adjust the colors and the font and site.
    it is easier to use a symbol over font awesome

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

You must be logged in to reply to this topic.