ZURB Foundation FRIENDLY --------------- •

What is odbox CMS ?

odbox CMS is made for quick and easy websites based on ZURB Foundation framework. It's better to know HTML/CSS/JS/Json and MySQL languages for advanced usages.

Download the odbox.1.0.zip CMS then extract it to your web server and follow the quick and easy step by step configuration.

What is odbox Templates ?

The odbox template is only CSS file based on ZURB Foundation framework.

What are Sections to use with odbox CMS ?

A section is a 100% width of a page of the website made from ZURB Foundation framework default styles and tags. A page can contain one or more sections. Sections can be installed by the sections library from super-administrator's panel or self-created.

Download the o_hello_world.zip section for exemple.

SEO FRIENDLY ------------- •


DEV mode

How to create a Section

A section is a folder named by the Section Uniq ID (suniqid ––> see section.json file below) that contain the following files. Then install the section by uploading this zipped folder from the sections library and put it inside your desired page from super-administrator's panel. There is sections for navigations, headers, contents, features, leads [...].

  • sketch.svg

    The sketch is the thumbnail that illustrate the most the section. The sketch as to be a svg file. The sketch below could illustrate a simple line text section.

  • index.php

    Start from scratch index.php file inside the section folder:

    
                
  • admin.php

    Start from scratch admin.php file inside the section folder:

    
                
  • section.json

    Minimal required code of the section.php file inside the section folder:

      {
        "suniqid"             : "string",   // This must be unique (must not start with underscore "_").
        "name"                : "string",   // String that will appear as the name of the section.
        "short_description"   : "string",   // Short description of the section.
        "long_description"    : "string",   // Long description of the section.
        "copyright"           : "©string",  // String of the copyright.
        "version"             : int|float,  // Version of the section.
        "compatible"          : int|float,  // Maximum version of odbox compatible with.
        "lib_name"            : "string",   // Categorie wish or suggestion.
        "cidm"                : "string",   // Simple small message that will be displayed after section installation.
      }
    
  • init.json

    This file can be empty or contain some of those options:

      {
        "o_section_medias"              : ["images","files","frames"], // Display the pickup files in the o_section_parameters. Default: []..
        "o_section_parameters"          : { // Custom options of the o_section_parameters.
          "o_help":"Lorem ipsum dolor.",           // Display the text in the o_section_parameters.
          "switch":true,                      // If bool value (true|false), this wil be a switch command in the o_section_parameters.
          "string":"default value",                      // If string value (true|false), this wil be an input field in the o_section_parameters.
          "options":{                              // If array value (true|false), this wil be a switch command option in the o_section_parameters.
            "-":"---------",           // xxxxxx.
            "fadeIn":"fadeIn",         // xxxxxx.
            "bounceIn":"bounceIn"      // xxxxxx.
          },
          "range-colonnes-1-6":3       // will create a slider between 1 to 6 with 3 as default value.
        },
        "o_section_datas"       : {    // Custom fields of the o_section_datas.
          "field_name":{               // Name of the field.
            "input":"Lorem"            // This field will be an input and its placeholder will be "Lorem".
          },
          "html_h4-1": {               // Simple html text with key class (html_h4-titre-general).
            "h4": "Le titre de la portion de datas avec 'css_class' comme class css" // html tag and text
          },
          "html_p-1": {                            // Other simple html text with key class (html_h3-titre-general).
            "p": "Lorem ipsum dolor sit amet [...]." // html tag and text
          },
          "name_a":{                                 // Name of the field.
            "textarea":"Ipsum"                       // This field will be a textarea and its placeholder will be "Ipsum".
          },
          "name_b":{                                 // Name of the field.
            "file":"one file"                        // This field will be one file pickup.
          },
          "name_c":{                                 // Name of the field.
            "files":"Add files (images, pdf...)"     // This field will be multiple files pickup.
          },
          "tpl":{                                    // Group of field that will be orderable by draging.
            "text of the add button":{               // The string that will be displayed in the add button.
              "tpl_n_x":{                            // Name of the field.
                "file":"add file"                    // This field will be one file pickup.
              },
              "tpl_n_1":{                            // Name of the field.
                "input":"placeholder"                // This field will be an input and its placeholder will be "Lorem".
              },
              "tpl_n_2":{                            // Name of the field.
                "textarea":"placeholder of textarea" // This field will be a textarea and its placeholder will be "placeholder of textarea".
              },
              "tpl_n_5":{                            // Name of the field.
                "textHTML":"placeholder of textHTML" // This field will be a textarea  withe active textHTML and its placeholder will be "placeholder of textHTML".
              },
              "tpl_n_4":{                            // Name of the field.
                "files":"Add files (images, pdf ...)"// This field will be multiple files pickup.
              }
            }
          },
          "name_d":{                                 // Name of the field.
            "textHTML":"placeholder"                 // This field will be a textarea  withe active textHTML and its placeholder will be "placeholder".
          }
        },
        "o_section_main_helper"     : {                   // This will add a new onglet "i" .
          "Title":"Text. html available (b|p|a).", // This will create a title "Title" with "Text. html available (b|p|a)" as paragraph (html tags able).
          "Titre 2":"Text. html available (b|p|a)."  // This will create a title "Titre" with "Text. html available (b|p|a)" as paragraph (html tags able).
        },
        "o_section_wording"         : {              // This will add some wording field as input field .
          "key_wording1":"wording1",                 // Default wording value.
          "key_wording2":"wording2"                  // Default wording value.
        },
        "o_section_menu"            : {       // This will add a new onglet in the o_section_parameters that will let you create advance feature of the section administration.
          "TITRE":{                           // If array value, keys will be as param in the url.
            "action_string1":"Link string 1", // Will be as param in the url and the link will displayed as "Link string 1".
            "action_string2":"Link string 2"  // Will be as param in the url and the link will displayed as "Link string 2".
          },
          "table_name_to_list_edit_and_create":"default", // If "default" as value, this will display "Create" and "Lister" links for "table_name_to_list_edit_and_create" table of the database (note: do not name the table with the default table prefix).
          "table_name_to_list":"lister"              // If "lister" as value, this will display  "Lister" links for "table_name_to_list" table of the database (note: do not name the table with the default table prefix).
        },
        "o_section_default_content" : {           //  Will register default value of the section when added to a page and not registered.
          "titre_section":"Default value.",       // The name of the field with its value.
          "description_section":"Default value."  // The name of the field with its value.
        }
        "o_section_noshot"          : false,  // Disable section shot. Default: false.  .
        "o_section_automatic"       : false,  // Only display the o_section_parameters. Default: false.
      }
    

------------------------- •

Usefull variables

Usefull vars that can be used to develop a section. Use thoses vars with the index.php file of the section :

  1. Defaults variables:
    • $suniqid –– o_hello_world
    • $sinstance –– UBvfZmHrdDMg91i
    • $o_section_id –– o_hello_world-UBvfZmHrdDMg91i
    • $o_section_url –– https://odbox.org/o-sections/99/o_hello_world/
    • $o_section_dir –– Not displayed for security reason...
    • $o_active_slug –– what-is-odbox-cms
    • $o_is_home –– 1
    • $o_parameters
      Array
      (
          [status] => 1
          [buffer] => 0
          [xtraClass] => 
          [bool option] => 1
          [string option] => 
          [list option] => -
          [range-colonnes-1-6] => 3
      )
      
    • $o_datas
      Array
      (
          [id_pages_ref] => 2
          [ancre] => what-is-odbox-cms-o_hello_world
          [mot1] => ZURB Foundation FRIENDLY --------------- •
          [mot2] => SEO FRIENDLY ------------- •
          [mot3] => ------------------------- •
          [name_a] => 
          [name_c] => 
          [n2x2_x] => 0
          [name_b] => 
          [wording] => Array
              (
                  [key_wording1] => wording1
                  [key_wording2] => wording2
              )
      
          [o_section_title] => What is odbox CMS
          [o_section_description] => Full documentation explanation.
      )
      
    • $_SESSION
      Array
      (
          [langs] => en
          [is_mobile] => 
          [device] => 
          [exploit] => 
          [browser] => 
          [URLHTTP] => https://odbox.org/what-is-odbox-cms
          [xt-o] => 20800c83ce4f300aa823634d8
      )
      
  2. Optionals variables depend on the init.json file:
    • $o_medias
      Array
      (
          [images] => Array
              (
                  [url] => Array
                      (
                          [1] => Image-JPEG-E6A6881471AA-1-20210808053419.png
                      )
      
              )
      
      )
      
    • $o_wording
      Array
      (
          [key_wording1] => wording1
          [key_wording2] => wording2
      )
      

See ya!

Download the odbox.1.0.zip CMS
MADE IN ODBNTD.COM

This site uses cookies to provide you with optimal navigation and to produce visit statistics. View details.