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.

$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.

$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.

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

text-align

Specifies the text alignment of the element

right

left

center

$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.

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

font-ios

Specifies what font family should be used on iOS devices

$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

$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.

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

height

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

$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.

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

border-color

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

$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.

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

background-color

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

$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.

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

background-size

Specifies the size of the background image.

cover

contain

$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.

true

false

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

float

Specifies what direction the element will be floating in.

left

right

$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.

bottom

middle

top

$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.

$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.

$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.

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