This follows on from the previous article.
In the last article, I created a wine list with a graphic backdrop. In this article, I am going to use the same code to create a menu page with pairs of scrolls that will look like this:
I start by editing the page
And adding a new HTML feature
Go to the Settings
And give it a custom CSS class – in fact, I am going to give it two. Because it will be similar to the wine list, I will give it the winelist class first, then add a second class (note space is used as a separator) that will ‘tweak’ the winelist class.
I will then copy and paste the HTML content from my wine list page into the new menu HTML feature.
With that done, my next job is to update the winelist stylesheet to include the tweaks for foodmenu. I edit styleWineList.css and add overrides for foodmenu where necessary.
The wine list scroll was a fixed size, but I want the menu one to take up half the screen width. I am going to have multiple scrolls in rows of two.
I similarly override values for other classes and updated the text.
Sometimes it can be difficult to see why a class is not being displayed as you would like. This can be down to a value that is inherited from another class that yours is nested in. I had a problem where the bottom of my scroll just would not size correctly. It was due to an inherited max width value. To resolve it, I just over-rode this value.
That is it for this article, see you next time!