How To Customize Templates In MyRealPage
MyRealPage.com gives realtors access to MLS Listings and Tools that fully integrate into an easy-to-set-up personalized site. A wide variety of built-in templates are available or you can build you own. Let's learn how!
MyRealPage's Next-Gen Layouts can do everything that the Custom Templates can, but very importantly, they can also be configured to give the end user full control over the content IN ANY PART of their custom pages. This means that you can create your Next-Gen Layouts using whatever layout techniques you choose, mock these up on your own computer, then identify which areas you would like to carry our weblets, then zip it all up and apply it to either a master template or an individual page on your website. At all times, your Next-Gen Layout based templates are fully functional standalone on your own computer.
Design The HTML & CSS
The first thing you'll need to do is write the HTML and CSS. Design your code as you would for any normal Website. When complete, you need to show the MyRealPage CMS where to inject their "Weblets". Weblets are tools offered by MyRealPage that allow you to add editable areas (text, images, video etc), display realtor listings & property search forms, build image banners and much more. All you need to do is add special IDs to your HTML. These ID's tell MyRealPage a weblet can be installed in that location. Here are some example IDs:
- mrp-header
- mrp-footer
- mrp-sidebar
- mrp-sidebar2
- content-well
- mrp-container1
- mrp-container2
- …
- mrp-container10
The ID "content-well" is especially important. This ID shows MyRealPage where to add the main body text for any given page. The other IDs are optional. Here is some sample HTML with MyRealPage weblet IDs.
<html>
<head>
<title>MyRealPage Template</title>
<link rel="stylesheet" type="text/css" href="_media/custom/custom.css" />
</head>
<body>
<div class="wrapper>
<div id="mrp-header"></div>
<div class="content">
<div id="mrp-sidebar">
<div id="mrp-container1"></div>
<div id="mrp-container2"></div>
</div>
<div id="content-well"></div>
</div>
<div id="mrp-footer"></div>
</div>
</body>
</html>
In the above example, we have defined 6 areas where we can add MyRealPage weblets. We are now able to install weblets in the header, footer, content area and sidebar. It is important to note that all MRP IDs need unique names and the "mrp-container" IDs need to start at 1, not 0.
Once you have your HTML and CSS ready, it's time to build the template package.
Prepare The Template File Structure
Your MyRealPage custom template package needs to have a specific file/folder structure. Use the following guidelines when preparing your package.
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 precisely
- All 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
You can download a sample Next-Gen Layout ZIP file here.
Build the Template ZIP Package
When your template package is ready to be zipped, simply right-click on the top-level folder and select "Add to [your-template].zip" (I use WinRAR for that). If you don't use WinRAR, use the archiving program of your choice to compress and ZIP the top level folder. The name of the ZIP file must be EXACTLY the same as the top-level folder inside it. This is important! Using the above screenshot as an example, the ZIP file must be named "sample-template.zip". "Sample Template.zip" or "myMRPpackage.zip" would not work.
Now it's time to upload your package to MyRealPage. Head on over to http://private-office.myrealpage.com and log in to your dashboard.
Upload Your Package to MyRealPage
From the main menu, click on All Web Pages.
You will now be in the Edit Website section of the MyRealPage CMS. In the sidebar menu, select the appropriate site to edit in the "currently managing" drop-down menu. Below that you will see a Pages section. Click the Master Template link.
At the top of this page, you will see two tabs "Live" and "Staging". The staging area is where you can make changes to your site without affecting the live version. This is good for testing new code and templates.
Click the Edit Settings button. Next, expand the Custom Layout menu. This is where you will find the Images & Files Manager and template uploader. Review the steps outlined in the video above to learn how to upload your template package.
Once your package is installed, you will be able to add MRP weblets to the defined areas and preview the staging version of your Website. The package you uploaded will apply to all pages unless specified otherwise. You can also apply custom templates to specific pages instead of the Master Template. To do this, simply click on the page of choice from the All Pages section, choose the Staging tab and repeat the steps above. This is handy if you want you home page to have a different look or functionality than that of your interior pages.
Editing Your Uploaded Template
You may find that once your package has been uploaded, you might want to make additional changes to the HTML or CSS. You can do this easily without having to upload a new package every time a change is required (I learned this the hard way!).
To edit your HTML, do the following:
- Load the Master Template
- Switch to the Staging area
- Click on Edit Layout, then Edit Layout HTML
- A code editor will load that will allow you to make changes
To edit your CSS, Images or Scripts, do the following:
- From the top menu, choose Images & Files
- Select the custom folder. A list of your media will be displayed in the main window
- Right click on any CSS or Javascript file and choose Edit text file...
- A code editor will load that will allow you to make changes
Please note that the above guide is current as of the date of this article. As MyRealPage evolves, certain sections or features may change. Contact their Support Team for assistance if required. Good luck!
By Robert Valcourt