Smarty Forum Index Smarty
The discussions here are for Smarty, a template engine for the PHP programming language.

Smarty & CSS - kinda' stuck.....

 
Post new topic   Reply to topic    Smarty Forum Index -> General
View previous topic :: View next topic  
Author Message
JWM6
Smarty n00b


Joined: 17 Mar 2008
Posts: 3

PostPosted: Mon Mar 17, 2008 5:53 pm    Post subject: Smarty & CSS - kinda' stuck..... Reply with quote

So I've discovered Smarty templates and started to play with the functionality. Ran into the example that uses CSS to color alternating line item rows but CAN NOT get the rows to alternate colors with the CSS.

BTW: I am pointing to the correct stylesheet.css since the color of the title does change when I exit the css file. I read the previous posts and this is a common cause of failure...

I have included the code below. Seems that color1 & color 2 never get the values from the style sheet.

Help... Thanks,


alternating.php
Code:

<?
//
// example using Smarty templates
//

error_reporting(E_ALL);
ini_set('display_errors','on');

require '../libs/Smarty.class.php';

// create object
$smarty = new Smarty;
$smarty->caching = false;      // never cache

// assign an associative array of data
$smarty->assign('users', array(
   array('name' => 'bob', 'phone' => '555-3425', 'email' => 'bob@jones.com', 'active' => 'True'),
   array('name' => 'jim', 'phone' => '555-4364', 'email' => 'jim@bob.com', 'active' => 'False'),
   array('name' => 'joe', 'phone' => '555-3422', 'email' => 'joe@baker.com', 'active' => 'True'),
   array('name' => 'jerry', 'phone' => '555-4973', 'email' => 'jerry@lewis.com', 'active' => 'True'),
   array('name' => 'fred', 'phone' => '555-3235', 'email' => 'fred@flintstone.com', 'active' => 'False')
   ));


// display it
$smarty->display('alternating.tpl');

?>


alternating.tpl
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
{$title|default:'Alternating'}
</title>
<link rel="stylesheet" type="text/css" href="../css/stylesheet.css" title="StyleSheet" media="all" />
</head>

<body>

Alternate colored rows

<table border="1" >
{section name=mysec loop=$users}
{strip}
   <tr bgcolor="{cycle values="color1,color2"}">
      <td>{$users[mysec].name}</td>
      <td>{$users[mysec].phone}</td>
      <td>{$users[mysec].email}</td>
      <td>{$users[mysec].active}</td>
   </tr>
{/strip}
{/section}
</table>

</body>

</html>


stylesheet.css
Code:

color1 { color:#AAAAAA }
color2 { color:#FFFFFF }
body {
   font-family: arial, helvetica, serif;
   color:#000099
}
Back to top
View user's profile Send private message
mohrt
Administrator


Joined: 16 Apr 2003
Posts: 7368
Location: Lincoln Nebraska, USA

PostPosted: Mon Mar 17, 2008 6:57 pm    Post subject: Reply with quote

At first glance, I think this the problem. I don't think you can use a css class in a bgcolor parameter. The resulting HTML should be:

<tr bgcolor="#aabbcc"> (no css used)

Or, use a stylesheet:

<tr class="myclass">

Then define the myclass colors/styles in the css.

CSS experts, please chime in Wink
Back to top
View user's profile Send private message Visit poster's website
JWM6
Smarty n00b


Joined: 17 Mar 2008
Posts: 3

PostPosted: Mon Mar 17, 2008 7:35 pm    Post subject: Reply with quote

Fixed... with mohrt's suggestion and a bit more researching and playing my little example is now working...

Hope this helps someone else in the same pickle as I was...

This is what the tpl & css file look like now. Same .php file

Thanks,

alternating.tpl
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
{$title|default:'Alternating'}
</title>
<link rel="stylesheet" type="text/css" href="../css/stylesheet.css" title="StyleSheet" media="all" />
<link href="../../css/stylesheet.css" rel="stylesheet" type="text/css">
</head>

<body>
<h1>Alternate colored rows</h1>

<table border="1" >
{section name=mysec loop=$users}
{strip}
   <tr class="{cycle values="color1,color2"}">
      <td>{$users[mysec].name}</td>
      <td>{$users[mysec].phone}</td>
      <td>{$users[mysec].email}</td>
      <td>{$users[mysec].active}</td>
   </tr>
{/strip}
{/section}
</table>

</body>

</html>



stylesheet.css
Code:

tr.color1 {
background-color:#999999; /* grey */
}

tr.color2 {
background-color:#FFFFFF; /* white */
}

h1 {
   font-family: arial, helvetica, serif;
   color:#000099
}
Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic    Smarty Forum Index -> General All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group
Protected by Anti-Spam ACP