PHP Classes

CSS styling

Recommend this page to a friend!

      PHP Forms Class with HTML Generator and JavaScript Validation  >  PHP Forms Class with HTML Generator and JavaScript Validation package blog  >  How to Show Google Ma...  >  All threads  >  CSS styling  >  (Un) Subscribe thread alerts  
Subject:CSS styling
Summary:Applying my own css styles
Messages:9
Author:mlmarius
Date:2007-05-30 16:46:39
Update:2012-02-21 02:12:53
 

  1. CSS styling   Reply   Report abuse  
Picture of mlmarius mlmarius - 2007-05-30 16:46:39
Hello , i would like to know how i can apply my own styles for the entire form ( not just for the validation errors ) and the error messages that apperar after server-side validation . Or maybe some pointer to where i can read about this . Allso ... an unrelated question witch i don't think it's so important as to start another thread : I get an error in my form if i do not define this element :
{
"TYPE"=>"image",
"ID"=>"image_subscribe",
"SRC"=>"http://www.phpclasses.org/graphics/add.gif",
"ALT"=>"Submit subscription",
"STYLE"=>"border-width: 0px;" }
Is it mandatory ? Thanks

  2. Re: CSS styling   Reply   Report abuse  
Picture of Manuel Lemos Manuel Lemos - 2007-05-30 19:01:32 - In reply to message 1 from mlmarius
You can use CLASS and STYLE parameters in the AddInput call to specify the styles that the inputs will use render when they are not invalid. You can also use LabelCLASS and LabelSTYLE to define the style of labels.

  3. Re: CSS styling   Reply   Report abuse  
Picture of Geoff Stacey Geoff Stacey - 2012-02-15 17:55:55 - In reply to message 1 from mlmarius
I hope I can bring this up in an old thread like this.

I am trying to remove the borders from the labels. I have tried both LabelCLASS and LabelSTYLE, but I must be doing something wrong. My code is as follows:


$form->AddInput(array(
"TYPE"=>"select",
"NAME"=>"cust_code",
"ID"=>"cust_code",
"VALUE"=>25,
"OPTIONS"=>$customers,
"LABEL"=>"<u>C</u>lient",
"LabelCLASS"=>"label",
"LabelSTYLE"=>"border: 0px;",
"TABINDEX"=>1,
"ACCESSKEY"=>"C"
));
and in my CSS script:


.label [
border: 0px;
}

I have a link to the style sheet containing the above script in both the php script which has the AddInput and in the template.

There is still a box around my label. How should I be doing this?

Regards,

Geoff.


  4. Re: CSS styling   Reply   Report abuse  
Picture of Manuel Lemos Manuel Lemos - 2012-02-16 03:55:13 - In reply to message 3 from Geoff Stacey
Can you upload a minimal example script that demonstrates the problem to see if I can reproduce it?

  5. Re: CSS styling   Reply   Report abuse  
Picture of Geoff Stacey Geoff Stacey - 2012-02-16 14:38:36 - In reply to message 4 from Manuel Lemos
This is php code in the "php" sub-directory:

_________________________________________________________
********************************************************
<?php
/*
* project_form.php
*
* @(#) $Header: /home/mlemos/cvsroot/forms/test_form.php,v 1.34 2008/08/16 04:53:46 mlemos Exp $
*
*
/*
* Generate a new Refno from the existing highest one.
*/
include("dbinfo.inc.php");
mysql_connect('localhost',$username,$password);
@mysql_select_db($database) or die( "Unable to select database");
$query = "SELECT MAX(refno) FROM project";
$refno = mysql_query($query) or die("Unable to find Highest Project ref");
$refno = mysql_result($refno,0)." ";
$refno = $refno + 1;
/*
* Include form class code.
*/
require("forms.php");
require("form_date.php");
/*
require("form_linked_select.php");
require("form_mysql_linked_select.php");
*/
$day_seconds=60*60*24;
$start_date=strftime("%Y-%m-%d",time()+1*$day_seconds);
$end_date=strftime("%Y-%m-%d",time()+365*$day_seconds);
$today='now';
$host="localhost";
$form=new form_class;
$form->NAME="project_form";
$form->METHOD="POST";
$form->ACTION="";
$form->debug="trigger_error";
$form->ResubmitConfirmMessage=
"Are you sure you want to submit this form again?";
$form->OutputPasswordValues=1;
$form->OptionsSeparator="<br />\n";
$form->ShowAllErrors=1;
$form->InvalidCLASS='invalid';
$form->ErrorMessagePrefix="- ";
$form->ErrorMessageSuffix="!";

/*
* Define the form field properties even if they may not be displayed.
*/
$form->AddInput(array(
"TYPE"=>"select",
"NAME"=>"cust_code",
"ID"=>"cust_code",
"VALUE"=>25,
"OPTIONS"=>$customers,
"LABEL"=>"<u>C</u>lient",
"LabelCLASS"=>"label",
"LabelSTYLE"=>"border: 0px;",
"TABINDEX"=>1,
"ACCESSKEY"=>"C"
));

*/
$form->AddInput(array(
"TYPE"=>"submit",
"ID"=>"button_subscribe",
"VALUE"=>"Submit",
"ACCESSKEY"=>"u"
));

$form->AddInput(array(
"TYPE"=>"image",
"ID"=>"image_subscribe",
"SRC"=>"http://files.phpclasses.org/graphics/add.gif",
"ALT"=>"Submit",
"STYLE"=>"border-width: 0px;"
));
/*
* Give a name to hidden input field so you can tell whether the form is to
* be outputted for the first time or it was submitted by the user.
*/
$form->AddInput(array(
"TYPE"=>"hidden",
"NAME"=>"doit",
"VALUE"=>1
));
/*
* Hidden fields can be used to pass context values between form pages,
* like for instance database record identifiers or other information
* that may help your application form processing scripts determine
* the context of the information being submitted with this form.
*
* You are encouraged to use the DiscardInvalidValues argument to help
* preventing security exploits performed by attackers that may spoof
* invalid values that could be used for instance in SQL injection attacks.
*
* In this example, any value that is not an integer is discarded. If the
* value was meant to be used in a SQL query, with this attack prevention
* measure an attacker cannot submit SQL code that could be used to make
* your SQL query retrieve unauthorized information to abuse your system.
*/

$form->AddInput(array(
"TYPE"=>"hidden",
"NAME"=>"user_track",
"VALUE"=>"0",
"ValidateAsInteger"=>1,
"DiscardInvalidValues"=>1
));

$form->Connect("location", "doit", "ONCHANGE", "Click", array());


$form->LoadInputValues($form->WasSubmitted("doit"));
$verify=array();
if($form->WasSubmitted("doit"))
{
if(($error_message=$form->Validate($verify))=="")
$doit=1;
else
{
$doit=0;
$error_message=nl2br(HtmlSpecialChars($error_message));
}
}
else
{
$error_message="";
$doit=0;
}
if(!$doit)
{
if(strlen($error_message))
{
Reset($verify);
$focus=Key($verify);
}
else
$focus='cust_code';
$form->ConnectFormToInput($focus, 'ONLOAD', 'Focus', array());
}



if(!$doit)
{
if(strlen($error_message))
{
Reset($verify);
$focus=Key($verify);
}
else
$focus='rep_code';
$form->ConnectFormToInput($focus, 'ONLOAD', 'Focus', array());
}

$onload=HtmlSpecialChars($form->PageLoad());



if($doit)
{
//$form->GetInputProperty("rep_code", "SelectedOption", $rep_code);

/*
* The form is ready to be processed, just output it again as read only to
* display the submitted values. A real form processing script usually may
* do something else like storing the form values in a database.
*/
$form->ReadOnly=1;
/*
* GS 28/08/2011
* Process the form by storing in MySQL database on server
*/
mysql_connect(localhost,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");
$cust_code=$form->GetInputValue("cust_code");
$query = "INSERT INTO project (cust_code) VALUES ($cust_code)";
mysql_query($query) or die("Unable to query database");
}


/*
* If the form was not submitted or was not valid, make the page ONLOAD
* event give the focus to the first form field or the first invalid field.
*/
if(!$doit)
{
if(strlen($error_message))
{
/*
* If there is at least one field with invalid values, get the name of the
* first field in error to make it get the input focus when the page is
* loaded.
*/
Reset($verify);
$focus=Key($verify);
}
else
{
/*
* Make the Reference Number field get the input focus when the page is loaded
* if there was no previous validation error.
*/
$focus='cust_code';
}
/*
* Connect the form to the field to get the input focus when the page
* loads.
*/
$form->ConnectFormToInput($focus, 'ONLOAD', 'Focus', array());
}

$onload = HtmlSpecialChars($form->PageLoad());

?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Project Details</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link href="../style.css" rel="stylesheet" type="text/css"/>

<style type="text/css"><!--
.invalid { border-color: #ff0000; background-color: #ffcccc; }
// --></style>
</head>
<body onload="<?php echo $onload; ?>" bgcolor="#c0c0c0">
<!-- <center><h1>Autoroller Project Management System</h1></center> -->
<?php include("heading.inc.php"); ?>
<hr />
<?php

/*
* Compose the form output by including a HTML form template with PHP code
* interleaaved with calls to insert form input field
* parts in the layout HTML.
*/

$form->StartLayoutCapture();
$title="Add Project";
$body_template="test_class_body.html.php";
require("templates/form_frame.html.php");
$form->EndLayoutCapture();

/*
* Output the form using the function named Output.
*/
$form->DisplayOutput();
?>
</body>
</html>

__________________________________________________________________-
******************************************************************





This is the code in the "test_class_body.php" in the "root/php/templates" sub-directory:


__________________________________________________________________
******************************************************************

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<link href="/style.css" rel="stylesheet" type="text/css"/>
<title>Autoroller Project Management</title>
</head>

<center>
<div id="content">
<?php include("menu.php"); ?>
<div id="box_right">
<table summary="Input fields table">
<tr>
<th align="right">
<?php $form->AddLabelPart(array("FOR"=>"cust_code")); ?>:</th>
<td><?php $form->AddInputPart("cust_code"); ?></td>
<td><?php echo (IsSet($verify["cust_code"]) ? "[Verify]" : ""); ?></td>
</tr>
<?php
if(!$doit)
{
?>
<?php
}
?>

<?php
if(!$doit)
{

/*
* If the form was submitted with valid values, there is no need to display
* the submit button again.
*/
?>
<tr>
<td colspan="3" align="center"><hr /></td>
</tr>

<tr>
<td colspan="3" align="center"><?php $form->AddInputPart("image_subscribe"); ?> <?php $form->AddInputPart("button_subscribe"); ?></td>
</tr>

<tr>
<td colspan="3" align="center"><?php $form->AddInputPart("button_subscribe_with_content"); $form->AddInputPart("doit"); ?></td>
</tr>

<?php
}
?>
</table>

</div>
</div>

</center>
___________________________________________________________________
******************************************************************


This is what is in the "style.css" which is in the root directory:



__________________________________________________________________
*****************************************************************

.label [
border: 0px;
}


_____________________________________________________________________
*******************************************************************


I hope this all makes sense to you,

Thanks

Geoff

  6. Re: CSS styling   Reply   Report abuse  
Picture of Manuel Lemos Manuel Lemos - 2012-02-17 01:59:10 - In reply to message 5 from Geoff Stacey
The problem is that there is no CSS property named "border". I think you meant "border-width". Other than that, the CSS style definition in styles.css should start with { , not [ as you have.

  7. Re: CSS styling   Reply   Report abuse  
Picture of Geoff Stacey Geoff Stacey - 2012-02-17 12:00:23 - In reply to message 6 from Manuel Lemos
Apologies for not seeing the syntax errors. However I still can't seem to remove the border. I tried using the

"LabelSTYLE"=>"border-style:solid; border-width: 0px;",

and there was no change in the border.

When I use
"LabelCLASS"=>"label",

with a css style of

.label {
border-style:solid;
border-width: 0px;
}


that doesn't do it either.

I have also tried putting the border the same color as the background as I see that, when testing border in W3School, it doesn't like 0px as a width.

I used the following:
"LabelCLASS"=>"label",
with CSS
.label {
border-style:solid;
border-width: 1px;
border-color:#c0c0c0;
}

or

"LabelSTYLE"=>"border-style:solid; border-width: 1px; border-color:#c0c0c0;",
and neither of these seemed to change the color of the border.

Regards,

Geoff.




  8. Re: CSS styling   Reply   Report abuse  
Picture of Geoff Stacey Geoff Stacey - 2012-02-17 15:15:51 - In reply to message 7 from Geoff Stacey
also tried

.label {
border-style:none;
}

and


"LabelCLASS"=>"label",

also



"LabelSTYLE"=>"border-style:none;",

All didn't work.

  9. Re: CSS styling   Reply   Report abuse  
Picture of Manuel Lemos Manuel Lemos - 2012-02-21 02:12:53 - In reply to message 7 from Geoff Stacey
I tried it here and do not see any borders in the label of that input.

Keep in mind that label is the text that appears on the side of the input, in this class it is "Client" underscoring the letter C.