In part one of this series of posts we basically got everything ready so that we can start improving the EmployeeTraining Template to ensure that it works and looks good in our production environment. In this next post we are going to achieve the following:
Tweak the CSS template and lay everything out so that it’s ready to bring over into our new Master page.
Create the master page
Create page layouts for the content.
Tweaking the CSS template
Download the template from http://www.templatemo.com/preview/templatemo_305_golden_star and extract the contents. Rename the folder of the contents. In my case I’ve simply renamed it to Gym
Open the site in the Web development tool of your choice, then open the index.html page so begin editing.
So I need to make some changes to this page as it appears now:
Change the Logo to the RackerGym logo provided by our designer.
Change the Icons in the main body to more gym appropriate ones.
Remove the search box. I do not want people to be able to search for content here, my intention is to restrict what the users see on the site and do not wish them to find the behind the scenes content.
Swap out the images to gym based images
Remove the twitter option in the top right.
So with some CSS tweaks, as well as using the images provided by our designer, the main welcome page now looks like the following:
For the Gym design I will be using 3 page layouts. The first layout will be the Welcome page, which will include the JQuery based image slider included with the template.
The other 2 pages will be as follows, which are modified versions of the Index page and the news page from the template.
The first one is the Sub Page with a single content area:
The next will be a 2 section Sub page, which is basically the main Index page modified a bit:
I deliberately haven’t gone into detail about the css but I will make the html files available for download. It’s nothing special and not significantly modified from the original.
So the entire design will be based on a single master page and 3 page layouts. Next step in Part 3 is to start creating these pages in SharePoint designer.
Onto Part 3…