Closed cocarrig closed 1 year ago
For those that wish to retain the current format of the Nutrislice menu items after this feature update is released, they may use the following Custom CSS:
/* Remove List Styling */
UL.nutrislice-menu-items > LI {
list-style: none;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Collapse the items back into lines */
UL.nutrislice-menu-items > LI.item-food,
UL.nutrislice-menu-items > LI.item-extra-text
{
display: inline-block;
}
/* Add commas after each item */
UL.nutrislice-menu-items > LI.item-food:after {
content: ', ';
}
/* Suppress the comma from the item just prior to a Section Title */
UL.nutrislice-menu-items > LI.item-food:has(+ LI.section-title):after
{
display:none;
}
/* Suppress the comma from the very last item */
UL.nutrislice-menu-items > LI.item-food:last-child:after
{
display:none;
}
Otherwise, the expected new format will look something like the following:
Merged in @24c00cb and added to the queue for upcoming release to the live site.
Is there a way to just see the main meal choice? I used the custom css listed above and it still takes up way too much space as all the meals for each day are listed
Is there a way to just see the main meal choice? I used the custom css listed above and it still takes up way too much space as all the meals for each day are listed
Hello, @sharkeywolf - We can adjust the Custom CSS to do this, with the assumption that the first item in each listing is the main menu item. Please note that this may not be the case for every menu, depending on their specific configuration and use of the service. However, you may replace the above Custom CSS with the following definitions instead, and give it a try to see if it works for you:
/* Remove List Styling */
UL.nutrislice-menu-items > LI {
list-style: none;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* HIDE All the menu items by default */
UL.nutrislice-menu-items > LI.item-food,
UL.nutrislice-menu-items > LI.item-extra-text
{
display: none;
}
/* Override the hide to show the first item of each list */
UL.nutrislice-menu-items > .item-food:first-child {
display: inline-block;
}
using the Custom CSS above, it ends up showing only the list section headers, no actual menu food items. see attached picture with black background.
what i am hoping to accomplish is that all is shown is the first food item from the main entree section for every day of the week. in the second attached image, it would just show "Macaroni and Cheese"
what i am hoping to accomplish is that all is shown is the first food item from the main entree section for every day of the week. in the second attached image, it would just show "Macaroni and Cheese"
Hello, @sharkeywolf -- Sorry to hear that did not work for you. I have re-reviewed the CSS, and tested from a different school similar to what yours appears to be, and have another potential solution to use for your case.
If you replace the last CSS definition so that it reads like this, you may have better luck:
/* Override the hide to show the first food item after each section-title */
UL.nutrislice-menu-items > LI.section-title + LI.item-food {
display: inline-block;
}
If that still does not work, please use our support system to provide us with your DAKboard Username, and the name of the Screen in your account that is experiencing the issue, along with this Issue Number (#1895) and we can look into your specific case to determine how best to configure your Custom CSS. Here is the link to open a new ticket:
Description: To provide different options of view in nutrislice, providing the option to display bulleted or comma separated is desired. Please determine if the data can be parsed accordingly, then provide the option toggle for one or the other in the settings tab of the block (if comma separated is still desired):
Comma Separated image for example: