Formatting live search results

[samuelepellizzari]

Hi Ernest,

I am experiencing some issues with html formatting in the live search result area.

With the previous version, I relied upon “style” attributes and it used to work (see screenshot 1). Now such attributes seem no longer to be honored (see screenshot 2).

Could you please help me out?

Many thanks,

Samuele

[Ernest Marcinko]

Hi,

Sure! Some attributes or attribute values might be marked as dangerous by the wp_kses_post hook, which is used to process the final content to avoid any XSS security threats.

Long story short, instead of using inline attributes, please use a class name and custom CSS instead:

<p class="myclassname">...</p>

And custom CSS:

.myclassname {
  margin-top: -5px;
  margin-bottom: 5px;
  font-style: italic;
  font-size: 0.8em;
}

This will do the trick 🙂

Also, notice that the closing P tag has a mistake, it’s </ip> and it should be </p>: https://i.imgur.com/NRkUbsg.png

[samuelepellizzari]

Hi Ernest,

Many thanks for the quick reply.

It makes perfect sense. Now, the class trick achieves the italic formatting, but I can’t get it to work for top and bottom margins. Please see the attached screenshots.

What am I missing?

Thanks again,

Samuele

[Ernest Marcinko]

Try with the important modifier, they might get overwritten with higher specificity CSS:

margin-top: -5px !important;

[samuelepellizzari]

Great! Now it works as intended.

Awesome support!

Thanks a lot,

Samuele

[Ernest Marcinko]

You are very welcome Samuele 🙂

If you don’t mind, I will close this topic soon and mark it as resolved, feel free to open another one if you have other questions or issues.

If you like the plugin and have not rated already, feel free to leave a rating on the wordpress plugin repository, it’s greatly appreciated.

[Author]

Posts