{"title":"Styling Layers","id":51940,"link":"https:\/\/env.averta.net\/en\/step\/styling-layers\/","parent":[51827],"content":"

Here you can find out how to add custom style to a layer and set different margin and padding sizes depend on the active breakpoint<\/a>.<\/p>\n

Adding custom styles<\/h2>\n

You can add a style or class name to the layer element like any other html element. In addition, as Master Slider moves each layer inside a container named frame<\/code>, sometimes you need to add style or class name to the frame element not the layer element directly. To add class name, you can use data-frame-class<\/code>, for style data-frame-style<\/code> and for id data-frame-id<\/code> attributes. The example below defines class name and style for the layer frame element.<\/p>\n

    <div id=\"masterslider\" class=\"master-slider\">\r\n      <div class=\"ms-slide\">\r\n        <!-- .... -->\r\n        <div class=\"ms-layer\" \r\n             data-type=\"text\" \r\n             data-frame-class=\"custom-text-layer\" \r\n             data-frame-style=\"background:red;\"\r\n        >\r\n          Text layer content here...\r\n        <\/div>\r\n        <!-- .... -->\r\n      <\/div>\r\n      <!-- .... -->\r\n    <\/div><\/pre>\n
Adding padding and margin<\/h2>\n
Layers can get different padding and margin values depend on the active breakpoint in the slider. To define it, you can use data-paddingset<\/code> and data-marginset<\/code> attributes. Margin or padding value for each breakpoint should be separated by comma and the order of the values should be the same as the breakpoints from large to small. The following example adds margin and padding to a text layer.<\/p>\n
    <div id=\"masterslider\" class=\"master-slider\">\r\n      <div class=\"ms-slide\">\r\n        <!-- .... -->\r\n        <div class=\"ms-layer\" \r\n             data-type=\"text\"\r\n             data-marginset=\"30px, 10px 40px, 10px\"\r\n             data-paddingset=\"10px 15px, 10px 15px 0 30px, 0\"\r\n        >\r\n          Text layer content here...\r\n        <\/div>\r\n        <!-- .... -->\r\n      <\/div>\r\n      <!-- .... -->\r\n    <\/div><\/pre>\n","type":"solution"}