Hi! Other posts have shown you how to install MojoPortal and setup local and remote working environments. In this post, I will show you how I start off a new website, including selecting a skin and creating a look and feel for the home page – using only free to download software. There may be quicker ways to get things done, but this way is great for helping you see how things work. This is where I will get today:
The standard installed version of MojoPortal has plenty to offer, but best of all for me is the fact that I know there is always plenty of scope by adding custom code at a later date if I need to. So, I feel confident that any time and effort I spend learning MojoPortal, I will be able to use even if my customers requirements become more complex. But for now, creating a few sites using the standard installation is a great way to get to know MojoPortal. When I start a new site, I use WebMatrix to create the new website in the first place.
Follow the wizard through. It will download a new copy of MojoPortal and install it for you. Note that this will be the latest version, so it may differ from the last one you installed. When you are requested to enter database user names, you can either use the same user name as you have used before (in which case you must enter the existing password) or you can use a new database username and password. On my local sites, I tend to use the same database username for all sites. I also enter the same details for database administrator as on previous sites. When it is all installed, I click on the URL link in WebMatrix to open up the browser.
That shows me its running all the installation scripts. I scroll to the bottom where I can see confirmation of what has been installed and click the link to open the home page.
So now I have gotten the default installation as the starting point for my new site. Starting with the default installation on your local machine, sign in as administrator (default login details are email@example.com password=admin). From the Administrator menu, select Admin.
Select Site Settings
I set up my site settings. I use the skin preview link to look through the available skins and pick one. I set the site email address now. I am using the imaginary Clifftops Restaurant for this example, but I will treat it in the same way as a new customer site. I will initially set it up on a sub-domain. This is something that is really easy to do on Arvixe. I will set it up as clifftops.westernisles.biz and also setup a no-reply email account for that subdomain. The customer will be able to view their site at www.clifftops.westernisles.biz and make sure they are happy with it before it goes live to the permanent URL. I can now save this information.
I want to replace the default text with some of my own content so I press the edit icon (some skins show an icon, some show the word edit)
In the HTML editor, I delete all the default stuff then add a table of 5 columns and 2 rows.
I am going to put in some photos for visual impact. Dreamstime has some stock photos that I can use at this stage, with a view to replacing them with real ones when available. I am using FastStone image viewer (free download) to resize my images. I resize them all to 150 pixels wide and create a new directory called images in the directory structure of my local website, under My Web Sites\Restaurant\Data\Sites\1, to put them in. Back in my website, I put my cursor in the first cell of my table and press the picture icon. In the image properties dialog, I press the browse button and browse for and select my image. I set the height and width and press OK.
I do that for the other 4 columns. In the second row, I put a short description, and then save. I decide the WELCOME title doesn’t look right, so I want to stop that from displaying. I hit the settings icon beside it to open the settings page.
I also want to change the picture at the top. I won’t go into detail of this, as when I change it, I realize it is made up from 2 segments, a picture and a border. This is not what I want.
I decide to change skins. In the images section of my new skin, I can see the images being used. I rename header.jpg and replace it with my image, which I have renamed header.jpg. I also resize my image to be a similar size. I just press F5 to refresh my browser and see the effects of my changes. When I save that, I see that this skin has a person superimposed on the background. I do not want that person. I may put my client on it later, but for now, I will just rename the superimposed image so it is not shown.
With this website starting to take shape, it is time to put down the tools for now.
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.