Family Connections Documentation: How to Create a new Theme

Revision [776]

Most recent edit made on 2010-03-22 15:45:17 by RyanHaudenschilt

Additions:

(todo)
(todo)

Revision [775]

Edited on 2010-03-22 15:44:21 by RyanHaudenschilt

Additions:

While it is recommended the navigation.php template file is optional. The navigation information could be put inside the header template.

Footer Template (footer.php)

Navigation Template (navigation.php)

Deletions:

Optionally, most themes will include a navigation.php template file, but this is not necessary. The navigation information could be put inside the header template.

Revision [774]

Edited on 2010-03-22 15:42:23 by RyanHaudenschilt

Additions:

Creating a new Theme for older versions.

Deletions:

Creating a new Theme for older versions.

Revision [773]

Edited on 2010-03-22 15:41:45 by RyanHaudenschilt

Additions:

footer.php
navigation.php
style.css

Deletions:

footer.php
navigation.php
style.css

Revision [772]

Edited on 2010-03-22 15:41:17 by RyanHaudenschilt

Additions:

images/
header.php

Deletions:

images/
header.php

Revision [771]

Edited on 2010-03-22 15:40:38 by RyanHaudenschilt

Additions:

<a href="<?php echo $TMPL['path']; ?>index.php">

</a>

</div>

Deletions:

<a href="<?php echo $TMPL['path']; ?>index.php">

</a>

</div>

Revision [770]

Edited on 2010-03-22 15:40:18 by RyanHaudenschilt

Additions:

Deletions:

<img src="<?php echo $TMPL['path']; ?>themes/default/images/logo.jpg"/>

Revision [769]

Edited on 2010-03-22 15:39:59 by RyanHaudenschilt

Additions:

<a href="<?php echo $TMPL['path']; ?>index.php">

<img src="<?php echo $TMPL['path']; ?>themes/default/images/logo.jpg"/>

</a>

</div>

Deletions:

<a href="<?php echo $TMPL['path']; ?>index.php">

<img src="<?php echo $TMPL['path']; ?>themes/default/images/logo.jpg"/>

</a>

</div>

Revision [768]

Edited on 2010-03-22 15:39:31 by RyanHaudenschilt

Additions:

<?php
$TMPL['default-url'] = getDefaultNavUrl();
$TMPL['nav-link'] = getNavLinks();
include_once('navigation.php');
?>

Deletions:

Revision [767]

Edited on 2010-03-22 15:38:05 by RyanHaudenschilt

Deletions:

Revision [766]

Edited on 2010-03-22 15:37:44 by RyanHaudenschilt

Additions:

This file includes the basic html tags you would expect to see: the start of the html, body, and the #content tag, as well as the full title, meta, head tags.
The header is also where the #heading, which includes the logo and the "Welcome username | My Settings | Login/Logout" section.
And finally the page title is included in the header.
Here is an extremely stripped down version of a header file (please don't use this in your theme as it won't work).
<html>
<title><?php echo getSiteName(); ?></title>

<img src="<?php echo $TMPL['path']; ?>themes/default/images/logo.jpg"/>

Deletions:

<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 StrictEN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"∞>
<html xmlns="http://www.w3.org/1999/xhtml∞"
xml:lang="<?php echo _('lang'); ?>" lang="<?php echo _('lang'); ?>">
<title><?php echo getSiteName() . " - " . _('powered by') . " " . getCurrentVersion(); ?></title>
<?php if (isset($TMPL['javascript'])) { echo $TMPL['javascript']; } ?>

<img src="<?php echo $TMPL['path']; ?>themes/default/images/logo.jpg" alt="<?php echo getSiteName();?>"/>

<p>

<?php echo _('Welcome'); ?> <a href="<?php echo $TMPL['path'] . "profile.php?member=" . $_SESSION['login_id']; ?>"><?php echo getUserDisplayName($_SESSION['login
<a href="<?php echo $TMPL['path'] . "settings.php";?>"><?php echo _('My Settings'); ?></a> |
<a href="<?php echo $TMPL['path'] . "logout.php"; ?>"><?php echo _('Logout'); ?></a>

</p>

Revision [765]

Edited on 2010-03-22 15:27:36 by RyanHaudenschilt

Additions:

The header.php is a global file that will be included on every page in FCMS. Any information like css or javascript that you would like to see on each page should be inserted here.
%%(php)
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 StrictEN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"∞>
<html xmlns="http://www.w3.org/1999/xhtml∞"
xml:lang="<?php echo _('lang'); ?>" lang="<?php echo _('lang'); ?>">

Deletions:

%%(language-ref)
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 StrictEN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"∞>
<html xmlns="http://www.w3.org/1999/xhtml∞" xml:lang="<?php echo _('lang'); ?>" lang="<?php echo _('lang'); ?>">

Revision [764]

Edited on 2010-03-22 15:24:37 by RyanHaudenschilt

Additions:

Header Template (header.php)

<!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="<?php echo _('lang'); ?>" lang="<?php echo _('lang'); ?>">
<head>
<title><?php echo getSiteName() . " - " . _('powered by') . " " . getCurrentVersion(); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="author" content="Ryan Haudenschilt" />
<link rel="shortcut icon" href="<?php echo $TMPL['path']; ?>themes/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="<?php echo getTheme($_SESSION['login_id'], $TMPL['path']); ?>style.css"/>
<script type="text/javascript" src="<?php echo $TMPL['path']; ?>inc/prototype.js"></script>
<script type="text/javascript" src="<?php echo $TMPL['path']; ?>inc/fcms.js"></script>
<?php if (isset($TMPL['javascript'])) { echo $TMPL['javascript']; } ?>
</head>
<body id="top">
	<div id="header">
		<div id="logo">
			<a href="<?php echo $TMPL['path']; ?>index.php">
				<img src="<?php echo $TMPL['path']; ?>themes/default/images/logo.jpg" alt="<?php echo getSiteName();?>"/>
			</a>
		</div>
		<p>
			<?php echo _('Welcome'); ?> <a href="<?php echo $TMPL['path'] . "profile.php?member=" . $_SESSION['login_id']; ?>"><?php echo getUserDisplayName($_SESSION['login
			<a href="<?php echo $TMPL['path'] . "settings.php";?>"><?php echo _('My Settings'); ?></a> |
			<a href="<?php echo $TMPL['path'] . "logout.php"; ?>"><?php echo _('Logout'); ?></a>
		</p>
	</div>
<?php $TMPL['default-url'] = getDefaultNavUrl(); $TMPL['nav-link'] = getNavLinks(); include_once('navigation.php'); ?>
	<!-- ############ CONTENT START ############ -->
	<div id="content">
		<div id="pagetitle"><?php echo $TMPL['pagetitle']; ?></div>

Revision [763]

Edited on 2010-03-22 15:18:17 by RyanHaudenschilt

Additions:

Since FCMS 2.2, all themes must have at least an header.php, and footer.php template files, plus a CSS file named style.css.
Optionally, most themes will include a navigation.php template file, but this is not necessary. The navigation information could be put inside the header template.

footer.php
navigation.php

Deletions:

Since FCMS 1.9, all themes must have at least an adminnav.php, header.php, and sidenav.php template files, plus a CSS file named style.css.

adminnav.php
sidenav.php

Revision [762]

Edited on 2010-03-22 15:15:44 by RyanHaudenschilt

Additions:

Creating a new Theme for older versions.
FCMS 1.9 - 2.1
FCMS 1.8.2 or earlier

Deletions:

Creating a new Theme for 1.9 - 2.1
Creating a new Theme for FCMS 1.8.2 or earlier

Revision [760]

Edited on 2010-03-22 15:13:58 by RyanHaudenschilt

Additions:

Creating a new Theme for 1.9 - 2.1

Revision [541]

Edited on 2009-05-11 20:36:38 by RyanHaudenschilt

No differences.

Revision [540]

Edited on 2009-05-11 20:35:55 by RyanHaudenschilt

Additions:

Since FCMS 1.9, all themes must have at least an adminnav.php, header.php, and sidenav.php template files, plus a CSS file named style.css.
Themes can have more CSS files, templates or images, but the above files are the minimum requirements.
Below is an example of the directory structure for a typical theme.
themes/

alpha/

images/
adminnav.php
header.php
sidenav.php
style.css

beta/

images/
adminnav.php
header.php
sidenav.php
style.css

default/
smileys/
myNewTheme/
datechooser.css
favicon.ico
login.css

Deletions:

All themes for FCMS consist of at least one .css file and either make use of the existing images for the default theme or include their own images located in a directory, named the same as the theme itself. See example below.
/themes

/images

/default
/smileys
/your_new_theme

datechooser.css
default.css
login.css
your_new_theme.css

Revision [537]

Edited on 2009-05-11 20:27:43 by RyanHaudenschilt

Additions:

Creating a new Theme for FCMS 1.8.2 or earlier

Revision [195]

The oldest known version of this page was edited on 2008-10-01 10:31:54 by RyanHaudenschilt

Docs -> Creating a new Theme

How to Create a new Theme

/images

/default
/smileys
/your_new_theme

datechooser.css
default.css
login.css
your_new_theme.css