Vertical Center text in vertical search results/ Place holder text

[Steven MaasParticipant]

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.

[Ernest MarcinkoKeymaster]

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 :)

[Steven MaasParticipant]

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

[Ernest MarcinkoKeymaster]

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 :)

[Steven MaasParticipant]

Hi Ernest:

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

-Steve

[Ernest MarcinkoKeymaster]

You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts