|
Themes
Creating Themes
Themes control how the publicly accessable parts of your HulloHallo powered site look. Themes can be selected via Settings in the Admin section. In order to create new themes, you need to have an understanding of both HTML and PHP. Necessary FilesThemes contain three necessary files. They are:
See the ThemeAPI page for API information. Below are simple examples of each type of file. For readability, older style PHP syntax is used. Header Example<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><?php echo $pageName?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="<?php echo $pageName?> - A Lifestream" />
<meta name="copyright" content="HulloHallo" />
<link rel="shortcut icon" href="<?php echo base_url()?>favicon.ico" />
<link rel="stylesheet" href="<?php echo base_url()?>system/application/views/themes/light/css/hullo.css" media="all" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="<?php echo $pageName?> - Lifestream Feed" href="<?php echo base_url()?>rss/" />
</head>
<body>
<div id = "header">
<div id = "name-logo-menu">
<h1><?php echo $pageName?></h1>
</div>
<div id = "blurb">
<?php echo $blurb?>
</div>
</div>
Footer Example<div id = "footer">
<div class = "left">
<a href = "http://www.hullohallo.com/" title = "Powered by HelloHallo!"><img class = "none" src = "<?php echo base_url()?>images/public/footer_icon.png" alt = "" /></a>
</div>
<p><span class = "lighttext"><?php echo $pageName?> is proudly powered by <a class = "lightlink" href = "http://www.hullohallo.com/" title = "HelloHallo!">HulloHallo!</a></span></p>
</div>
</body>
</html>
Stream Example 1This is a pretty straight forward example. In this example you can see the use of the $streamItem object being called in a loop. Additionally, the $nextLink and $prevLink variables are being used for pagination. <div id = "core">
<div id = "app-body">
<div id = "section">
<h1>Stream</h1>
</div>
<div id = "content">
<?php
foreach($lifeStream->result() as $streamItem)
{
?>
<div class = "stream-item">
<div class = "stream-source">
<a href = "<?php echo $streamItem->site_url?>" title = "<?php echo $streamItem->site_name?>"><img src = "<?php echo base_url()?>images/icons/
<?php echo $streamItem->site_favicon?>" alt = "<?php echo $streamItem->site_name?>" />
</a>
</div>
<div class = "stream-date">
<p><?php echo $streamItem->date?><br /><span class = "time"><?php echo $streamItem->time?></span></p>
</div>
<div class = "stream-content">
<h2><?php echo $streamItem->title?></h2>
<p><?php echo $streamItem->description?></p>
</div>
</div>
<?php
}
?>
</div>
<div id = "pagination">
<?php
if($nextLink)
{
?>
<div class = "right">
<a class = "pagi" href = "<?php echo $nextLink?>">Next</a>
</div>
<?php
}
if($prevLink)
{
?>
<div class = "left">
<a class = "pagi" href = "<?php echo $prevLink?>">Previous</a>
</div>
<?php
}
?>
</div>
</div>
</div>
Stream Example 2In this second example, you can see that we are formatting the output of $streamItem based upon the site the data originated. In this example we are only focusing on the loop.
<?php
foreach($streamItems as $streamItem)
{
?>
<div class = "stream-item">
<div class = "stream-source">
<a href = "<?php echo $streamItem->site_url?>" title = "<?php echo $streamItem->site_name?>"><img src = "<?php echo base_url()?>images/icons/<?php echo $streamItem->site_favicon?>" alt = "<?php echo $streamItem->site_name?>" /></a>
</div>
<div class = "stream-date">
<p><?php echo $streamItem->date?><br /><span class = "time"><?php echo $streamItem->time?></span></p>
<p>><?php echo gmdate("D-M-Y", $streamItem->raw_date)?></span></p>
</div>
<div class = "stream-content">
<?php
if($streamItem->site_name == 'Last')
{
?>
<h2><?php echo $streamItem->title?></h2>
<?php
}
elseif($streamItem->site_name == 'Flickr')
{
?>
<h2><?php echo $streamItem->title?></h2>
<p><?php echo $streamItem->description?></p>
<?php
}
elseif($streamItem->site_name == 'Twitter')
{
?>
<h2 class = "quote">“<?php echo $streamItem->description?>”</h2>
<?php
}
else
{
?>
<h2><a href = "<?php echo $streamItem->link?>" title = "<?php echo $streamItem->title?>"><?php echo $streamItem->title?></a></h2>
<p><?php echo $streamItem->description?></p>
<?php
}
?>
</div>
</div>
<?php
}
?>
Structure & Directory PlacementThemes must be placed in the Themes folder found at /system/application/views/themes. Each theme must be placed in it's own folder. The folder name must be the name of the theme. An example theme structure is as follows:
|