Search button position

Ivory Search Forums Support Search button position

Viewing 2 reply threads

You must be logged in to create new topic or reply to the topic.

  • Author
    Posts
    • #10707
      MEGAXPEED
      Participant
      • Topics: 1
      • Replies: 0

      Hi, one of you know how to change Search Button Position?

      Im looking for make a search bar that it look same as the index file I share. I have managed to put the same styles, but the search button is out of position :/, thanks.

      Custom CSS: The search bar i have, put it in your default search bar 4 try 🙂

      http://democasur.sasoftco.com : The search bar i wish

      My custom CSS in Ivory wordpress plugin:
      ————————————————————
      .is-form-style.is-form-style-3 input.is-search-input {
      position: relative;
      z-index: 3;
      width: 100%;
      height: 42px!important;
      background: #fff;
      font-family: Work Sans, sans-serif;
      letter-spacing: 0;
      color: #4b4b4b;
      padding-left: 1.2rem;
      padding-right: 45px;
      border-radius: 8px;
      background-size: 35px 35px;
      }

      .is-form-style input.is-search-input {
      margin: 0;
      outline: 0!important;
      font-size: 16px!important;
      min-height: 0;
      line-height: 1;
      border: solid 1px #bbb!important;
      box-sizing: border-box;
      outline: none;
      padding: 1px 2px;
      }

      .is-form-id-179 .is-search-submit:hover{
      color: #ffffff !important;
      background-color: #ffffff!important;
      }

      .is-form-id-179 .is-search-icon {
      color: #ffffff !important;
      background-color: #3366cc!important;
      }

      .is-form-id-179 .is-search-submit {
      color: #ffffff !important;
      background-color: #ffffff!important;
      }

      .is-form-style input.is-search-submit, .is-search-icon {
      display: block!important;
      position: absolute;
      top: 1px;
      right: -1px;
      z-index: 4;
      color: #666;
      background: #ededed;
      box-shadow: none!important;
      outline: 0;
      margin: 0;
      font-size: 14px!important;
      border: 1px solid #ccc;
      border-radius: 50%;
      line-height: 1;
      height: 36px;
      text-transform: capitalize;
      vertical-align: middle;
      -webkit-transition: background-color .1s ease-in-out;
      -moz-transition: background-color .1s ease-in-out;
      -o-transition: background-color .1s ease-in-out;
      transition: background-color .1s ease-in-out;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      }

      .is-search-icon {
      width: 36px;
      padding-top: 6px!important;
      }

      .is-form-style button.is-search-submit {
      background: 0 0;
      border: 0;
      box-shadow: none!important;
      opacity: 1;
      padding: 0!important;
      margin: 0;
      line-height: 0;
      outline: none;
      vertical-align: middle;
      width: 36px;
      height: 36px;
      }
      ————————————————————

      Thanks you all, im rookie but im happy to be here, greetigs!

    • #10708
      Ivory Search
      Keymaster
      • Topics: 0
      • Replies: 1,735

      I hope you are well today and thank you for your question.

      I am not sure I understood your question properly so could you please describe it a bit more?

      Also, I don’t see search bar on your shared website displayed by the Ivory Search plugin.

      Best regards,
      Ivory Search Support

    • #17183
      Yerko Browton
      Participant
      • Topics: 0
      • Replies: 1

      Bro me salvaste, no encontraba las clases. al final lo deje así:

      .is-form-style.is-form-style-3 input.is-search-input {
      border-radius: 40px 0 0 40px;
      }

      .is-form-style input.is-search-input {
      text-align: center;
      font-size: 14px!important;
      font-weight: 600;
      border: solid 0px #bbb!important;
      }

      .is-form-style input.is-search-submit, .is-search-icon {
      border-radius: 0 40px 40px 0;
      border: solid 0px;
      }

      Buscadores

      Saludos!

      Attachments:
      You must be logged in to view attached files.
Viewing 2 reply threads

You must be logged in to create new topic or reply to the topic.