Location: PHPKode > projects > Hero > hero_os/user_guide/designers/index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>Designers' Guide | Hero User Guide</title>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
		<script type="text/javascript" src="./../js/shCore.js"></script>
		<script type="text/javascript" src="./../js/shBrushPhp.js"></script>
		<script type="text/javascript" src="./../js/shBrushXml.js"></script>
		<script type="text/javascript" src="./../js/user_guide.js"></script>
		<link href="./../css/user_guide.css" media="screen" rel="stylesheet" type="text/css" />
		<link href="./../css/shCore.css" media="screen" rel="stylesheet" type="text/css" />
		<link href="./../css/shThemeDefault.css" media="screen" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div class="header">
			Hero <span class="sub">/ User Guide</span>
		</div>
		<div class="body">
			<div id="navigation">
				<ul>
					<li>
						<a rel="basic" class="parent" href="#">Basic Details</a>
						<ul>
							<li>
								<a href="./../index.html">Welcome to Hero</a>
							</li>
							<li>
								<a href="./../license.html">License Agreement</a>
							</li>
							<li>
								<a href="./../changelog.html">Changelog</a>
							</li>
						</ul>
					</li>
					<li>
						<a rel="installation" class="parent" href="#">Installation</a>
						<ul>
							<li>
								<a href="./../installation/server_requirements.html">Server Requirements</a>
							</li>
							<li>
								<a href="./../installation/installation.html">Fresh Installation</a>
							</li>
							<li>
								<a href="./../installation/upgrading.html">Upgrading</a>
							</li>
							<li>
								<a href="./../installation/migration.html">Migration</a>
							</li>
							<li>
								<a href="./../installation/troubleshooting.html">Troubleshooting</a>
							</li>
							<li>
								<a href="./../installation/deployment.html">Mass Deployment</a>
							</li>
						</ul>
					</li>
					<li>
						<a rel="configuration" class="parent" href="#">Configuration</a>
						<ul>
							<li>
								<a href="./../configuration/settings.html">Settings</a>
							</li>
							<li>
								<a href="./../configuration/coupon_codes.html">Coupon Codes</a>
							</li>
							<li>
								<a href="./../configuration/branding.html">Custom Branding</a>
							</li>
							<li>
								<a href="./../configuration/custom_fields.html">Custom Fields</a>
							</li>
							<li>
								<a href="./../configuration/emails.html">Emails</a>
							</li>
							<li>
								<a href="./../configuration/importing_members.html">Importing Members</a>
							</li>
							<li>
								<a href="./../configuration/member_groups.html">Member Groups</a>
							</li>
							<li>
								<a href="./../configuration/payment_gateways.html">Payment Gateways</a>
							</li>
							<li>
								<a href="./../configuration/reports.html">Reports</a>
							</li>
							<li>
								<a href="./../configuration/search.html">Search</a>
							</li>
							<li>
								<a href="./../configuration/security.html">Security</a>
							</li>
							<li>
								<a href="./../configuration/shipping.html">Shipping Rates</a>
							</li>
							<li>
								<a href="./../configuration/subscriptions.html">Subscriptions</a>
							</li>
							<li>
								<a href="./../configuration/taxes.html">Taxes</a>
							</li>
							<li>
								<a href="./../configuration/advanced.html">Advanced</a>
							</li>
						</ul>
					</li>
					<li>
						<a rel="publishing" class="parent" href="#">Publishing</a>
						<ul>
							<li><a href="./../publishing/blogs.html">Blogs</a></li>
							<li><a href="./../publishing/content.html">Content &amp; Content Types</a></li>
							<li><a href="./../publishing/forms.html">Forms</a></li>
							<li><a href="./../publishing/menus.html">Navigation Menus</a></li>
							<li><a href="./../publishing/rss_feeds.html">RSS Feeds</a></li>
							<li><a href="./../publishing/store.html">Store Products &amp; Collections</a>
							<li><a href="./../publishing/topics.html">Topics</a></li>
						</ul>
					</li>
					<li>
						<a rel="designers" class="parent active" href="#">Designing</a>
						<ul>
							<li><a href="./../designers/index.html">Designer Introduction</a></li>
							<li><a href="./../designers/smarty.html">Smarty Template Engine</a></li>
							<li><a href="./../designers/includes.html">Stylesheets &amp; JavaScript</a></li>
							<li><a href="./../designers/template_plugins.html">Template Plugins</a></li>
							<li><a href="./../designers/mapping_urls.html">Mapping URL's</a></li>
							<li class="reference">Reference</li>
							<li class="reference"><a href="./../designers/reference/global_variables.html">Global Variables</a></li>
							<li class="reference"><a href="./../designers/reference/global_plugins.html">Global Plugins</a></li>
							<li class="reference"><a href="./../designers/reference/blogs.html">Blogs &amp; Archives</a></li>
							<li class="reference"><a href="./../designers/reference/custom_fields.html">Custom Fields</a></li>
							<li class="reference"><a href="./../designers/reference/forms.html">Forms</a></li>
							<li class="reference"><a href="./../designers/reference/members.html">Members</a></li>
							<li class="reference"><a href="./../designers/reference/menus.html">Navigation Menus</a></li>
							<li class="reference"><a href="./../designers/reference/paywall_privileges.html">Access Restrictions &amp; Paywalls</a></li>
							<li class="reference"><a href="./../designers/reference/publish.html">Published Content &amp; Topics</a></li>
							<li class="reference"><a href="./../designers/reference/rss_feeds.html">RSS Feeds</a></li>
							<li class="reference"><a href="./../designers/reference/search.html">Search Forms &amp; Results</a></li>
							<li class="reference"><a href="./../designers/reference/store.html">Store Products &amp; Collections</a></li>
							<li class="reference"><a href="./../designers/reference/subscriptions.html">Subscriptions</a></li>
							<li class="reference"><a href="./../designers/reference/custom_fields.html">Custom Fields</a></li>
						</ul>
					</li>
					<li>
						<a rel="developers" class="parent" href="#">Developing</a>
						<ul>
							<li><a href="./../developers/index.html">Developer Introduction</a></li>
							<li><a href="./../developers/codeigniter.html">CodeIgniter</a></li>
							<li><a href="./../developers/standards.html">Standards &amp; Best Practices</a></li>
							<li><a href="./../developers/security.html">Security</a></li>
							<li><a href="./../developers/modules.html">Module Development</a></li>
							<li><a href="./../developers/template_plugins.html">Template Plugin Development</a></li>
							<li><a href="./../developers/cronjobs.html">Cronjobs &amp; Automated Processes</a></li>
							<li><a href="./../developers/forms.html">Forms &amp; Custom Fieldtypes</a></li>
							<li><a href="./../developers/errors_logging.html">Errors &amp; Logging</a></li>
							<li><a href="./../developers/profiling.html">Debug/Profile Mode</a></li>
							<li class="reference">Reference</li>
							<li class="reference"><a href="./../developers/reference/admin_form_library.html">Admin Form Library</a></li> 
							<li class="reference"><a href="./../developers/reference/admin_navigation_library.html">Admin Navigation Library</a></li> 
							<li class="reference"><a href="./../developers/reference/app_hooks_library.html">App Hooks Library</a></li>
							<li class="reference"><a href="./../developers/reference/array_to_csv_library.html">Array to CSV Library</a></li> 
							<li class="reference"><a href="./../developers/reference/array_to_json_helper.html">Array to JSON Helper</a></li> 
							<li class="reference"><a href="./../developers/reference/blog_model.html">Blog Model</a></li> 
							<li class="reference"><a href="./../developers/reference/cart_model.html">Cart Model</a></li> 
							<li class="reference"><a href="./../developers/reference/clean_string_helper.html">Clean String Helper</a></li> 
							<li class="reference"><a href="./../developers/reference/collections_model.html">Collections Model</a></li> 
							<li class="reference"><a href="./../developers/reference/content_model.html">Content Model</a></li>
							<li class="reference"><a href="./../developers/reference/content_type_model.html">Content Type Model</a></li>  
							<li class="reference"><a href="./../developers/reference/coupon_model.html">Coupon Model</a></li> 
							<li class="reference"><a href="./../developers/reference/custom_fields_model.html">Custom Fields Model</a></li> 
							<li class="reference"><a href="./../developers/reference/dataset_library.html">Dataset Library</a></li> 
							<li class="reference"><a href="./../developers/reference/email_model.html">Email Model</a></li> 
							<li class="reference"><a href="./../developers/reference/fieldtype_library.html">Fieldtype Library</a></li> 
							<li class="reference"><a href="./../developers/reference/form_builder_library.html">Form Builder Library</a></li> 
							<li class="reference"><a href="./../developers/reference/form_model.html">Form Model</a></li> 
							<li class="reference"><a href="./../developers/reference/image_thumb_helper.html">Image Thumb Helper</a></li>
							<li class="reference"><a href="./../developers/reference/invoice_model.html">Invoice Model</a></li> 
							<li class="reference"><a href="./../developers/reference/head_assets_library.html">Head Assets Library</a></li> 
							<li class="reference"><a href="./../developers/reference/link_model.html">Link Model</a></li> 
							<li class="reference"><a href="./../developers/reference/login_model.html">Login Model</a></li> 
							<li class="reference"><a href="./../developers/reference/menu_model.html">Menu Model</a></li> 
							<li class="reference"><a href="./../developers/reference/notices_library.html">Notices Library</a></li>
							<li class="reference"><a href="./../developers/reference/order_model.html">Order Model</a></li>  
							<li class="reference"><a href="./../developers/reference/products_model.html">Products Model</a></li> 
							<li class="reference"><a href="./../developers/reference/usergroup_model.html">Usergroup Model</a></li> 
							<li class="reference"><a href="./../developers/reference/product_option_model.html">Product Option Model</a></li>
							<li class="reference"><a href="./../developers/reference/rss_model.html">RSS Model</a></li> 
							<li class="reference"><a href="./../developers/reference/setting_helper.html">Setting Helper</a></li>
							<li class="reference"><a href="./../developers/reference/settings_model.html">Settings Model</a></li> 
							<li class="reference"><a href="./../developers/reference/shipping_model.html">Shipping Model</a></li> 
							<li class="reference"><a href="./../developers/reference/states_model.html">States Model</a></li> 
							<li class="reference"><a href="./../developers/reference/stats_library.html">Stats Library</a></li> 
							<li class="reference"><a href="./../developers/reference/subscription_model.html">Subscription Model</a></li> 
							<li class="reference"><a href="./../developers/reference/subscription_plan_model.html">Subscription Plan Model</a></li> 
							<li class="reference"><a href="./../developers/reference/taxes_model.html">Taxes Model</a></li> 
							<li class="reference"><a href="./../developers/reference/template_files_helper.html">Template Files Helper</a></li> 
							<li class="reference"><a href="./../developers/reference/theme_model.html">Theme Model</a></li>
							<li class="reference"><a href="./../developers/reference/time_since_helper.html">Time Since Helper</a></li> 
							<li class="reference"><a href="./../developers/reference/topic_model.html">Topic Model</a></li> 
							<li class="reference"><a href="./../developers/reference/url_helper.html">URL Helper</a></li> 
							<li class="reference"><a href="./../developers/reference/user_model.html">User Model</a></li> 
							<li class="reference"><a href="./../developers/reference/usergroup_model.html">Usergroup Model</a></li> 
						</ul>
						
					</li>
				</ul>
			</div>
			<div id="content">
				<h1>Designers' Guide</h1>

<p>While the average end user of Hero should be impressed by its power, only the designers (and <a href="./../developers/index.html">developers</a>) can truly appreciate the ease of building websites with this platform.  There are no design limitations and, more importantly, there is a toolbox of features that allow you to build websites in fractions of the time.</p>

<p>But talk is cheap!  Let's take a look in this toolbox to see what you really have to work with:</p>

<h2>The Designer's Toolbox</h2>

<h3>Templates</h3>

<strong>Templates</strong> are HTML files that contain <a href="./../designers/smarty.html">Smarty Template Engine</a> code to load dynamic content from Hero (content, products, user information, etc.) into your web page upon each page load.  For example, a template for displaying a blog post (e.g., <span class="filename">blog_post.thtml</span>) may use Smarty template variables like <span class="code">{$title}</span> and <span class="code">{$post_body}</span> in place of where the Title and Post Body fields should be displayed on the web page.  These variables aren't random - they are defined by the module displaying the page, the content type being displayed (e.g., blog posts might have different variables than a content type holding data about park trails), and the template plugins available to you.  We'll read more about template plugins and their immense power in a minute, though.

<div class="note">All templates have a <span class="filename">.thtml</span> extension.  This stands for Template HTML.  Using this extension allows us to protect these files from ever being accessed directly by malicious users.</div>

<p>Here's an example template, below.  It displays a series of blog posts.  Just as a reminder, we're talking a lot about blog posts but your site may not have this content type at all - it's all about the <a href="./../publishing/content.html">content types you define</a>.</p>

<pre class="code brush: xml">

{extends file=&quot;layout.thtml&quot;}
{block name=&quot;title&quot;}
{$title} - {$smarty.block.parent}
{/block}
{block name=&quot;content&quot;}
	&lt;h1&gt;{$title}&lt;/h1&gt;
	
	&lt;ul class=&quot;blog&quot;&gt;
	{foreach $content as $item}
		&lt;li&gt;
			&lt;h4 class=&quot;date&quot;&gt;{$item.date|date_format:&quot;%A, %B %e, %Y&quot;}&lt;/h4&gt;
			&lt;a href=&quot;{$item.url}&quot;&gt;{$item.title}&lt;/a&gt;
		&lt;/li&gt;
	{/foreach}
	&lt;/ul&gt;
	
	{$pagination}
	
{/block}

</pre>

<p>This template extends our main layout template, passes a page title, and then iterates through the content items to display each post with a formatted date, and title.  At the bottom, it displays pagination links.  For more information on displaying blogs/archives, check out the <a href="./../designers/reference/blogs.html">designer reference page for blogs/archives</a>.</p>

<h3>Themes</h3>

<p>Templates are grouped into packages called <strong>themes</strong>.  This allows designers to easily save, backup, and share groups of template files that are entirely self-contained.  Themes don't just hold template files though, because site designs aren't entirely comprised of HTML.  A complete site design has JavaScript files, CSS Stylesheets, and, for Hero designs, may contain <strong>template plugins</strong>.  All of these files exist in a theme folder at <span class="filename">/themes/</span>.</p>

<h3>Template Plugins</h3>

<p>By using the <a href="./../designers/smarty.html">Smarty Template Engine</a> to power the themes in Hero, we make available a plethora of <strong>template plugins</strong>.  Template plugins are written in PHP, but called with simple template tags in your templates like <span class="code">{content var=&quot;article&quot; type=&quot;2&quot; limit=&quot;5&quot;}{$article.title}{/content}</span>.  In that example, we will print out the titles of the last 5 content items from content type #2 (presumably storing "articles").  This plugin is a <strong>block function</strong> because it has an opening and closing tag and does something with the content between the two tags.  Template plugins can be called throughout any template and give you 100% control over the data you display and how it is displayed.</p>

<p>Of course, template plugins do more than just pull data.  The "url" plugin, a <strong>template function</strong> to be precise, is a <a href="./../designers/reference/global_plugins.html">global plugin</a> that exports complete URLs for your site when given a path.  Example: <span class="code">&lt;a href=&quot;{url path=&quot;user/register&quot;}&quot;&gt;Click here to register&lt;/a&gt;</span> will print <span class="code">&lt;a href=&quot;http://www.yourdomain.com/user/register&quot;&gt;Click here to register&lt;/a&gt;</span>.</p>

<p>Finally, there are <strong>modifiers</strong>, the third type of template plugin.  Modifiers are built into Smarty and perform specific processing on a single template variable.  For example, whenever you have a date variable, you can use the "date_format" modifier to format the date into the format you would prefer (e.g, "2010-Dec-31", "Dec 31, 2010", or "December 31/10"): <span class="code">Article print date: {$article.date|date_format:&quot;%b %e, %Y&quot;}</span>.</p>

<p>Modules in Hero include their own template plugins and, if you want custom functionality in Hero, you can always <a href="./../developers/template_plugins.html">write your own template plugins</a>.  Template plugins are PHP files that can be placed within a theme folder, in the <span class="filename">/themes/_plugins/</span> folder, or within a module's <span class="filename">/template_plugins/</span> directory.</p>

<p>More information on how to use block functions, functions, and modifiers is available <a href="./../designers/template_plugins.html">in the documentation specifically about template plugins</a>.</p>

<h3>Customizable Content</h3>

<p>All content, whether it be custom content types created by yourself, or RSS feeds, blogs, etc., can be displayed using the template of your choice.  So, if you aren't happy with the standard display of your blog, create your own template and set the Output Template to your new template to have complete control over the look and feel of the page.</p>

<h3>Theme Editor</h3>

<p>The Theme Editor is an online template file editor that allows you to begin customizing your theme from directly within your control panel (Design > Theme Editor).  You can edit files, specify which template to use for your site's homepage, and even map URL's directly to a template.</p>

<h3>Menu Manager</h3>

<p>Don't worry about hard-coding menus in your templates and having your clients mess around with that, use the <a href="./../publishing/menus.html">Menu Manager</a> and the including <a href="./../designers/reference/menus.html">{menu} template plugin</a> to dynamically build and load menus into your templates as standard <span class="code">&lt;ul&gt;</span> formatted lists.</p>

<h3>Standard Included Themes</h3>

<p>Not sure where to start with Hero?  You don't have to design from scratch.  Take a standard theme folder, rename it, and begin tweaking while you learn the ins and outs of the system.  All themes are built for a global audience and you would be amazed at how quickly some CSS edits and tweaks to the main <span class="filename">layout.thtml</span> file make your site look brand new.  Having a set of themes to choose and learn from is one of the biggest design resources of Hero.</p>

<div class="note">Each standard theme is built around one main <span class="filename">layout.thtml</span> file.  This file wraps around all other pages of the site and includes your header, navigation, footer, etc.  So start here when modifying a standard theme!</div>

<h2>Important notes when customizing Hero themes</h2>

<ul>
<li>Whenever you are customizing a standard theme, begin your work by renaming the theme folder in <span class="filename">/themes/</span> so that it won't be overwritten when you update to a later release of Hero.  All internal links in the theme will remain intact (providing they used the <a href="./../designers/reference/global_plugins.html">{theme_url} template plugin</a>).  After you rename your theme folder, simply set your site to use the new theme folder in the control panel at Design > Themes.</li>
</ul>

<ul>
<li>You should always use absolute paths in your links by using the <span class="code">{url}</span> (<a href="./../designers/reference/global_plugins.html">documentation here</a>).  This prevents any links from breaking if the site is transferred.</li>
			</div>
		</div>
	</body>
</html>
<!-- /designers-->
Return current item: Hero