Documentation

Custom node styles

Attention! We strongly recommend first to learn more about Sites module REST documentation to understand how the module functions (with REST available in Bitrix24 Self-hosted editions). View this documentation as useful source when working with Bitrix24 Self-hosted editions and find out more details about API and only REST is not enough.

The article dedicated the manifest describes the style key and provides groups of styles that you can assign to a specific node. Bitrix24 Self-hosted has the option for expanding it.

Create a .style.php file inside your namespace. Please be advised, this action does not redefines existing styles, but supplements them. It's recommended to supplement styles whenever required and if they are missing.

File content is an array consisting of two sections:

return [
   'style' => [
      //
   ],
   'group' => [
      //
   ]
];

Let's review each section in more detail. You always find a full example in the self-hosted file version at the path /bitrix/blocks/bitrix/.style.php.

style section

Elements of this array is what you will see in the block design interface update. Contains keys and their values, where keys do not have a role, but values are arrays:

  • name – property name
  • property – css-property, according to specification, affected by this control
  • type – property type (as displayed in the interface)
  • items – list of property values (that interface interacts with)

Please note, that architecture-wise we do not change the style attribute within the node when updating a property, described in such manifests. We change only the class attribute, adding or deleting css class. And the interface can work only with css classes enumerated in the manifest.

Let's take a look at the example. Here's an array of css-property font-family.

'font-family' => array(
   'name' => Loc::getMessage('LANDING_BLOCK_STYLE_FONT_FAMILY'),
   'property' => 'font-family',
   'type' => 'list',
   'items' => array(
      array('name' => 'Open Sans', 'value' => 'g-font-open-sans'),
      array('name' => 'Helvetica', 'value' => 'g-font-helvetica'),
      array('name' => 'Montserrat', 'value' => 'g-font-montserrat'),
      array('name' => 'Roboto', 'value' => 'g-font-roboto'),
      array('name' => 'Roboto Slab', 'value' => 'g-font-roboto-slab'),
      array('name' => 'PT Sans', 'value' => 'g-font-pt-sans'),
      array('name' => 'PT Sans Narrow', 'value' => 'g-font-pt-sans-narrow'),
      array('name' => 'PT Sans Caption', 'value' => 'g-font-pt-sans-caption'),
      array('name' => 'Cormorant Infant', 'value' => 'g-font-cormorant-infant'),
      array('name' => 'Alegreya Sans', 'value' => 'g-font-alegreya-sans'),
      array('name' => 'Lobster', 'value' => 'g-font-lobster'),
      array('name' => 'Menlo', 'value' => 'g-font-code'),
   )
),

As you can see, it is just an array of available text fonts that will be displayed in the interface. When user selects, for example, Roboto Slab, css class g-font-roboto-slab is added to the the node, and other classes from this property will be deleted.

Naturally, template style file must have the defined css classes that are enumerated in such arrays.

As the result from the above, array "items" is the array of format [name=visual display, value=saved class].

Then, system style-types are listed .

buttons – buttons, button style are rendered via html code, saved in the key name

array('name' => '<span class="landing-ui-align landing-ui-align-center"><em></em></span>', 'value' => 'text-center'),

slider – slider bar, usually, is numerical; the name contains available values

array('name' => '14', 'value' => 'g-font-size-14'),

list – dropdown list of values

array('name' => 'Roboto Slab', 'value' => 'g-font-roboto-slab'),

palette – palette, displaying classes in colors (specific color is responsible for specific class)

array('name' => 'g-color-white-opacity-0_5', 'value' => 'g-color-white-opacity-0_5'),

group section

Usually, node can be modified by a group of css-properties. For example, not only block's padding can be changed, but shadow and background to be updated. In general, everything that block elements have. That's why style node types have indicated not a single value above, but one of groups (or array of groups), listed below.

For example, you have decided to create a new type typo-shadow with its specific set of css properties. Then the group key will look as follows

'group' => array(
   'typo-shadow' => array(
      'color', 'font-size', 'text-shadow'
   ),
)

And now you can indicate this style node in the block manifest so that it can have the listed css-properties:

'.landing-block-node-title' => array(
    'name' => 'Title',
    'type' => 'typo-shadow', 
),


© «Bitrix24», 2001-2024