From Social Networking Software - Online Social Network Software
Revision as of 08:37, 20 July 2011 by Pankaj (Talk | contribs)
Jump to: navigation, search

Theme Development

Note: This is a technical document. It discusses technical aspects of theme module and developing a custom theme which requires a good knowledge of advanced PHP, HTML, CSS and Javascript and is not meant for non-technical users. Know more about themes: What are themes? | Using Themes | Help :Templating Engines.

Contents


Nature of themes

Themes are neither solid, liquid or gas. They are collection of PHP scripts, HTML/CSS files and images, living under themes folder at root with folder name same as theme name. For Example: Theme Demo will be at ROOT/themes/demo. Theme files are interlinked and hooked together to form the actual website.

Why develop themes?

These are the reasons why should you learn theme development of Social Network Software.

  • Complete control over layout, presentation and various design elements.
  • Tweaking already existing themes according to you and your community taste.
  • When your requirements are too unique and specific to be found in our theme gallery.
  • Migrating from a non-Social-Network-Software powered website to a Social-Network-Software powered one.
  • You wish to frame out of box ideas inside Social Network Software.

Theme Structure

For a minimal theme you will require two files:

  • text.htm - Which is responsible for basic layout of the homepage. It determines where elements like banner, menu, footer and other elements of homepage will be placed and arranged which in turns makes clear structural layout of homepage.
  • main_home.php - This file paints what will reside inside other elements of homepage like login form, signup form, welcome text and featured content.

So the homepage is rendered at two levels.

text.htm

Controls homepage structure. It looks like an HTML file with placeholders enclosed in curly braces.

Our basic website structure is clear here.

First level structure is defined by text.htm

main_home.php

Controls what's inside the placeholder. It substitutes whatever HTML code needs to be substituted for placeholders inside index.htm.

It is actually done with the help of assign_vars method of $template object of Template class. For example to assign some HTML code to {PLACEHOLDER}, first generate HTML and store it in some variable or as a constant (say $placeholder_data) and then assign that value to {PLACEHOLDER} by

$template->assign_vars(array(
    'PLACEHOLDER'=> $placeholder_html
));

Placeholder Data is defined by main_home.php

Header and footer data can also be populated using this technique but it is not recommended.

So following is a deprecated technique to replace {HEADER_HTML} and {FOOTER_HTML} inside text.htm:

$template->assign_vars(array(
    'HEADER_HTML'=>$header_html,
    'FOOTER_HTML'=>$footer_html
));

Recommended theme files

The above files are bare bones of a theme but for a full featured theme which is not just a static homepage we have to go beyond and create some more files for a robust and extensible theme structure.

Website has some elements which are global or are common to a large number of pages. eg. Banner is a global element as it is included in every webpage whereas user-page-navigation makes sense only when a user is logged in.

Such elements need to be included in every page. A file called body.php (which is not a part of theme files) is responsible for assigning values to these common template placeholders (just like main_home.php) and is included in every page automatically. A minimal code is shown below.

<?php
$template->assign_vars(array(
 'HEADER_HTML' => HEADER_HTML,                // HEADER_HTML defined in header.php
 'FOOTER_HTML' => FOOTER_HTML,                // FOOTER_HTML defined in footer.php
 'LEFT_HTML' => LEFT_HTML,                    // LEFT_HTML defined in left.php
 'LEFT_COMMUNITY_HTML' => LEFT_COMMUNITY_HTML // LEFT_COMMUNITY_HTML defined in left_community.php
 
  ));
?>

Above code shows that the task of rendering the common elements is automatic, provided that these common elements are defined in their respective theme files. So we have to take care of four additional theme files.

  • header.php
  • footer.php
  • left.php
  • left_community.php

header.php

Header is a global element. Header covers

  • Everything till opening BODY html tag.
    • includes the DOCTYPE declaration, opening HTML tag and HEAD section.
  • HTML of banner.
    • Banner in turn includes site logo too.
  • HTML of menu bar.

Minimal header.php has data for {HEADER_HTML} defined.

 <?php
     $header_html_data = '<html>
 <head>
     <title>My Social Network</title>
 </head>
 <body>
     <div id="wrapper">
         <div id="banner">
             <!-- BANNER DATA   -->
         </div>

         <ul id="menu">
             <li><!-- MENU ITEM 1   --></li>
             <li><!-- MENU ITEM 2    --></li>
             <li><!-- MENU ITEM 3    --></li>
         </ul>
         ';
     define('HEADER_HTML',$header_html_data);
 ?>

footer.php

Footer is also a global element which may include:

  • Link to copyright.
  • Social media sharing.
  • RSS feeds.
  • Link to Disclaimer.
  • Privacy Policy.
  • And sometimes small sitemap.

Minimal footer.php has data for {FOOTER_HTML} defined.

 <?php
     $footer_html_data = '
         <div id="footer">
             © <?php echo date('Y') ?>, by <a href="http://www.mysocialnetwork.com">My Social Network</a>
             <!-- Social Media Links -->
             <!-- RSS publishing link -->
         </div>
     </div> <!-- END PAGE WRAPPER -->
 </body>
 </html>
 ?>

left.php

Contains the navigation panel of a registered user in form of a left sidebar. So its not a global element and is set according to the whether a user is logged in or not.

Minimal code sets {LEFT_HTML} placeholder:

 <?php
     if(check_login("user")) {
         // if page is not the home page, include the user-navigation
         if(!(strtolower($_SERVER['PHP_SELF'])=="/".PATH_TO_MAIN.FILENAME_INDEX)) {
             define('LEFT_HTML','
 <div id="user-sidebar">
     <div id="userphoto">'.$user_photo_html.'</div>
     <div id="mailbox">'.$mailbox_html.'</div>
     <div id="usernav">'.$usernav_html.'</div>
     <div id="invite">'.$invite_friend_html.'</div>
 </div>');
        } else {
         <!-- Default sidebar when user is not logged in-->
         define('LEFT_HTML','');
        }
 ?>

left_community.php

stylesheet.css

Miscellaneous theme files

index.php

screenshot.gif

info.txt

theme specific images

Main Page
About SNS
Developer Documentation
Personal tools