Customizing the layout

Adding your own CSS file

You can easily add your own style changes to P4A with a custom CSS file. All you need to do are these three steps:

• make a CSS file
• link the CSS file to your mask or application
• link th CSS class to the desired widget, mask, ec...

In the example below we will use the 'hello world' application that can be found in this manual and give the label of the txt_field1 a red, bold & uppercase look with a size of 15px.

Create the CSS file

Create the CSS file under the /p4a/applications/hello_world/ and give it a name. (i will call it my_style.css, you can of course place it anywhere you want as long it is reachable)

Now add this code to the CSS file and save it:

.my_label label * {
	text-transform:uppercase;
	font-size: 15px;
	font-weight: bold;
	color: red;
}

Notice the * in our class definition above. This is to overrule the default style defined in the screen.css.php. If the things you like to change are not present in the default definition, you can drop the *.

Link the custom CSS file in your mask

Now we have a custom CSS file, we must link it to our mask where we wish to change the style of our input box label.

Edit the hello_world_firstmask.php and add the line below after parent::__construct()

p4a::singleton()->addCss("http://localhost/p4a/applications/hello_world/my_style.css");

Add the CSS class to the widget

Now the custom CSS file is loaded by P4A we can add the CSS class to our txt_field1 widget.

//ok let's build a basic textfield
$this->build("p4a_field", "txt_field1")
	->setLabel("Text Field 1")
	->addCSSClass("my_label");

Reload your page and you will see a big red label in front of the text field.

Variants

You can easily change the labels of all your field if you overrule the default ones. To affect all labels on your mask, you need to overrule the p4a_field class like this:

.p4a_field label * {
	text-transform:uppercase;
	font-size: 15px;
	font-weight: bold;
	color: red;
}

This is possible for all P4A components, just take a look in the screen.css.php file for the corresponding name.