Hello,
im developing a charity site, and would like to get some more templates/designs.
i have developed the site to be template based so i can have as many templates as i like, and can just change them in the admin area.
Ok heres the current (and only) template.
template.inc.php:
PHP Code:
<?php
include_once ('config.php');
#### Site lock ###
include ('includes/getrank.php');
if($sitelock == 0 || $Rank >= 7 || $_SERVER['PHP_SELF'] == 'login.php' || $_SERVER['PHP_SELF'] == 'admincp.php')
{
if($sitelock == 1 && $Rank >= 7)
{
$content .= warning_msg('This site is currently locked down! <a href="admincp.php?id=settings&sub=sitelock">Click here to unlock it.</a>');
}
####
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><? echo "$title" ?> <? echo "$pgtitle" ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="en-gb" />
<meta name="robots" content="<? if($robots_override == 1) {echo'noindex,nofollow';} else {echo "$meta_robots";}?>" />
<meta name="rating" content="General" />
<meta name="author" content="<? echo "$meta_author" ?>" />
<meta name="keywords" content="<? echo "$meta_keywords" ?>" />
<meta name="description" content="<? echo "$description" ?>" />
<link href="<? echo "$core" ?>/favicon.ico" rel="shortcut icon" />
<link href="<? echo $core.'/style/'.$style.'/style.css'; ?>" rel="stylesheet" type="text/css" />
<? echo $extraheader ?>
<!--[if IE 7]>
<style type="text/css">
.menu li {float:left;}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
html
{
scrollbar-3dlight-color: #BDDDC9;
scrollbar-arrow-color: #FFFF00;
scrollbar-base-color:#FFFF00;
scrollbar-track-color: #BDDDC9;
scrollbar-darkshadow-color: #ffffff;
scrollbar-face-color: #66CCFF ;
scrollbar-highlight-color:#FFFF00;
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<br />
<br />
<div class="header">
</div>
<div class="main">
<br class="brclear" /><!-- clears floated elements in header -->
<div class="quickmenu">
<hr class="hr" />
<?php echo "$news"; ?>
<hr class="hr" />
</div><!-- end quickmenu -->
<div class="navi">
<div class="menu">
<? include ('navi.php'); ?>
</div>
</div>
<div class="content" style="<? echo $extra_content_style ?>">
<!--[if IE]><br /><![endif]-->
<? echo $content ?>
<br />
</div>
<br class="brclear" />
<div class="footer">
<hr class="hr" />
<span class="lrgfooter"><? echo "$footer1" ?></span>
<br />
<span class="smlfooter"><? echo "$footer2" ?></span>
<hr class="hr" />
<?php
if ($showlogo == 1)
{
echo '
<a href="http://validator.w3.org/check?uri=referer" shape="rect">
<img src="'.$core.'/images/valid-xhtml11.png" alt="Valid XHTML 1.1!" class="footerlogos" /></a>
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fcalm.dansgalaxy.co.uk/style/'.$style.'/style.css&warning=1&profile=css21&usermedium=all" shape="rect">
<img src="'.$core.'/images/w3ccss.png" alt="Valid CSS!" class="footerlogos"/></a>
<a href="http://www.w3.org/WAI/WCAG1A-Conformance" title="Explanation of Level A Conformance">
<img class="footerlogos" src="'.$core.'/images/w3cwai.png" alt="Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0" /></a>
<a href="http://php.net" title="PHP.net"><img src="'.$core.'/images/phplogo.png" alt="Powerd By PHP" class="footerlogos" /></a>
<a href="http://mysql.com" title="Powered By MySQL"><img src="'.$core.'/images/powered_mysql.png" alt="Powerd By MySQL" class="footerlogos" /></a>
<br />';
}
?>
<span class="dansgalaxycopyright"><? echo $footer3 ?></span>
</div>
</div><!-- end main -->
</div><!-- end wrapper -->
</body>
</html>
<?
### Site lock ###
}
else {
echo '
<html>
<head>
<style type="text/css">
body {
background: #666;
text-align: center;
margin: 0;
}
</style>
</head>
<body>
<div style="width: 60%; background: #fff url(images/tortoise.png) no-repeat bottom right; border:
2px solid #ddd; height: 30%; margin-left: 20%; margin-right: 20%; margin-top: 20%;">
<h1>SITE OFFLINE!</h1>
<p style="font-size: 1.5em;">'.$sitelock_msg.'</p>
</div>
</body>
</html>';
}
#### #### ####
?>
and heres the style.css which goes with it.
Code:
/* CSS Document */
body
{
background: #fff url('./images/bg.png') repeat-x;
font-family: veranda;
}
#wrapper
{
width: 891px;
position: relative;
margin: 0 auto;
}
.header
{
height: 150px;
margin: 0px;
background: url('./images/design2withcorner.png');
width: 891px;
}
a img
{
border: 0px;
}
.main
{
color: green;
height: auto;
width: 891px;
background-color: #ffffff;
text-align: left;
}
.banner
{
height: 100px;
}
.hr
{
width: 99%;
color: #3399cc;
text-align: center;
margin: 0px;
size: 1;
}
.quickmenu
{
height: 20px;
text-align: center;
/*
border-top: 2px solid #ADADAD;
border-bottom: 2px solid #ADADAD;
*/
margin: 10px 0;
padding: 5px 0;
}
.title
{
color: #336600;
text-decoration: underline;
font-weight: bold;
font-size: 16pt;
}
.menu
{
float:left;
margin-left: 2px;
margin-right: 10px;
margin-top: 1px;
width: 150px;
z-index:1000;
font-size:90%;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
width:150px; /*Width of navigation */
}
/* hack for IE5.5 */
* html .menu ul {margin-left:-16px; margin-left:0;}
/* position relative so that you can position the sub levels */
.menu li {
position:relative;
background: #BDDDC9; /* BG colour of boxes norm */
height: 26px; /****/
}
.sub {
margin: 0;
}
/* get rid of the table */
.menu table {
position:absolute;
border-collapse:collapse;
top:0;
left:0;
z-index:100;
font-size:1em;}
/* style the links */
.menu a, .menu a:visited {
display:block;
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color:#000;
text-indent:5px;
border:1px solid #fff;
border-width:0 1px 1px 0;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {background:#d4d8bd; width:150px; w\idth:149px;}
/* style the link hover */
* html .menu a:hover {color:#fff; background:#949e7c;}
.menu :hover > a {
color:#fff;
background:#949e7c; /****hover bg color */
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top:0;
left:150px;
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul {
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {
visibility:visible;
}
.content
{
float: left;
text-align: left;
margin-right: 10px;
margin-left: 3px;
margin-top: 0px; /*appears to have no effect oon the page.*/
width: 706px;
height: 560px;
/* overflow: auto; */
background: #000;
background: url('/images/trans_tortoise.png') bottom right no-repeat;
}
.footer
{
text-align: center;
margin-left: auto;
margin-right: auto;
width: 891px;
margin-top: 0px;
margin-bottom: 0px;
/* background-color: #ffffff;*/
}
.smlfooter
{
font-size: 10pt;
}
.lrgfooter
{
font-size: 12pt;
}
.dansgalaxycopyright
{
font-size: 10pt;
}
.logort{
float: right;
padding: 12px 10px 0 0;
}
.fltlft{
float: left;
}
.brclear
{
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}
/******* Curly corner div *********/
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.curlycontainer{
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 150px;
margin-left: 2px;
}
.curlycontainer .innerdiv{
background: transparent url(images/brcorner.gif) bottom right no-repeat;
position: relative;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}
.eventcurlycontainer{
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 550px;
margin-left: 170px;
}
.eventcurlycontainer .innerdiv{
background: transparent url(images/brcorner.gif) bottom right no-repeat;
/* position: relative; * This means that the menu works, with this working the text in it appears over the menu things */
left: 2px;
top: 2px;
padding: 1px 10px 15px 5px;
}
a.popup span {display: none}
a.popup:hover span {
display: block; width: 10em;
background-color: white; border: dotted black thin;
position: relative; /*left: 100px;*/}
.footerlogos
{
width: 44px;
height: 16px;
}
.footerlogos:hover
{
width: 70px;
height: 30px;
}
.donate_txt {
float: left;
width: 450px;
}
.donate {
float: right;
text-align: center;
padding: 5px 5px 5px 5px;
margin-right: 4px; /* moves box away slighlt from edge of main section */
border-width: 1px;
border-spacing: 0;
border-style: dotted;
border-color: #000000;
}
Ok in the template you will see theres a few PHP variables and a few if/else statments
the template also has a Sitelock system but you dont need to worry about that as i can add that later.
You will see
$core stands for the main domain (in this case
http://calm.dansgalaxy.co.uk)
and you should have all urls in the format of '.$core.'/images/image.png
Also you can see i have a if/else statment for my search box so i can easily turn it on and off via my control panel.
It is preferd that the design looks ok both with and with out a search box so i can have this functionality
to look at the current template live
http://calm.dansgalaxy.co.uk
To submit a template please email the template.inc.php and style and the images to
calm@Dansgalaxy.co.uk i can decompress virtually any format so dont worry about what type of compression you use.
Thanks,
i look forward to the templates
Talkupation given to all templated recieved.
Dan
