[UPDATE: Custom Templates are now deprecated and may be phrased out in the future. Please take a look at Custom Layouts as a better alternative here: they can do everything Custom Templates can, plus you can define multiple content containers in your HTML templates]
Custom Templates are a special extension to MyRealPage website system that allows graphic designers to inject a highly custom, unique template structure, including custom HTML markup, CSS, javascript, images and resources; into either a website’s Master Template and/or individual Pages.
Custom Template support has been designed to allow you to:
Create an HTML template for a website on your computer using design tools of your choiceCreate and attach all necessary CSS, graphics, backgrounds using tools of your choiceTest the HTML locally from your local hard drive and make sure things workPackage the entire template into a ZIP archiveUpload and attach the packaged template to either the website's Master Template or any individual pageMaintain template packages on your computer using techniques you are used to; re-use same templates by adapting them to other websites and brands
What is a Custom Template?
A Custom Template is represented by a fixed folder structure, such as this:
As you can see from the screenshot above, the template package includes
Top level folder for the template package (e.g. "sample-template"). You can give this the name of your choice"_media/custom" folder structure: this folder structure needs to be named preciselyAll template resources, such as images, CSS, etc can be put into "_media/custom" directory.The main template file should be called "template.html" and should reside directly in the top level folder
When the template package is ready to be zipped, simply right-click on the top-level folder and select "Add to [your-template].zip" (e.g. WinRAR):
When the ZIP archive is created, if opened, it should look like below, with the top-level folder being the first and the only entry in it. (We thought that this archive structure will make it convenient for you to send and unpack the contents, without worrying about creating an intermediate folder):
What's special about template.html ?
The template.html file is a fully compliant HTML file that should be viewable in the browsers that it's designed to support. It contains <html>, <head>, and <body> sections. However, since this file is designed to be a template, a few little things need to be "tuned":
Insert <!-- BEGIN CONTENT --> and <!-- END CONTENT --> around the portion of the template which should be populated with content by individual pages. Please insert those comments verbatim: exactly in upper case and with only one space between the tags and comment body. Anything between these 2 comments, and including the comments, will be stripped by the import process and that portion of the HTML will be used for content. Make sure that the comments are located within a "container" element, such as <div>, for example; and that the HTML continues to be valid even with the comments and content between them stripped.Make sure that your <head> and <body> tags don't contain any attributes. Both of these opening tags should be inserted verbatim: no spaces, no attributes; but letter case is not important.Remove the <title> and any <meta> tags from the <head> portion of the template. Title and meta tags are generated dynamically or configured by the website owner, so don't leave any meta tags that would compete with them (however, you can leave meta tags that describe the copyright for example)Don't include any unnecessary javascript. It's likely that importing large javascript libraries may conflict with the website functionality. Check with us if you plan to do that. (MyRealPage websites currently include the prototype.js file; so be aware of it in case you include another javascript library which is incompatible with prototype. Prototype dependency may be eliminated in the future)Make sure that all your links and page references, as well as image and resource references in the template are relative.Keep in mind that when rendered, each MyRealPage webpage contains a <base> tag. This is important for "#" fragment references. If you test your template with a tag, please remove it before packaging.Consider that standard MyRealPage pages are displayed with HTML4 Strict DOCTYPE. If that DOCTYPE is not satisfactory, include your own in the template.html and it will be picked up by the import process.
How do I apply a Custom Template?
Once, the Custom Template has been packaged into a ZIP archive, you can then go to the "Manage Website" section in the Private Office. In the "Editing" section of the console, you can right click on the Master Template (or a regular page) and select "Custom Template":
If you are starting from scratch choose "Reset content layout to blank"If you want to preserve the current layout with the weblets, then choose "Preserve existing content layout"Choose to cancel current Theme if you would like to prevent the current Theme’s CSS from interfering with your work (recommended)Click "Select Custom Template" and navigate to it in the Web Drive. If you haven't uploaded it; you can upload the ZIP file to any location in your WebDriveOnce you select the ZIP archive to apply, the system will report whether the import succeeded or not; it will also display errors that occurred if any.If import succeeded, continue to double click on the Master Template (or page) to verify that the Custom Template works as expected.The content area of the template will contain a layout that can be edited by MyRealPage tools; including the ability to add weblets, etc. The content area will have the same capabilities as "regular" MyRealPage master templates and pages
Watch this video that describes the process:
And a few more things...
Now that you have gotten your feet wet with the Custom Templates, here are a few more things you may want to know:
Custom Templates on the Master Template will be applied to all pages that haven't been overwritten with a page-specific custom changes. To revert a page to the Master Template, in the Page Editor, click "More..." and "Apply Master Template".After the Custom Template is applied to the Master Template, each page can be still modified by changing the master layout and/or weblet assortment that belongs to the Master Template to make it different for an individual page. The Custom Template HTML code will still be used from the Master TemplateIf you want to create a distinct page that doesn't have the Master Template applied; create a Custom Template for that page (e.g. home page) and apply it directly to that page (e.g. index.html)If you applied a Custom Template and then configured the layout and the weblets, but later decide that your Custom Template needs more tweaking; you can change the Custom Template on your computer, re-zip it, re-upload it and re-apply the Custom Template but choose to KEEP the layout if you want your previous layout and weblets preserved.
Samples
sample-template.zip file is a very basic example of a Custom Template with no frills. Use it to get started:Sample Template (sample-template.zip)ocean-mist.zip is a sample template saved from one of the free WordPress themes using Save Complete plugin for Firefox (to enable saving background CSS images). It has been nominally cleaned up to abide by the requirements in this article but provides something of a real-world example:Ocean Mist Template (ocean-mist.zip)
0 comments:
Post a Comment