OK, so it’s time to create a homepage that doesn’t look like it was made by a seven year old and you have found a nice looking bootstrap theme that you would like to use for the job. There are a few tricks that can really smooth out this process.
- Download the theme, unzip it, and move the theme folder into your mysite folder.
- Rename the theme folder something short and simple like home.
- Open the folder and open the index.html file inside of the folder with your browser to make sure that you like it. If there is no index.html file open something else. If you like it, rename it to index.html.
- Return to your mysite folder and rename the current index.html file to something like old_index.html. There may be something in that file that you will need later.
- Return to the home folder (the theme folder) and drag it’s index.html file into the mysite folder. Open it with chrome again. This time it should look terrible because you have broken all of the links to css files, javascript files, and images if there are any.
- Re-establish those links. For example, it is highly likely that one of your css links reads something like
<link href=”css/bootstrap.min.css” rel=”stylesheet“>. Change it to read
<link href=”home/css/bootstrap.min.css” rel=”stylesheet“>. - Do the same for all of the css files and any javascript files as well.
<script src=”js/jquery.js“></script> should change to
<script src=”home/js/jquery.js“></script>. If one of your css or javascript files is linked to another site,
<link href=”http://font-awesome.com/css/font-awesome.min.css” rel=”stylesheet” type=”text/css“> for example, don’t worry about it. It’s fine. - Unless the theme comes with images that you want to keep, you should be done. If so, link those images the same way as you linked the js and css files. Test it with your browser. If everything looks as it should, you are ready to build a great looking home page!