Creating a Simple MojoPortal Website: Part 5

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!

If you have any questions or queries on this or similar topics, you are welcome to post a comment, ask a question in the Arvixe MojoPortal Forum or email me.

I suggest you also refer to the excellent MojoPortal documentation and videos.

Looking for quality mojoPortal Hosting? Look no further than Arvixe Web Hosting.

Tags: , , , , , , , , , , , , , , , , , , | Posted under MojoPortal | RSS 2.0

2 Comments on Creating a Simple MojoPortal Website: Part 5

  1. Elva Campese says:

    Hey can I quote some of the information found in this site if I reference you with a link back to your site?

Leave a Reply

Your email address will not be published. Required fields are marked *