SmartBox - the Solution for Full Page Width Containers (advanced)
SmartBox - all JSON Editor Options (pro)
Basic Settings & predefined SmartBoxes
This is how with the help of "SmartBoxes" you can create containers, with which (for example) you can have alternating blocks on a page with different background colors or background images.
1. Open Settings / General Settings / Expert mode - activate the checkbox "SmartBoxes"
This settings enables you to add new Smartboxes or edit existing ones. Once the SmartBoxes needed for a website have been defined, you can deactivate this setting again. This "locks" the SmartBoxes, so that end-users can only change settings you allowed them to.
2. Open Settings / Design / Layout - activate the Layout "Full page centered"
3. Now you need to create the 2 SmartBoxes which are already pre-defined. Create 2 new SmartBoxes in the list "Settings / SmartBoxes / Add":
(These are already included in our new templates, you only need to add them if you're using older templates.)
4. Definition for the pre-defined Header
HTML:
<div class="header-style">%CONTENT%</div>
The CSS Code for the class "header-style" is already part of the standard inCMS setup - so there's nothing more to do!
5. Definition for the pre-defined SmartBox
Name: SmartBox (this is our standard SmartBox for all new templates)
HTML:
<div class="smart-box smart-main {CLS}">
<div class="smart-box-container smartbox-main-inner">
%CONTENT%
</div>
</div>
Editor:
{
"smartbox-main-inner": {
"_label": "SmartBox",
"cls": {
"label": "Full Width",
"inputType": "checkbox",
"checkedValue": "fullwidth",
"uncheckedValue": "",
"html": true
},
"padding":{
"label": "Padding (px)",
"fields": {
"padding-top":{
"label": "Top",
"value": "0",
"inputType": "numberfield"
},
"padding-bottom":{
"label": "Bottom",
"value": "0",
"inputType": "numberfield"
},
"padding-left":{
"label": "Left",
"value": "0",
"inputType": "numberfield"
},
"padding-right":{
"label": "Right",
"value": "0",
"inputType": "numberfield"
}
}
}
},
"smart-main": {
"_label": "Background",
"background-color":{
"label": "Color",
"inputType": "colorfield",
"value": ""
},
"background-image": {
"label": "Image",
"inputType": "filefield"
},
"background-size": {
"label": "Image Size",
"inputType": "select",
"options":{
"auto": "Auto",
"cover": "Cover",
"contain": "Contain"
},
"value": "auto"
},
"background-repeat": {
"label": "Image Repeat",
"inputType": "select",
"options":{
"repeat": "Repeat",
"no-repeat": "No repeat",
"repeat-x": "Horizontal repeat",
"repeat-y": "Vertical repeat"
},
"value": "no-repeat"
},
"background-position": {
"label": "Image Position",
"fields": {
"background-position-x": {
"inputType": "select",
"label": "X-Axis",
"options":{
"left": "Left",
"center": "Center",
"right": "Right"
},
"value": "center",
"width": "227"
},
"background-position-y": {
"inputType": "select",
"label": "Y-Axis",
"options":{
"top": "Top",
"center": "Center",
"bottom": "Bottom"
},
"value": "center",
"width": "227"
}
}
},
"background-attachment": {
"label": "Image Parallax",
"inputType": "checkbox",
"checkedValue": "fixed",
"uncheckedValue": "scroll"
}
}
}
6. You can use the SmartBoxes with the Content Module "SmartBox":
Or by assigning the SmartBoxes to an existing module (e.g. "Grid", or "Text") with the small SmartBox icon:
How to Use the standard "Smartbox" with 100% Page Width and a Background Color
Once you implement the "SmartBox" to your website you'll see the very user-friendly editor fields. If you want to have full width pages you should activate the "Full Width" checkbox. Furthermore you can choose the padding of the box, the background-color and/or a background-image
Our Favourite SmartBoxes
Advanced standard SmartBox
<div class="smart-box smart-main smart-border {CLS}">
<div class="smart-mask"></div>
<div class="smart-box-container smartbox-main-inner">
%CONTENT%
</div>
</div>
.smart-mask{
position: absolute;
width:100%;
height:100%;
top:0px;
left:0px;
}
.smart-box-container{position:relative;}
.smart-border{border-style: solid;box-sizing:border-box;}
{
"smartbox-main-inner": {
"_label": "SmartBox",
"cls": {
"label": "Full Width",
"inputType": "checkbox",
"checkedValue": "fullwidth",
"uncheckedValue": "",
"html": true
},
"padding":{
"label": "Padding (px)",
"fields": {
"padding-top":{
"label": "Top",
"value": "0",
"inputType": "numberfield"
},
"padding-bottom":{
"label": "Bottom",
"value": "0",
"inputType": "numberfield"
},
"padding-left":{
"label": "Left",
"value": "0",
"inputType": "numberfield"
},
"padding-right":{
"label": "Right",
"value": "0",
"inputType": "numberfield"
}
}
}
},
"smart-main": {
"_label": "Background",
"background-color":{
"label": "Color",
"inputType": "colorfield",
"value": ""
},
"background-image": {
"label": "Image",
"inputType": "filefield"
},
"background-size": {
"label": "Image Size",
"inputType": "select",
"options":{
"auto": "Auto",
"cover": "Cover",
"contain": "Contain"
},
"value": "auto"
},
"background-repeat": {
"label": "Image Repeat",
"inputType": "select",
"options":{
"repeat": "Repeat",
"no-repeat": "No repeat",
"repeat-x": "Horizontal repeat",
"repeat-y": "Vertical repeat"
},
"value": "no-repeat"
},
"background-position": {
"label": "Image Position",
"fields": {
"background-position-x": {
"inputType": "select",
"label": "X-Axis",
"options":{
"left": "Left",
"center": "Center",
"right": "Right"
},
"value": "center",
"width": "227"
},
"background-position-y": {
"inputType": "select",
"label": "Y-Axis",
"options":{
"top": "Top",
"center": "Center",
"bottom": "Bottom"
},
"value": "center",
"width": "227"
}
}
},
"background-attachment": {
"label": "Image Parallax",
"inputType": "checkbox",
"checkedValue": "fixed",
"uncheckedValue": "scroll"
}
},
"smart-border": {
"_label": "Border",
"border":{
"label": "Border (px)",
"fields": {
"border-top-width":{
"label": "Top",
"value": "0",
"inputType": "numberfield"
},
"border-bottom-width":{
"label": "Bottom",
"value": "0",
"inputType": "numberfield"
},
"border-left-width":{
"label": "Left",
"value": "0",
"inputType": "numberfield"
},
"border-right-width":{
"label": "Right",
"value": "0",
"inputType": "numberfield"
}
}
},
"border-color":{
"label": "Color",
"inputType": "colorfield",
"value": ""
}
},
"smart-mask": {
"_label": "Mask",
"background-color":{
"label": "Color",
"inputType": "colorfield",
"value": ""
},
"opacity":{
"label": "Opacity",
"inputType": "textfield",
"value": "0"
}
}
}