SmartBox - Basics (beginner)

SmartBox - the Solution for Full Page Width Containers (advanced)

SmartBox - all JSON Editor Options (pro)


General


The Editor allows you to define Input Fields with JSON. For example, you can allow an end-user to choose a color or pick a file. This choice, in turn, gets written into a CSS class automatically, which defines the Smartbox.


The basic syntax is as follows:


In JSON format, start with the brackets, then make an entry for every class you use in the HTML definition (here: “bgbox”), inside of it, an entry for every CSS property, with it’s editor definition:


  • Class
    • Property (CSS-Property, e.g. background-color)
      • Config for Editor


You can create as many classes and properties as you want.



{

   "colorsection": { /* CSS Class */

      "background-color": { /* CSS Property */

         "inputType": "colorfield", /* Editor Input Type: Color Picker */

         "allowBlank": true /* Value can be left blank */

         /* further Editor settings */

      },

      "background-image": { /* CSS Property */

         "inputType": "filefield" /* Editor Input Type: File Picker */

      }

   }

}


Editor Configuration


inputType

This defines the input type the end user can interact with. Available types are:


text: simple text field

numberfield: allows for numeric input

colorfield: hex values & colorpicker

filefield: incms file chooser (for bg images, favicons..)

select: select-options field

checkbox: checkbox


Depending on the choosen inputType, there are more options available:


All Input Types

allowBlank (true,false): if field can be left blank by the user

value: default value


Only numberfield

minValue, maxValue

outputType: if not specified, all numberfield values will be taken as “px”. if specified, the specified outputType will be appended, so “%”, or “em”, or even “” are useful values here


Only colorfield

showAlpha (true, false): shows a opacity regulator for color


Only select

options: the selectable options, as key-value object


Example - instead of allowing the end user to choose any color, you could create a select field from which he can choose 3 color options:


{

   "colorsection": { /* CSS Class */

      "background-color": { /* CSS Property */

         "inputType": "select", /* Editor Input Type: Select Dropdown */

         "options": {

            "#ff0000": "Red",

            "#00ff00": "Green",

            "#0000ff": "Blue"

         }

      }

   }

}


label

Custom field label can be set with this. Default css attributes have labels already, but this might still be handy to use own labels.


html

If set (to true), the value will not be added to CSS, but it will look for a placeholder in the HTML markup in curly braces. So when the property name is “cls”, you can use {CLS} as placeholder in the HTML markup.


Fixed Values

Instead of having an object config for the editor, you can also add a value directly, which will then not be editable but will be added to the css directly, like: “border”: “1px solid black”.


It is recommended to paste these fixed values directly into the CSS area and not into the editor, as it's a lot more clearly.


Special Values

There are a few reserved properties with special meanings:

  • _label (string): gives the Fieldset a custom label



How to create a SmartBox with an "Options Editor" for End-Users (Step by Step)


If you want to make a SmartBox editable for end-users, without them having to mess about with CSS Code, you can do this by defining a SmartBox "Options Editor".


Important: the SmartBox Editor can only be set as long as the "Expert mode" for SmartBoxes is still active!



Let's take a slim example for a SmartBox where you can simply choose the background-color:


1. Create a new SmartBox


Name: Colorselection


HTML: <div class="colorsection">%CONTENT%</div>


2. In the Editor, we define that there's a CSS class named "colorsection". This has a property named "background-color", which we want to make "changeable" with a color picker:


{

   "colorsection": {

      "background-color": {

         "inputType": "colorfield"

      }

   }

}


3. Save and close the new SmartBox


4. When you re-open the SmartBox, you can see that the Background Color is now editable with a color picker:



5. If you remove the "Expert mode" SmartBox in "Settings / General Settings", you will no longer see the JSON-Editor. You will only see the user friendly editor fields you've defined.


6. If the CSS class (in this case) "colorsection" requires further CSS, you can add an according CSS class definition in the CSS field of the SmartBox.



Examples


SmartFlexi


HTML:


<div class="smartflexi">%CONTENT%</div>




CSS:


.smartflexi label,
.smartflexi button,
.smartflexi p,
.smartflexi h1,
.smartflexi h2,
.smartflexi h3,
.smartflexi h4,
.smartflexi h5 {
 color: inherit !important; 
}



Editor:


{
    "smartflexi": {
        "_label": "SmartFlexi",
        "color": {
            "label": "Font Color",
            "inputType": "colorfield",
            "showAlpha": true  
        },
        "background-color": {
            "label": "Background Color",
            "inputType": "colorfield",
            "showAlpha": true
        },
        "border": {
            "label": "border",
            "fields": {
                "border-style": {
                    "label": "Style",
                    "inputType": "select",
                    "options": {
                        "solid": "Solid",
                        "dashed": "Dashed",
                        "dotted": "Dotted"  
                    },
                    "value": "solid"  
                },
                "border-width": {
                    "label": "Width",
                    "inputType": "numberfield",
                    "value": "1"  
                },
                "border-color": {
                    "label": "Color",
                    "inputType": "colorfield",
                    "value": ""  
                },
                "border-radius": {
                    "label": "Radius",
                    "inputType": "numberfield",
                    "value": "5"  
                }  
            }  
        },
        "padding": {
            "label": "Padding (px)",
            "fields": {
                "padding-top": {
                    "label": "Top",
                    "inputType": "numberfield",
                    "value": "20"  
                },
                "padding-bottom": {
                    "label": "Bottom",
                    "inputType": "numberfield",
                    "value": "20"  
                },
                "padding-left": {
                    "label": "Left",
                    "inputType": "numberfield",
                    "value": "20"  
                },
                "padding-right": {
                    "label": "Right",
                    "inputType": "numberfield",
                    "value": "20"  
                }  
            }  
        }  
    }
}


Standard SmartBox with Color Mask



HTML: 


<div class="smart-box smart-main {CLS}">
    <div class="smart-box-container smartbox-main-inner">
        %CONTENT%
    </div>
</div>


CSS:


#main,.ym-column{padding-top:0;padding-bottom:0;}
.smart-mask{
  position: absolute;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
}
.smart-box-container{position:relative;}



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"
    }
  },
  "smart-mask": {
    "_label": "Mask",
    "background-color":{
      "label": "Color",
      "inputType": "colorfield",
      "value": "",
      "showAlpha": true
    }
  }
}