This follows on from the previous article.
In this article, I am going to use the MojoPortal inbuilt HTML module to create an eye-catching mixture of graphics and text, including a resizable graphic background.
On my website I want to add my wine list page. I want something a bit more jazzy than just bullet-point text with a couple of images next to it. No specific inbuilt module springs to mind as best for this job and I am not ready for a custom module just yet, so I am going to use the HTML module and CSS.
This is what it will eventually look like.
I lifted my HTML page from the book CSS the missing manual (2nd edition). You may have an HTML page that you would like to use in MojoPortal but which has formatting problems when copied into the HTML module. This article may help you resolve those issues. It is an account of how I got round the specific issues I had with my HTML page.
I start by logging in as admin and editing my empty wines page. I add a new HTML module and view the page.
Now, I am going to edit the settings of the HTML module.
I give it a custom CSS class. This gives me an easy way to make sure the CSS styling I am going to use will only affect this module.
I have an HTML page and style sheet I want to use, although I know if I just plug it in there will be some issues. So I am going to plug it in and tackle the issues one at a time. I use Microsoft Expressions to edit the text of the HTML page to turn it into my wine list.
I need to make the new styles available inside MojoPortal, so I will start by copying the style file to the skin directory of my current skin (if I decide I want to make it available to other skins it is a fairly easy change to make later).
I am now going to edit my style file to prefix all references to classes/types with .winelist to make sure the style changes do not affect anything other than my wine list module.
Also, in that directory is style.config, I need to edit that (which I do with Notepad++) to add in the new style file.
Now, I can copy and paste my HTML code into the HTML module
I open the file in Notepad++ and make a quick change to the style sheet name to make sure it matches to the one I used above, and then paste the HTML code
Make sure to be in source code mode when you paste in
If I click back out of source code mode, I can see my text but no graphics. But that is okay just now. I continue on by pressing Update.
I copy the directory of image files that the HTML references into the same directory as the style sheet.
Now it is starting to look better. But it is too wide for my MojoPortal module.
The problem here is the HTML was designed for a fixed size. MojoPortal is much more clever than that as it resizes to fit the available screen. Because the HTML page is housed inside the MojoPortal page, there is also some extra bordering that needs to be considered.
So I need to change this page from fixed size to ‘liquid’.
This is predominantly achieved from changes in the style sheet, but I do also need to move some blocks of text around in the HTML. There are two main objects in the HTML page that I am concerned with. The first is the scroll wine list on the left, and the second is the wordy description on the right.
I want to make the scroll a fixed width and have the wordy description take up the rest. To do this, I will give the scroll a ‘float’ attribute. Currently in the HTML file, the description is first and the list that goes in the scroll is after it. I need to swap these blocks around because the float attribute causes the text following it to fill in the remaining space. So I will do that first, and then address changes I need to make in the style sheet.
I now need to make some changes in the style sheet to my main and announcement objects to make the scroll (announcement) a fixed size and the main (description) changeable.
I also look for other occurrences of fixed page width. In this case, there is a wrapper object that has a set size of 960px so I change that to 98%.
Now my page is the right width, but I notice a couple of other issues. The underline graphic from the description looks wrong – it is going behind the scroll, but I want to keep it to the left, and my wine names are not wrapping around to fit on the scroll.
I will put the overflow: hidden attribute on the description to solve the first issue
As for the second issue, I will use max-width to stop the list text from being too wide
Finally, I will edit the settings of the HTML module to stop the title from being displayed
And edit the HTML content to take out the extra paragraphs which seem to get added automatically (I am not sure why this is or if it is a bug)
And now my wine list page is looking good!
It strikes me that this is the kind of thing that is suitable to turn into a custom module, so maybe I will have a go at that sometime.
That is it for this article, see you next time.