*Share your use case and provide as many details to support your idea as possible
hello, i’m making a test to see if we can use your menu for our site/restaurants
at the moment i’ve used the LITE Plan
you can see the test live here:
i see the widget picks up the main font style from my website, but i would like to use two different fonts in the menu, plus i would like to center some Names, Caption
i try to center Captions using the visual editor, but it doesn’t keep the edit, once you want to modify…
Basically what i would like is to try to match as much as possible our current menus
, which now are png files, you can see it here:
Hi @user3019! We are so glad that you’ve joined our Community. Welcome
Sure thing, we’ll be happy to help you. To do it, we need a bit more details.
Do you need to change the font for all the widget elements or for certain ones? And what fonts you’d like to have?
Also, if I understood you correctly, you’d like only some of the names and captions to be centered, but not all of them. In this case, could you please specify what names and captions should be centered?
Hi Max thanks for your prompt answer…
I want to propose your restaurant menu widget to the Hotel i work for.
so I’m making some tests, because i need to create a restaurant menu and a wine list, bar list ecc.
Of course, they need to have all the same style. and i would like to match the existing one, i showed in the link in the previous message.
i’ve noticed that the widget picks up the style from the page where it is embedded, I started to do some testing… adding some style class directly on my page,
this:
Just to explain, to have a more clear view of what i’m trying to achieve…
if you looked at our current list , we have
Since our list is in 2 languages Italian and English, there should be a difference between the two
Italian is in Serif - English is in sans-serif
Fonts: Montserrat and Cormorant, (both Google fonts)
elfsight restaurant menu editor has
NAMES CAPTION ITEMS
NAMES: option to change font family, size, center , letter spacing
CAPTIONS: two different font family in the same caption, plus the above.
i can make style directly on my page, but i need to know how the elements are named, to create a class for each
Here are requested CSS codes with the comments for what each block is needed. Also, our devs added some additional codes (e.g Hide Icons) that may be helpful in your use case.
thank you for the codes, but i don’t think is working well, not all the elements are aligned properly etc. i think is going to be tricky to have it as i need it.
maybe would be possible to change font for italian, in this image attached
so that only that kind section of text is centered, and all the rest is left-aligned
If you want to have Cormorant for Italian and Montserrat for English, you just need to change the font names in the codes:
/* Font Italy */
[class^='Description__DescriptionComponent-sc'] > *:first-child {
font-family: Cormorant;
}
/* Font English */
[class^='Description__DescriptionComponent-sc'] {
font-family: Montserrat;
}
As for the centering, I guess I could misunderstand you. Do I understand you correctly that you’d like to keep all menu categories centered and all the other elements to be left aligned:
