Working with styles

Working with styles

margin

Like the CSS property, margin is used to specify the amount of outside space for a certain element. However, in Appzio you must specify all margin values in one line but without using a measurement unit.

Example

$this->getText('Testing the margin property', array(
    'margin' => '10 10 10 10'
));

padding

Like the CSS property, padding is used to specify the amount of space inside of an element. Like the Appzio margin property, the values must be specified in a single statement.

Example

$this->getText('This text will have some padding', array(
    'background-color' => '#FAFAFA',
    'padding' => '10 10 10 10'
));

color

Specifies the text color of an element. Accepts only hexadecimal values.

Example

$this->getText('This text will be colored', array(
    'color' => '#DBDBDB'
));

text-align

Specifies the text alignment of the element

Available Parameters

right

will align text right

left

will align text left

center

will align text in the center

Example

$this->getText('This is right aligned', array(
    'text-align' => 'right'
));

font-size

Specifies the font size of the text in the element. Must not have a measurement unit after the number.

Example

$this->getText('This is slightly larger text', array(
    'font-size' => '24'
));

font-ios

Specifies what font family should be used on iOS devices

Example

$this->getText('This will  look quite nice on iOS', array(
    'font-ios' => 'OpenSans'
));

font-android

Specifies the font family that will be used on android devices

Example

$this->getText('This will look quite nice on Android devices', array(
    'font-android' => 'OpenSans'
));

width

Specifies the width of the element. Must not have measurement unit after the value.

Example

$this->getImage('sample-image.png', array(
    'width' => '40'
));

height

Specifies the height of the element. Must not have a measurement unit after the value.

Example

$this->getImage('sample-image.png', array(
    'height' => '60'
));

border-radius

Used to make round corners on elements. Must not have a measurement unit after the given value.

Example

$this->getImage('sample-image', array(
    'border-radius' => '3' // Slightly rounded image
));

border-color

Specifies the border color for the element. Accepts only hexadecimal values.

Example

$this->getImage('sample_image.png', array(
    'border-color' => '#000000'
));

border-width

Specifies the width of the element border. Must not have a measurement unit after the value.

Example

$this->getImage('sample_image.png', array(
    'border-width' => '5'
));

background-color

Specifies the background color of the element. Accepts only hexadecimal values.

Example

$this->getRow(array(
    ... // Elements here
), array(
    'background-color' => '#FAFAFA'
));

background-image

Specifies the background image of an element. Must be provided using the getImageFileName() method that is available on the controllers.

Example

$this-getRow(array(
    ... // Elements here
), array(
    'background-image' => $this->getImageFileName('background_image.png'),
));

background-size

Specifies the size of the background image.

Available Parameters

cover

Will cover the whole element

contain

Will be contained and fully visible in the element

Example

$this-getRow(array(
    ... // Elements here
), array(
    'background-size' => 'cover'
));

floating

Specifies whether the element is floating without giving it a floating direction. Accepts a boolean value. If not specified all elements will not be floating by default.

Available Parameters

true

the element is floating

false

the element is not floating

Example

$this->getText('This text will be floating', array(
    'floating' => true
));

float

Specifies what direction the element will be floating in.

Available Parameters

left

the element will be floating to the left

right

the element will be floating to the right

Example

$this->getText('This element will be floated to the right', array(
    'floating' => 1,
    'float' => 'right'
));

vertical-align

Like the CSS property with the same name, specifies the vertical alignment of the element.

Available Parameters

bottom

Element will be vertically aligned to the bottom

middle

Element will be vertically aligned to the middle

top

Element will be vertically aligned to the top

Example

$this->data->scroll[] = $this->getImage('small_icon.png', array(
    'width' => 15, 
    'margin' => '0 7 0 0',
     'vertical-align' => 'middle'
));
$this->data->scroll[] = $this->getText('This is a label that must be aligned with the icon', array(
    'style' => 'property-description'
));

shadow-color

Specifies the shadow color of the element. Accepts only a hexadecimal value.

Example

$this->getRow($row, array(
    'shadow-color' => '#33000000'
));

shadow-offset

Specifies the shadow offset of the element. Accepts a string that must contain the X offset and Y offset separated by a whitespace. Measurement units must not be added after the values.

Example

$this->getRow($row, array(
    'shadow-offset' => '0 3'
));

font-weight

Specifies the font weight of the element. It also depends on the font that you’re using and whether it supports different weights.

Example

$this->getText('This text will be bold', array(
    'font-weight' => 'bold'
));