Creating Custom Website Templates

If you are interested in customizing website templates on our software, follow the steps below:

1. Choose a Template in the Website Design Area.

Anytime you want to customize a website or landing page template, you will need to search through our templates (Website > Design Tab) to find one that closely resembles the website you are looking to create. It is much easier to use one of our exsiting templates to create a website, as opposed to having to create everything from scratch (although this can be done once you get familiar with our CSS/JS/HTML).

- Go to Website > Design, then "Browse Templates", once you have the templates open, choose one you want to start working with and right click on the thumbnail to "Open Image in New Tab" (screen shot below). In this example we will choose "Professional" to right click on. We do this so that we can get the .html file on our servers for this particular template.

- When you right click on the image to open it in a new tab, you will see the thumbnail for this template is saved as the actual file number. If you were to right click on the "Professional" you will see the URL for the image is "http://app.richcrm.com.au/app2/websiteScreenshots/149.png" the important thing to take note of here is the bolded 149.

- Now that you have the template number you use this link: "http://app.richcrm.com.au/fansites/fansite###.html", to get the .html file, just replace the bolded number with the bolded part in the second link. 

- Once you get to this new page with the template location, something like: http://app.richcrm.com.au/fansites/fansite126.html, you can then right click anywhere and "Save As". Then when the file saves, just make sure to name the file, and save it as a ".html". Now you will be ready to start editing the template.


2. Open the Template

On your computer, you will now have the .html file saved and ready for you to edit. You will need an html editor, or something like the following (click to download): TextPad, Sublime Text (what the cool people use!), NotePad+, or just your generic text editors that come with your computer. 

- You will notice right away that our templates are broken up into 3 parts. The templates contain our javascript references which comply with our software, the <head> area for all CSS, and finally followed by our HTML <body> area that refences the CSS above.

- In order for the templates to work with our system you will need to keep the scripts and most placeholders (something like <!-- Teamname -->) that you will see as part of the template. You can customize these placeholders by moving them around or deleting them altogether, but just make sure you are changing/removing things you know you will for sure not use. See #4 below about editing templates and how to go about determining what to change around.

- Within these templates you will also see a bunch of classes that might look unfamiliar to you that reference areas of our software. For a complete list of these, you can go here: http://app.richcrm.com.au/wiki.pl?a=4&t=47. These can be removed or changed within the CSS, just remember to refer to #4 below to verify that what you want to delete is correct.


3. Applying the Template and Viewing Changes

When you begin editing and working on your templates you will notice it is a lot of trial and error (changing classes around, or the styles, etc.), and that you will be using your browser's "Dev Tools" quite a bit. Since there is no live preview set up within our software while customizing templates, you will need to keep uploading the file into the Media Library (to upload or overwrite it) everytime you make a change to your template in your text editior. Follow the steps below everytime you make edits or changes.

- As a start, upload your .html file into the Media Library under the "Files Tab" (Note: It's always best to stay as organized as possible, so I would create a Folder into your Media Library called "Website Name Website" this way you can keep your images in the Images Tab, and your HTML Templates in the Fiels Tab.). Even if you have not made any changes to your template yet, you will still need to upload the file into the Library so that you can see how it looks by default. 

- In either your Website > Design area (select the Custom Template URL at the bottom of the drop down), or in your Pages area; apply this template URL to this page. See screen shots below. It's always best to just keep going back to the Media Library and overwriting the template file with any changes you make, that way you don't have to continually change the URL in your website builder.

- Once your templates are applied to the entire website or a particular page, you will need to open the page in your browser by using "View Website" or "Test Link" buttons. You will now have a preview of your website and how it looks based on your changes or template that you are working on in your text editor. Again, since there is no live preview for the HTML editiors and our software, you will need to continually upload the .html file and overwrite it in the Media Library to see your changes (Note: For this it is sometimes best to open your website group and Media Library in two different browsers or in an Incognito Window, that way you can quickly load these templates when you make changes. It's also a way to work within the software in two tabs or browsers if you are using other features).


4. Editing the Template and Using Dev Tools

The easiest way to view areas of the template and the CSS/HTML they have applied to them, is by using Dev Tools in either Google Chrome, Safari, or Firefox. If you are currently looking at your loaded template and want to change something, like a background image, changing the navigation size, etc., etc., you can right click on these areas on your template and "Inspect Element". In most browsers this will bring up the CSS/HTML information for what you are currently looking at, and even allow you to make "LIVE" changes to what you are looking at (if you are not familiar with "Dev Tools" I would also highly recommend getting use to these as well). Although these changes are not automatically updated on your template - if you were to change styles or information using the Dev Tools to be what you wanted, you can then apply the exact CSS or HTML to the template in your text editior as you did in the Dev Tools area. 

- As an example, if we are currently working on a custom version of the "Professinal" template that we had downloaded earlier, you can right click on the different areas of the website to get the CSS/HTML information and make "live" changes in the Dev Tools for you to change in your text editor. In the example below we right clicked on the Navigation Bar, you will then see all the differnet classes and styles that pop up on the bottom right hand side being applied to the ".control_panel" in the Inspect Element/Dev Tools. Here is where you can make "Live" changes to the site to see what it will look like as if you were to make those changes to the template, then just make sure and apply them to your template in the text editor.

- Once you like what you see for that particular area that you are currently working on (the .control_panel for example) open the template that you are working on in your text editior and find this CSS or HTML to edit it. See screen shot below in that we did a search for ".control_panel" in the CSS and now we can make the changes to the template. 

- Repeat step #3 above, and go back to your Media Library to upload the file again to be able to see these new changes you've made.


5. Finished and Review

- If you have any questions at all, do not hesistate to contact ryan@greenrope.com for any help on these steps.

- The most important thing is to just keep using the Dev Tools to scroll through the areas of your website to make "live" changes before making them to your template, that way you can see the results before applying them.

- If you want to see a list of websites that have been made using this system, go to - http://app.richcrm.com.au/wiki.pl?a=4&t=130