My favorites | Sign in
Project Home Downloads Wiki Issues
READ-ONLY: This project has been archived. For more information see this post.
Search
for
Themes  
Creating Themes
Updated Dec 27, 2008 by damian.d...@gmail.com

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 Files

Themes contain three necessary files. They are:

  • header.php - Contains any needed header information such as meta tags, stylesheet references, etc.
  • footer.php - Contains the bottom of the page, usefull for copyright notices.
  • stream.php - This is where most of the action happens, lifestream data would be called here.

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 1

This 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 2

In 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">&#8220;<?php echo $streamItem->description?>&#8221;</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 Placement

Themes 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:

  • ThemeName
    • css
      • theme.css
    • images
      • logo.png
    • javascript
    • header.php
    • stream.php
    • footer.php

Powered by Google Project Hosting