Template/style system..

Dev Shed Forums Sponsor:

August 18th, 2004, 08:48 AM

clericvash

Permanently Banned

Join Date: May 2004

Location: England - Devon

Posts: 70

Time spent in forums: 12 h 9 m 17 sec
Warnings Level: 10
Number of bans: 1
Reputation Power: 0

Template/style system..

Hi all im just showing you here my template/style system in a hope that someone can help me make it into a proper system or give me advice on bits to change etc. So here goes...

The way im doing it right now is you have a table called style in there is the name of style which is also the name of the styles folder. Inside the styles folder is the css style and template files for the site.

On the site index i then have this;

PHP Code:


		
			
// Style system

$style=mysql_fetch_assoc(mysql_query("SELECT * FROM styles WHERE `used` = '1'"));

This finds the current style being used from the styles table. Then this;

PHP Code:


		
			
// Bring in the index template from the current style

include("styles/$style[name]/index.tpl.php");

Which then includes the styles index template...inside the index template is this;

PHP Code:


		
			
<?php

Print <<< END

<table width="100%" border="0" cellspacing="0" cellpadding="0">

  <tr bgcolor="#000000"> 

    <td height="82" colspan="3" valign="top"> 

      <div align="center"><img src="styles/{$style[name]}/logo.png" width="462" height="82"></div></td>

  </tr>

  <tr> 

    <td class="blocks" width="117" height="18" valign="top"> 

END;

// Left blocks

while ($block = mysql_fetch_assoc($record_set))

{

include('blocks/'.$block['name'].'.tpl.php');

} 

// End left blocks

Print <<< END

<br><div align="center"><a href="DOCS/CHANGELOG.txt">CHANGELOG</a></div>

    </td>

    <td class="blocks" width="761" valign="top"> 

END;

// Module loading

      include('modules/'.$module.'/index.php');

// End module loading

Print <<< END

    </td>

    <td class="blocks" width="117" valign="top"> 

END;

// Right blocks

while ($block2 = mysql_fetch_assoc($record_set2))

{

    include('blocks/'.$block2['name'].'.tpl.php');

} 

// End right blocks

Print <<< END

    </td>

  </tr>

</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td style="copyright"><div align="center">{$your_copy}<br>{$our_copy}</div></td>

  </tr>

</table>

END;

?>

Ive seen almost all others have no <?php & ?> tags in there template files...how do they manage to do it?...and this is a pretty bad way isn't it?

August 18th, 2004, 01:24 PM

r0dn3y

Contributing User

Join Date: Jul 2004

Posts: 246

Time spent in forums: 8 h 27 m 12 sec
Reputation Power: 8

Two ways I know of to add a template system. You can have a user defined .css file using variables called from a settings table like I described here

------ or -------

A simple form using multiple .css files that changes the selected .css file in the header. I'll define this more clearly.

PHP Code:


		
			
// in header.php



$sql = mysql_query("SELECT * FROM users WHERE us_id = '$u_id'"); // settings are stored in users table

$row = mysql_fetch_array($sql);

$num = mysql_num_rows($sql);



if ($num==0) { // not a member or not logged in

  print("<LINK href='$weburl/html/themes/blue.css' type='text/css' rel=stylesheet>

  <body bgcolor=#F0F0F0>");

// default .css file and background colour

}



else { // is a member or logged in

  print("<LINK href='$weburl/html/themes/$row[style].css' type='text/css' rel=stylesheet>

  <body bgcolor=$row[bkgrd]>"); // user selected options

}



--------------------------------



// form to change .css files and pages background colour (done on the fly)



// action changestyle



if ($action==changestyle) {

  $changestyle = mysql_query("UPDATE users SET style = '$_POST[changestyle]' WHERE id = '$id'");

  print("<h3>Changing TEXT colour</h3>");

  echo "<meta http-equiv=refresh content=\"1;url=$PHP_SELF\">";

}

// end action changestyle



// action changebkgrd



if ($action==changebkgrd) {

  $changebkgrd = mysql_query("UPDATE users SET bkgrd = '$_POST[changebkgrd]' WHERE id = 'id'");

  print("<h3>Changing BACKGROUND</h3>");

 echo "<meta http-equiv=refresh content=\"1;url=$PHP_SELF\">";

}

// end action changebkgrd



// action setdefault



if ($action==setdefault) {

  $update1 = mysql_query("UPDATE users SET bkgrd = '#F0F0F0' WHERE us_id = '$u_id'");

  $update2 = mysql_query("UPDATE users SET style = 'blue' WHERE id = '$id'");

  print("<h3>Setting back to DEFAULT</h3>");

  echo "<meta http-equiv=refresh content=\"1;url=$PHP_SELF\">";

}

// end action setdefault



// show form



if (($action=='') || ($action==0)) {

  $sql = mysql_query("SELECT * FROM users WHERE us_id = '$u_id'");

  $row = mysql_fetch_array($sql);



  print("

  <center>

  <TABLE BORDER='0' CELLSPACING='5' CELLPADDING='5'>

  <CAPTION>Theme Engine</CAPTION>

  <TR>

  <TD ALIGN=CENTER COLSPAN=3>Selections made here will affect the way you see the <b>ENTIRE</b> site</TD>

  </TR>

  <tr>

  <td align=center>Current Selections</td>

  <td align=center>Text Colour: $row[style]</td>

  <td align=center>Background: $row[bkgrd]</td>

  </tr>

  <TR>

  <form action='$PHP_SELF?action=changestyle' method=post>



  // one option for every .css file you created (referenced by name - ie: 'blue' = blue.css)

  

  <TD>Text Colour:</td><td>

  <select name=changestyle>



  <option value='black'>Black</option>

  <option value='blue'>Blue</option>

  <option value='gold'>Gold</option>

  <option value='gray'>Gray</option>

  <option value='green'>Green</option>

  <option value='pink'>Pink</option>

  <option value='purple'>Purple</option>

  <option value='red'>Red</option>

  <option value='teal'>Teal</option>

  <option value='white'>White</option>

  <option value='yellow'>Yellow</option>



  </select></td>

  <td><input type=submit value='Text Colour'></td></form>

  </tr>

  <tr>

  <form action='$PHP_SELF?action=changebkgrd' method=post name='changebkgrd'>



  // can be as many as you feel like adding



  <TD>Background:</td><td>

  <select name=changebkgrd>



  <option value='#000000'>Black</option>

  <option value='#0000FF'>Blue</option>

  <option value='#00FFFF'>Light Blue</option>

  <option value='#A0522D'>Brown</option>

  <option value='#DEB887'>Light Brown</option>

  <option value='#808080'>Gray</option>

  <option value='#F5F5F5'>Light Gray</option>

  <option value='#008000'>Green</option>

  <option value='#006400'>Dark Green</option>

  <option value='#7FFF00'>Light Green</option>

  <option value='#008080'>Medium Green</option>

  <option value='#FF6347'>Orange</option>

  <option value='#FFA500'>Light Orange</option>

  <option value='#800080'>Purple</option>

  <option value='#D8BFD8'>Light Purple</option>

  <option value='#FF00FF'>Pink</option>

  <option value='#FFB6C1'>Light Pink</option>

  <option value='#FF0000'>Red</option>

  <option value='#FFFFFF'>White</option>

  <option value='#FFFF00'>Yellow</option>

  <option value='#FFD700'>Dark Yellow</option>

  <option value='#FFFFE0'>Light Yellow</option>



  </select></td>

  <td><input type=submit name=changebkgrnd value='Background'></td></form>

  </tr></table></center>

  <br><br><center>

  <form action='$PHP_SELF?action=setdefault' method='post' name='setdefault'>

  <input type=submit name=setdefault value='Return Default Settings'></td></form>");

}

// end show form

Since I knew this would be a large post, I didn't add the error checking, etc etc to the queries (they're there tho, you should add your own).

This system allows change on the fly. If you want images to change, simply have a short if cmd in your header file.
if ($row[style]==this_style) {
$image1 = this.image;
}
etc etc for whatever images you want, and call for the images in the file using the variables.

Good luck.