Download Docs Forums

Theo
ULTRA LIGHT CONTENT MANAGEMENT

Designing Themes

Example IndexCalls/HeadingsChanging OutputInheritingPosting/DemoTips

A Theme is a style sheet and an index file with a few functions and variables. This guide covers everything needed to build a Theme from the ground up!

Example Index

Includes all calls and can be used as a template (valid); simply add html around the calls and style.

<?php ob_start('ob_gzhandler'); define('THEO', 1); require 'core/config.php'; ?>
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<?php echo $head; ?>
<link rel="stylesheet" type="text/css" href="theme-name.css">
<?php echo $home; ?>
<ul>
<?php menu(); ?>
</ul>
<?php pages(); ?>
<?php main(); ?>
<?php search(); ?>
<?php recent_posts(7); ?>
<?php tags(18, 9); ?>
<?php recent_comments(5, 150); ?>

Calls And Headings

$head - Title, Description, Robots and Base Href.

$home - Site name with Tagline.

menu() - Categories wrapped in <li>.

pages() - All Pages.

main() - The content.

search() - Empty for no button, ('text') for submit button with text.

recent_posts() - Empty for 5 posts, or (n) for n posts.

tags() - Empty for list, or (n, n) for max/min font size (cloud).

recent_comments() - Empty for 4 at 100 chars, or (n, n) for n comments at n chars.

h1 - Post Title.

h2 - Posts Titles (category view).

h3 - Post Body headings.

h4 - Post Comments / Comment heading. Tag / Search headings.

Use h5 for your theme section headings.

Changing Output

Involves changing $L (accepts html) before calling main(). This method + styling gives total display control. Example with custom byline and date format:

<?php
$L['date'] = 'l F jS o';
$L['info'] = '<div class="left">[ifcom] [iftag]</div>
  Posted in [cat] on [date].
  <span>[more]</span>';
main();
?>

Style Inheriting

Output is set up to inherit style, simplifying and reducing the work required to create a theme. Use the base selector to style all instances. Use a subclass to style a difference if needed.

h1 {
  /* Style all h1 instances. Complete style for .post and .page titles. */
}
.homepage h1 {
  /* Style difference for homepage title if any. */
}
.info {
  /* Style all .info instances. Complete style for .post and .page info lines. */
}
.posts .info {
  /* Style difference for info on cat view if any. */
}

If a bit of global styling will have to be canceled out in a subclass, put it under it's own subclass.

Content falls under .main. Subclasses are .post, .page, .posts (cats/homecats), .homepage, .none (404).

Posting And Demo

Name your style sheet and images folder with the theme's name (or approximation). This separates themes and is necessary for theocms.com to host the demo.

Upload the compressed theme under your forum Profile then message a mod with the link. We'll reply with the demo link for your post which should include a descriptive title, a brief description, one screenshot, the demo link and the download link.

Tips

Use view source to get to know the elements.

Check out existing themes for examples styling pagination, menus, comments, etc.

Create a 'design work area' by installing Theo in a subfolder on your host. Add a few categories and subcategories. Create 2 pages and 9 posts with generated paragraphs and intro images/thumbs. Make one post use all elements like a caption, blockquote, comments, etc.. Make a sql backup to restore from so you can make changes for different types of themes.

Remember to style taglines, the 404 page, search results, etc..


Horizons Theme Powered By Theo CMS
© 2017 Theo CMS - Ultra Light Content Management