Menu

The TPage class: style

Referencing CSS files

There are different ways of adding style to a page. The most indicated method is putting your styles in separate css files and reference them in your page header.

To reference css files in your TPage, you can set the css[] property. This can be set as an array containing as many css files as you want, or as a simple string in case you want to reference one single css file (thus also overriding the default base css that is automatically included). If you don't want to reference any css files, you can set the css[] property as either a blank string or an empty array.

Examples:

<?php
//This will add two css references to the already existing ones:
$page->css[] = 'mystyle.css';
$page->css[] = 'another_style.css';
<?php
//This will set these two css references as the only ones in your page, 
//removing any other previously added:
$page->css = array('mystyle.css', 'another_style.css');
<?php
//This will set one single css reference in your page, removing 
//any other previously added:
$page->css = 'mystyle.css';
<?php
//Either one of these statements will leave your page with no references 
//to any css file at all:
$page->css = '';
//or:
$page->css = array();

Embedding style rules in the page head

Instead of referencing a separage css file, you can add style rules directly to the head element of your page. You do this by setting the style[] property.

As with the css[] property, you can treat style[] as either a string or an array.

In the following examples, we will be adding rules to set the font size and background colour of the body element of the page, as well as setting the decoration of links to both an underline and an overline.

<?php
//Treat the style property as plain string:
$page->style = "body {font-size:10pt; background-color: silver;} a {text-decoration: underline overline;}";
<?php
//Treat the style property as a simple array:
$page->style = array(
    'body {font-size:10pt; background-color: silver;}', 
    'a {text-decoration: underline overline;}'
    );
<?php
//Treat style as a simple associative array:
$page->style = array(
    'body' => 'font-size:10pt; background-color: silver;', 
    'a' => 'text-decoration: underline overline;'
    );
<?php
//Treat style as a full associative array:
$page->style = array(
    'body' => array(
        'font-size' => '10pt',
        'background-color' => 'silver'
        ),
    'a' => array(
        'text-decoration' => 'underline overline'
        )
    );
<?php
//Treat style as a mixed array:
$page->style = array(
    'body' => array(
        'font-size' => '10pt',
        'background-color' => 'silver'
        ),
    'a' => 'text-decoration: underline overline;'
    );

In any of these cases, the following markup will be added to the head section of your page:

<style>
body {
font-size: 10pt;
background-color: silver;
}

a {
text-decoration: underline overline;
}
</style>
Posted by panglossa 2013-04-09 Labels: style page css head embed reference TPage

Log in to post a comment.