The marketplace for Premium Themes — & — Templates

2,206,261 People using Mojo
353,571 Downloaded items
2115 Marketplace items
2 Green Monsters

The Mojo Blog

Blog | Installing an HTML Template

Installing an HTML Template

Posted By Brady Nord


Installing a HTML/CSS Template:

Hi there and welcome to the very first tutorial from the Factory series. It’s an exciting time for all of us at the MOJO crew. We’ve been itching to get some premium like tutorials to our users for absolutely free. We’re starting with a very entry level tut for anyone looking to install an HTML template. We hope you enjoy!

1. To begin, it is very important to understand that you must either have your own server space or use someone else’s.  The server space can be purchased at many different places around the internet.  You need somewhere to put the files that you purchased so others can find them online.

2. After purchasing your item you will notice in your downloads tab under “My Account” that your item is there.  Click download.  You will receive a .zip file.

3. Locate the .zip file on your computer and double click on it to open it.

4. Depending on the item that you bought there will be a handful of files within the zip file.  You should see something that says “Help” or “Documentation” or something like that.  This is simply a help file for you.  It should have simple instruction explaining how to edit your template.  The next thing you should notice is a folder saying “HTML” or a handful of files with the extension labeled .html.  This is where all your content will be.  In addition to .html you should see one or multiple files labeled .css.  .css files are going to be the files that will tell the .html how to to be styled.  CSS is simply a way to take text, images, and other elements and change the look of them.  So this is very important to keep with the HTML or the HTML will not look how the design is meant to look.  Depending on the template you bought there could also be some files with .php or .js or something.  These are just more files that help your template function how it is supposed to function.  If you are a beginner do not worry about looking within or editing these files as this will look very foreign to you.

5. Now that we have identified the files within the .zip folder, I will explain how to take these files and put them on your server.  I am assuming that you have a server already at this point.  (If you dont read our tutorial on how to set up your server here).  First off, you need to have a FTP client in order to access your server.  There are many different FTP client’s out there that are free.  For free FTP I highly recommend Cyberduck.  (You can download that here). For paid I would highly recommend Transmit from Panic. (You can download that here).

5.1 Once your choosen FTP client is open you need to login. For this example, we will be using Cyberduck.  Click on open connection and input your server settings.  You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.  Click connect.

6. Now that you have logged in you will see a handful of folders and files that will come already on your server.  If you have setup your domain on the cpanel then you will see your domain name among the files and folders on Cyberduck.  (If you have not setup your cpanel there will be a tutorial coming soon)  If you don’t see your domain go ahead and use the search feature and locate it.

7. Once you have located the domain folder on the FTP, double click to open it.  Once again, you should see a handful of files within the folder.  You should see files called 400,401,403, etc.  Just leave all these there, it’s ok, they are supposed to be there.

8. Go back to your folder on your computer where the template you purchased is.  You are going to want to click and drag every file that you have labeled .html, .css, .php, .js into your FTP client.  This will upload all those items to the server.  Once again make sure you are within the folder of your domain when you do this.

9. Once these files are done uploading, lets stop right here and do a quick test.  Open up a browser and type in your URL (domain name).  If your site pulls up this is good.  And yes, everything is ok even though it might not look how the live demo on MOJO Themes made it look.  You have to understand that sellers dress up their live demo’s with great images to make the templates look really good.  Now this is your time to do the same.

9.1 If the site does not pull up when you type in the domain there could be a couple of things wrong.  Make sure and double check that you uploaded all the files into the folder titled after your domain name.  Make sure you have all the files in there.  Chances are you should see a file called index.html, about.html, contact.html, etc.  and of course your .css files.  Try clicking refresh on the FTP client and then go to your browser again and refresh your screen.

10. Great, now that your site is uploaded it is time to put the information that you want in it.  Make it your own.  If you do not have a HTML editor on your computer then you are going to have to download one.  There are many free one’s and many even better not free editors.  Feel free to choose whatever software you like the best.  (You can simply search html editors or free html editors.  Some suggestions are Coda or Textmate)

11. Open the editor.  Now we are going to attempt to edit the HTML so you can make it look like your own.  Begin by importing your index.html file into your editor.  All I can say is have patience when beginning this adventure.  I can remember first looking at HTML markup and thinking this is impossible to understand.  Chances are your template will have some sort of guides for you.  To keep this tutorial simple enough I will give you some guides and keywords to look for when trying to edit your files.  (Keep your eyes out for another tutorial on how to edit your HTML template)

What to look for:

<title>…</title> : This tag is going to give a title to your site.  This is not title that will show up on your site when you look at it in the browser.  This is the title that the search engines are going to read.  Feel free to title it to whatever your site is titled.

<a href=”…”>…</a> :  This tag is your links.  You need to insert the URL of where you want to the link to go to within the quotation marks. Make sure and include the http like:

<img src=”…” /> : This tag is for your images.  If you look on your FTP client, you should see a folder called images under your domain.  Any and all images that you want on your site need to be uploaded into this folder.  Note: most of these templates will not resize your images to fit the dimensions of the image place holder.  What thismeans for you is that when you upload an image for your site you need to make sure the image is the same dimensions as the place holder where you plan on putting it.  Once the image is uploaded into your images folder then you will go back to your HTML editor and input the image between the quotation marks.  The proper way to insert the image is as such: “images/example.jpg” .  This is just an example.  What this is saying is that within the images folder there is an image titled example.jpg.  You are telling the browser to get that image.  Make sure and use the correct extension: .png, .jpg, etc.

H1, H2, H3, H4, H5 : These are different sizes for your headings.  H1 will be the largest and H5 will be the smallest.  The search engines will readthese headings in order of importance.  The search engines will take your H1 as the most important text.  Do not use H1 more than once.  You should use your H tags in subsequent order so that the H1 is at the top of your page and the smaller tags are at the bottom.

<p>…</p> :  This is where you will input all your textual content.  The <p> stands for paragraph.  Feel free to play around with the length of your content.

Don’t forget:

  • Any time you use HTML you must always make sure you close the tags.  For example, you cannot have <p> this is example text.  If you leave the tag open like that you will have errors.  The correct way should be <p> this is example text </p>.  This applies to any and all HTML.
  • There is a lot more coding that you will see throughout your pages.  As a beginner, I would highly recommend just editing the lines listed above.
  • Always keep a copy of the original file available!  I am sure you will break something in your editing process and there isn’t a reset button.  Keep that original copy on hand so that when you start getting adventurous you always have something to come back to.

12. Now that you have edited the code as you like and inserted the content it is time to upload the new version of the file up to the server.  Save the file as the same name as it is on the FTP.  (index.html, about.html, etc) Once saved, upload the new version up to the FTP.  Go back to your browser and click refresh.  Don’t forget to wait until the FTP is done uploading or else you won’t see any changes.

13. Editing CSS can be very tricky until you get the hang of it.  I would highly recommend not editing the CSS if you have not used it before.  For those that feel like giving it a shot you can go ahead and open the style.css file in your same editor.  Once again, I strongly encourage you to keep the original file separate for future access.  CSS can be very touchy and will break when not coded properly.  But at the same time as long as you keep an original copy safe feel free to learn how it works.

Thats it! I wish everyone good luck in installing their template.  Please feel free to contribute below if you feel I have missed an important step or feel free to recommend other software.

5 Responses

You must be logged in to post a comment.