{"id":41762,"date":"2016-05-10T14:06:34","date_gmt":"2016-05-10T19:06:34","guid":{"rendered":"https:\/\/blog.cpanel.com\/?p=41762"},"modified":"2016-05-10T14:06:34","modified_gmt":"2016-05-10T19:06:34","slug":"quick-start-guide-to-site-publisher-templates-for-hosting-providers-and-resellers","status":"publish","type":"post","link":"https:\/\/devel.www.cpanel.net\/blog\/products\/quick-start-guide-to-site-publisher-templates-for-hosting-providers-and-resellers\/","title":{"rendered":"Quick Start Guide to Site Publisher Templates | For Hosting Providers and Resellers"},"content":{"rendered":"
Many end-users are looking for a simple way of getting a functional site online as quickly as possible. In our latest release we introduced Site Publisher, a tool that can give your customers a live site in just a few clicks.\u00a0<\/span><\/p>\n As a designer and hosting reseller, I decided to take stab at creating my own template for Site Publisher and was surprised how easy it was. In this post, I’ll show you how to create a new Site Publisher template to offer your customers \u00a0as well as provide you a special, new template I\u2019ve designed that you can customize to your heart’s content.<\/span><\/p>\n Begin by having a design that you\u2019d like to implement. Once you have the \u00a0design you\u2019d like to use, all you need next are three Site Publisher files to begin turning your layout \u00a0into a usable template:<\/p>\n The meta.json file is used to display the template information. This is where you set up the fields that appear on the \u201cCustomize and Publish\u201d step within the Site Publisher interface.<\/span> Example:<\/em><\/p>\n This file utilizes Template Toolkit code and is used to generate the index.html file for each Site Publisher website. <\/span>(You\u2019ll notice the variables in this file correspond to the id\u2019s in the meta.json file.)<\/span><\/i><\/p>\n Example:<\/em><\/p>\n This is the preview image that the Site Publisher interface will display for your template.<\/span><\/p>\n <\/p>\n Once you have these files set up, you\u2019re ready to publish your template!<\/span><\/p>\n To publish your template, simply copy your template files along with any additional files you\u2019d like to include such as CSS, fonts, etc. into the appropriate directory on your cPanel & WHM server:<\/span><\/p>\n Store templates that you\u2019d like to make available to all users on the box within a template-specific directory in the <\/span> OR<\/span><\/p>\n For Resellers<\/b><\/p>\n Store templates that <\/span>you’d like to make available only to accounts that you manage<\/span> within a template-specific directory in the <\/span> I hope this article makes it just as easy for you to create templates as it is for your customers to launch a site with Site Publisher. \u00a0Enjoy your free Site Publisher template download below and please share your comments.<\/span><\/p>\nTemplate files<\/b><\/h1>\n
\n
Create the meta.json file<\/b><\/h3>\n
\n<\/code><\/p>\n
{\n\"information\":{\n\"id\":\"entrepreneur_template\",\n\"name\":\"Entrepreneur Template\",\n\"description\":\"A single page business site\",\n\"preview_image_path\":\"preview.png\"\n},\n\"fields\":[\n{\n\"id\":\"logo_url\",\n\"label\":\"Company Logo\",\n\"type\":\"text\",\n\"placeholder\":\"Image URL\"\n},\n{\n\"id\":\"hero_url\",\n\"label\":\"Hero\/Banner Image\",\n\"type\":\"text\",\n\"placeholder\":\"Image URL\"\n},\n{\n\"id\":\"headline\",\n\"label\":\"Headline or Title\",\n\"type\":\"text\",\n\"placeholder\":\"Headline\"\n},\n{\n\"id\":\"intro\",\n\"label\":\"About or Intro Content\",\n\"type\":\"textarea\",\n\"placeholder\":\"About us or intro content\"\n}\n\n]\n}<\/pre>\n
<\/a><\/figure>\n
Create the index.html.tt file<\/b><\/h3>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<body>\n<div class=\"container-fluid container-max-width\">\n<div class=\"row\">\n<div class=\"col-md-12 text-center\">[% IF logo_url.length %]<a class=\"logo\" href=\"\/\"><img src=\"[% logo_url | url %]\" alt=\"Logo\" \/><\/a>[% END %]<\/div>\n<\/div>\n<\/div>\n[% IF hero_url.length %]<header class=\"container-fluid\">\n<div class=\"row\">\n<div class=\"jumbotron container-max-width\">\n<img src=\"[% hero_url | url %]\" alt=\"Hero Image\" class=\"img-responsive center-block\">\n<\/div>\n<\/div>\n<\/header>[% END %]\n<section class=\"container-fluid text-center main\">\n<div class=\"container-max-width\">\n<div class=\"row\">\n<h2 class=\"col-md-12\">[% IF headline.defined %][% headline | html %][% END %]<\/h2>\n<div class=\"col-md-8 col-md-offset-2\">\n<p class=\"sub-heading\">[% IF intro.defined %][% intro | html %][% END %]<\/p>\n<\/div>\n<\/div>\n<div class=\"row\">\n<div class=\"col-md-4\">\n<h3>[% IF service_title.defined %][% service_title | html %][% END %]<\/h3>\n<p>[% IF service_desc.defined %][% service_desc | html %][% END %]<\/p>\n<\/div>\n<div class=\"col-md-4\">\n<h3>[% IF service_title_two.defined %][% service_title_two | html %][% END %]<\/h3>\n<p>[% IF service_desc_two.defined %][% service_desc_two | html %][% END %]<\/p>\n<\/div>\n<div class=\"col-md-4\">\n<h3>[% IF service_title_three.defined %][% service_title_three | html %][% END %]<\/h3>\n<p>[% IF service_desc_three.defined %][% service_desc_three | html %][% END %]<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<\/body>\n<\/html>\n<\/code>\n<\/pre>\n
Create the preview image (preview.png: 300×200 px)<\/b>
\n<\/b><\/h3>\n<\/p>\n
Publishing the template<\/b><\/h1>\n
\/var\/cpanel\/customizations\/site_templates\/your_template_name <\/code><\/span>directory.<\/span><\/p>\n
\/home\/reseller_username\/var\/cpanel\/reseller\/site_templates\/your_template_name<\/code><\/span> directory.<\/span>
\n<\/span><\/p>\n<\/a><\/p>\n
That\u2019s it folks!<\/b><\/h1>\n