Vertical Center text in vertical search results/ Place holder text

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Vertical Center text in vertical search results/ Place holder text

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

 
Keymaster
3 years, 11 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #16799

    Participant

    1) I would like to vertically center the text in my vertical search results. Since I have a picture with only one line of text it would look nicer. Is there a CSS class or option anywhere to vertically center the text in search results?

    To view my search: https://www.fieldslre.com/brokers/

    2) I didn’t see an option to change the placeholder text for the search input field. I had to edit the css manually

    div.asp_m.asp_m_1 .probox .proinput input.orig::-moz-placeholder {
    color: #686868;
    font-weight: 300;
    }

    Did I miss an option somewhere or is this the best way.

    #16800

    Hi!

    1. In this case, I believe this is probably the best custom CSS to do it:

    .asp_content h3 {
        display: block !important;
        margin-top: 23px !important;
    }

    2. You mean changing the placeholder styling? It is inherited from the input styling (as set under the Theme Options -> Typography panel), but that custom CSS looks fine as well. Make sure to add the other browser alternatives as well:

    div.asp_m.asp_m_1 .probox .proinput input.orig::-webkit-input-placeholder {
      color: #686868;
      font-weight: 300;
    }
    
    div.asp_m.asp_m_1 .probox .proinput input.orig:focus:-ms-input-placeholder {
      color: #686868;
      font-weight: 300;
    }
    Best,
    Ernest Marcinko

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


    #16810

    Participant

    Hi Ernest:

    Thank you for your prompt reply. The vertical text helped as the text looks more centered. You may want to consider making an option to center the text in a future release.

    As for the placeholder text I had to go back to the original code I sent:

    div.asp_m.asp_m_1 .probox .proinput input.orig::-moz-placeholder {
    color: #686868;
    font-weight: 300;
    }
    I tried your code and the font was darker like the regular input style so I went with the original code I sent.

    I would highly recommend having a placeholder color option in your theme set up. In fact I am surprised that you don’t already because you gave so many style options to begin with. Every input box that I have seen on the internet has a lighter placeholder text then the one when typing.

    Thanks!

    -Steve

    #16812

    Hi Steve,

    I will definitely consider adding an option to style the placeholder separately. It simply never been requested so far 🙂

    What I meant with that custom CSS, is to use it with the one you already have, because that is constructed for mozilla type browsers only. The trhee rules together will cover all possible browser types:

    div.asp_m.asp_m_1 .probox .proinput input.orig::-webkit-input-placeholder {
      color: #686868;
      font-weight: 300;
    }
     
    div.asp_m.asp_m_1 .probox .proinput input.orig:focus:-ms-input-placeholder {
      color: #686868;
      font-weight: 300;
    }
    
    div.asp_m.asp_m_1 .probox .proinput input.orig::-moz-placeholder {
       color: #686868;
       font-weight: 300;
    }
    Best,
    Ernest Marcinko

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


    #16815

    Participant

    Hi Ernest:

    Thanks for the code! You’ve done a fantastic job on your plugin!

    -Steve

    #16816
    You cannot access this content. Best,
    Ernest Marcinko

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


Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.