Can the appearance of the Recipe Search Widget be modified?

Hi there,

This is only possible by adding custom CSS for the moment.
What is it you’d like to do exactly?

Kind regards,
Brecht

Hi,

I was hoping to change colors of the text/boxes. Also, the way the ingredients drop down is formatted it is causing problems on some mobile devices. When they view my blog, the alignment is thrown off due to how wide that one parricular drop down is. I would like to be able to have that dropdown there, though.

Thanks!

The styling of dropdowns actually depends on the browser and OS you’re using and it’s not so easy to style them consistently across devices and browsers.

The width depends on the values in the dropdown, but can be limited with some custom CSS. Could you give me a link to your website so I can take a look?

Sure. It’s yumsforthetum.net.

Try adding the following code on the Recipes > Settings > Custom Code page to the Public CSS:

.widget_wpurp_recipe_search_widget select { width: 200px; }

This should fix the width of the dropdowns to 200px (feel free to play around with this value).

Great, that worked perfectly. Thanks!

Hello — is there a CSS code that will stretch the recipe box to something wider than 600px? Thanks!

The easiest way to edit the recipe box is with the Template Editor in the Premium plugin: https://www.wpultimaterecipe.com/docs/template-editor
Custom CSS is possible as well if you disable the “Force CSS Style” setting on the Recipes > Settings > Recipe Template > Advanced page.

Hello — what if the recipe box is perfect and you don’t want to change anything else? There has to be an easier way to expand the width than creating a new template.

I do see some templates in the pro version (which we are using) but those, too, would require increasing the width.

You can just start from the default template and only increase that width. It’s just a matter of changing 1 variable. No need to create a brand new template.

Indeed that works. Thank you! Keep up the good work!