Bloxby’s page builder is configured mainly through the configuration module config.js, located in /assets/js/modules/.
If you would like to make modifications to the page builder’s configuration, you can either do this directly to the config.js file, or you can place your custom settings in the config_custom.js file (found in the same location). If you were to make your changes to the config.js file directly, there’s a good chance they might end up being overwritten in a future update. Therefor, the recommended method is to place your custom settings in the config_custom.js file instead.
Both methods require the application to be rebuild using Webpack. Without running Webpack, the changes to Javascript source files won’t be functional in the application.
Using the config_custom.js file
Settings placed in the config_custom.js overwrite their counterparts in the original configuration file (config.js). Therefor, the best approach is to copy the entire object from the original config.js file, paste it into the config_custom.js file and then apply your customizations. The config_custom.js contains a sample entry for the module.exports.inputAppend object, this will give you an idea how the file works.
Available config objects
We will discuss each of the available objects found in config.js below:
- module.exports.google_api_url
Url to the Google fonts API end-point. This setting is used to retrieve Google fonts and apply them to Bloxby websites. - module.exports.pageContainer
This variable holds a string value which is a valid CSS selector for the wrapping DIV found within the skeleton.html file. - module.exports.bodyPaddingClass
This variable holds a string containing a CSS class name which is used to add additional padding to the <body> elements of blocks (used in combination with fixed position navigation bars). - module.exports.editableItems
This is an object literal holding pairs of CSS selectors and stylable properties for HTML elements matching the CSS selectors. Let’s take a closer look at a possible entry in this object:'span.fa': ['color', 'font-size'],This entry targets all tags which have “fa” as part of it’s class name attribute. The second part, an array, holds either valid CSS properties OR references to entries in the module.exports.customStyleDropdowns object (discussed below). When using regular CSS properties a regular form input field is presented to the end-user in which he or she can provide the value for the CSS property OR a dropdown with predefined options is presented (the latter in case the select + property combination has an entry in the module.exports.editableItemOptions object). Whenever the CSS property is color-related (text color, background color, etc) a color picker is presented to the end-user. When the CSS property matches “background-image”, clicking the input field will launch the image library modal so the end-user can choose an image. When instead of a CSS property, a reference to an try in the module.exports.customStyleDropdowns is used, a dropdown is presented allowing the end-user to pick a class name option from that dropdown.
- module.exports.inputAppend
This array is used to append “px” to certain style input fields. This allows the end-user to simply provide a numeric value, the “px” is appended automatically when the styling is applied/saved. - module.exports.editableItemOptions
This object is used to present the end-user with a dropdown menu of predefined options for the CSS property for him or her to choose from. Say for example, the administrator wants the end-user to use a font-weight of either 400 or 600, in this case the administrator would specify this with the following entry in the object:'nav a : font-weight': ['400', '700']Please note that the “nav a” part needs to exactly match a CSS selector from the module.exports.editableItems object.
- module.exports.customStyleDropdowns
This object is used to create CSS class dropdown for CSS selectors specified in module.exports.customStyleDropdowns. Please consider the following example:'a.btn': ['btn-style'] ... module.exports.customStyleDropdowns = { 'btn-style': { 'label': 'Button style', 'values': { 'default': 'btn-default', 'primary': 'btn-primary', 'success': 'btn-success', 'info': 'btn-info', 'warning': 'btn-warning', 'danger': 'btn-danger' }, 'default': 'btn-default' } }The example above, the ‘btn-style’ part references to a matching entry in the module.exports.customStyleDropdowns object. The “label” property contains the text label shown to the end-user. The “values” property contains an object listing the available options shown in the dropdown and the “default” property contains the default value (this one is also set to selected when none of the values is currently applied to the element as a class name).
- module.exports.responsiveModes
Contains the screen widths used by the responsive mode toggle. - module.exports.autoSaveTimeout
This is interval applied to the auto save feature. - module.exports.sourceCodeEditSyntaxDelay
This setting is used by the HTML source code editor; it is the delay in milliseconds before a syntax error is shown in the error drawer below the editor. - module.exports.externalJS
Additional external Javascript files loaded in each iframe on the canvas. - module.exports.aceTheme
The theme used by the Ace editor (the HTML source code editor). - module.exports.navSelector
A CSS selector used to determine if an anchor tag is part of a navigation bar. This is used to determine wether to apply the ACTIVE checkbox when links are being edit. - module.exports.navActiveClass
Class name applied to <li></li>’s to mark it’s child anchor tag as ACTIVE. - module.exports.sentApiURL
URL to the Sent API end-point (used to submit forms inside Bloxby pages). - module.exports.sideMenuArrowSVG
SVG code used for the arrow icon in the sidebar - module.exports.froalaConfig
Configuration object for the Froala text editor. More information can be found in the official Froala documentation. - module.exports.runInBlocks
Contains code (a Javascript function) which gets executed in every block loaded on the canvas. - module.exports.rebuildSlideshowNavigation
Code that rebuilds the carousel navigation inside blocks on the canvas. - module.exports.inBlockBeforeSave
Code that get executed inside a block before it’s saved to the server.
Leave A Comment?
You must be logged in to post a comment.