,
junaidte14
12–18 minutes

How to Add Custom Option in Weebly Theme

Views: 262

Custom option in weebly theme gives admin the flexibility to choose and define different options for your theme. For example if you want to give theme user the ability to change background color of navigation menu then you can add custom option in weebly theme so that the user can easily define / change background color of navigation menu without editing the code. In this blog post we will define a custom option in weebly theme so that the user can make Logo and Navigation Menu either Block or Inline. If Block option is selected then logo and navigation menu will appear on top of each other, and if Inline option is selected then logo and navigation menu will appear in one line. Comparison is shown in following images: 

​Please Note that your theme may use different classes, ID’s and layout structure so change the codes accordingly. This Tutorial is only to explain the concept to add custom option in weebly theme.

if (typeof _W.loadedPlatformDependencies === ‘undefined’) { _W.loadedPlatformDependencies = []; }

if (typeof _W.platformElements === ‘undefined’) { _W.platformElements = []; }

if (typeof _W.platformElements[platform_element_id] === ‘undefined’) { _W.platformElements[platform_element_id] = {}; _W.platformElements[platform_element_id].deferredObject = new $.Deferred(); _W.platformElements[platform_element_id].deferredPromise = _W.platformElements[platform_element_id].deferredObject.promise(); }

if(_.intersection(_W.loadedPlatformDependencies, dependencies).length !== dependencies.length){ _.reduce(dependencies, function(promise, nextScript){ _W.loadedPlatformDependencies.push(nextScript); return promise.then(function(){ return $.getScript(nextScript); }); }, $().promise()).then(function(){ _W.platformElements[platform_element_id].deferredObject.resolve(); }); }

if (dependencies.length === 0){ _W.platformElements[platform_element_id].deferredObject.resolve(); }

_W.platformElements[platform_element_id].deferredPromise.done(function(){ var _ElementDefinition = /** * This is required for element rendering to be possible * @type {PlatformElement} * * we normalize the styles on initial load. */

(function() { var SEOHeadlines = PlatformElement.extend({ initialize: function() { // we normalize the styles on initial load. $(document).ready(function() { this.fixStyles(); }.bind(this));

this.fixStyles(); },

/** * Lots of styles are applied by default to editable areas of * the editor. To make the element looks how you want, some styles * need to be overwritten. */ fixStyles: function() { this.$(‘.editable-text’).each(function(index, value) { $(value).attr(‘style’, ”); });

this.$(‘.element’).each(function(index, value) { $(value).attr(‘style’, ”); }); } });

return SEOHeadlines; })();;

if (typeof _ElementDefinition == ‘undefined’ || typeof _ElementDefinition == ‘null’) { var _ElementDefinition = PlatformElement.extend({}); }

var _Element = _ElementDefinition.extend({ initialize: function() { // we still want to call the initialize function defined by the developer // however, we don’t want to call it until placeholders have been replaced this.placeholderInterval = setInterval(function() { // so use setInterval to check for placeholders. if (this.$(‘.platform-element-child-placeholder’).length == 0) { clearInterval(this.placeholderInterval); this.constructor.__super__.initialize.apply(this); } }.bind(this), 100); } });

_Element.prototype.settings = new PlatformElementSettings({“borderThickness_each”:[{“borderThickness_index”:0},{“borderThickness_index”:1}],”selectHeadline”:”h2″,”headlineAlignment”:”center”,”borderThickness”:2,”borderStyle”:”dashed”,”borderColor”:”#fff”,”borderRadius”:0,”headlineBgColor”:”#8d2424″,”headlineColor”:”#000″}); _Element.prototype.settings.page_element_id = “921822795207799467”;

_Element.prototype.element_id = “82855de2-bbce-42ca-943b-1e5b47d3ae5c”; _Element.prototype.user_id = “13952731”; _Element.prototype.site_id = “157540419447505247”; _Element.prototype.assets_path = “//marketplace.editmysite.com/elements/307215191696725706-1.0.0/assets/”; new _Element({ el: ‘#element-82855de2-bbce-42ca-943b-1e5b47d3ae5c’ }); }); }); }

if (typeof document.documentElement.appReady == ‘undefined’) { document.documentElement.appReady = 0; }

if (document.documentElement.appReady || (window.inEditor && window.inEditor())) { setupElement921822795207799467(); } else if (document.createEvent && document.addEventListener) { document.addEventListener(‘appReady’, setupElement921822795207799467, false); } else { document.documentElement.attachEvent(‘onpropertychange’, function(event){ if (event.propertyName == ‘appReady’) { setupElement921822795207799467(); } }); }

Code with Explanations to add Custom Option in Weebly Theme

if (typeof _W.loadedPlatformDependencies === ‘undefined’) { _W.loadedPlatformDependencies = []; }

if (typeof _W.platformElements === ‘undefined’) { _W.platformElements = []; }

if (typeof _W.platformElements[platform_element_id] === ‘undefined’) { _W.platformElements[platform_element_id] = {}; _W.platformElements[platform_element_id].deferredObject = new $.Deferred(); _W.platformElements[platform_element_id].deferredPromise = _W.platformElements[platform_element_id].deferredObject.promise(); }

if(_.intersection(_W.loadedPlatformDependencies, dependencies).length !== dependencies.length){ _.reduce(dependencies, function(promise, nextScript){ _W.loadedPlatformDependencies.push(nextScript); return promise.then(function(){ return $.getScript(nextScript); }); }, $().promise()).then(function(){ _W.platformElements[platform_element_id].deferredObject.resolve(); }); }

if (dependencies.length === 0){ _W.platformElements[platform_element_id].deferredObject.resolve(); }

_W.platformElements[platform_element_id].deferredPromise.done(function(){ var _ElementDefinition = /** * This is required for element rendering to be possible * @type {PlatformElement} * * we normalize the styles on initial load. */

(function() { var SEOHeadlines = PlatformElement.extend({ initialize: function() { // we normalize the styles on initial load. $(document).ready(function() { this.fixStyles(); }.bind(this));

this.fixStyles(); },

/** * Lots of styles are applied by default to editable areas of * the editor. To make the element looks how you want, some styles * need to be overwritten. */ fixStyles: function() { this.$(‘.editable-text’).each(function(index, value) { $(value).attr(‘style’, ”); });

this.$(‘.element’).each(function(index, value) { $(value).attr(‘style’, ”); }); } });

return SEOHeadlines; })();;

if (typeof _ElementDefinition == ‘undefined’ || typeof _ElementDefinition == ‘null’) { var _ElementDefinition = PlatformElement.extend({}); }

var _Element = _ElementDefinition.extend({ initialize: function() { // we still want to call the initialize function defined by the developer // however, we don’t want to call it until placeholders have been replaced this.placeholderInterval = setInterval(function() { // so use setInterval to check for placeholders. if (this.$(‘.platform-element-child-placeholder’).length == 0) { clearInterval(this.placeholderInterval); this.constructor.__super__.initialize.apply(this); } }.bind(this), 100); } });

_Element.prototype.settings = new PlatformElementSettings({“selectHeadline”:”h2″,”headlineAlignment”:”left”,”borderThickness”:0,”borderStyle”:”none”,”borderColor”:”#fff”,”borderRadius”:0,”headlineBgColor”:”#248d6c”,”headlineColor”:”#000″}); _Element.prototype.settings.page_element_id = “105515239649574649”;

_Element.prototype.element_id = “1822b1ed-8587-4625-b504-8f252e0a8d64”; _Element.prototype.user_id = “13952731”; _Element.prototype.site_id = “157540419447505247”; _Element.prototype.assets_path = “//marketplace.editmysite.com/elements/307215191696725706-1.0.0/assets/”; new _Element({ el: ‘#element-1822b1ed-8587-4625-b504-8f252e0a8d64’ }); }); }); }

if (typeof document.documentElement.appReady == ‘undefined’) { document.documentElement.appReady = 0; }

if (document.documentElement.appReady || (window.inEditor && window.inEditor())) { setupElement105515239649574649(); } else if (document.createEvent && document.addEventListener) { document.addEventListener(‘appReady’, setupElement105515239649574649, false); } else { document.documentElement.attachEvent(‘onpropertychange’, function(event){ if (event.propertyName == ‘appReady’) { setupElement105515239649574649(); } }); }

Manifest.json Code to add Custom Option in Weebly Theme

if (typeof _W.loadedPlatformDependencies === ‘undefined’) { _W.loadedPlatformDependencies = []; }

if (typeof _W.platformElements === ‘undefined’) { _W.platformElements = []; }

if (typeof _W.platformElements[platform_element_id] === ‘undefined’) { _W.platformElements[platform_element_id] = {}; _W.platformElements[platform_element_id].deferredObject = new $.Deferred(); _W.platformElements[platform_element_id].deferredPromise = _W.platformElements[platform_element_id].deferredObject.promise(); }

if(_.intersection(_W.loadedPlatformDependencies, dependencies).length !== dependencies.length){ _.reduce(dependencies, function(promise, nextScript){ _W.loadedPlatformDependencies.push(nextScript); return promise.then(function(){ return $.getScript(nextScript); }); }, $().promise()).then(function(){ _W.platformElements[platform_element_id].deferredObject.resolve(); }); }

if (dependencies.length === 0){ _W.platformElements[platform_element_id].deferredObject.resolve(); }

_W.platformElements[platform_element_id].deferredPromise.done(function(){ var _ElementDefinition = /** * This is required for element rendering to be possible * @type {PlatformElement} * * we normalize the styles on initial load. */

(function() { var SEOHeadlines = PlatformElement.extend({ initialize: function() { // we normalize the styles on initial load. $(document).ready(function() { this.fixStyles(); }.bind(this));

this.fixStyles(); },

/** * Lots of styles are applied by default to editable areas of * the editor. To make the element looks how you want, some styles * need to be overwritten. */ fixStyles: function() { this.$(‘.editable-text’).each(function(index, value) { $(value).attr(‘style’, ”); });

this.$(‘.element’).each(function(index, value) { $(value).attr(‘style’, ”); }); } });

return SEOHeadlines; })();;

if (typeof _ElementDefinition == ‘undefined’ || typeof _ElementDefinition == ‘null’) { var _ElementDefinition = PlatformElement.extend({}); }

var _Element = _ElementDefinition.extend({ initialize: function() { // we still want to call the initialize function defined by the developer // however, we don’t want to call it until placeholders have been replaced this.placeholderInterval = setInterval(function() { // so use setInterval to check for placeholders. if (this.$(‘.platform-element-child-placeholder’).length == 0) { clearInterval(this.placeholderInterval); this.constructor.__super__.initialize.apply(this); } }.bind(this), 100); } });

_Element.prototype.settings = new PlatformElementSettings({“selectHeadline”:”h3″,”headlineAlignment”:”left”,”borderThickness”:0,”borderStyle”:”none”,”borderColor”:”#fff”,”borderRadius”:0,”headlineBgColor”:”#fff”,”headlineColor”:”#000″}); _Element.prototype.settings.page_element_id = “408751947669104654”;

_Element.prototype.element_id = “11da22d9-61e7-434d-8db1-90f6edf39e6e”; _Element.prototype.user_id = “13952731”; _Element.prototype.site_id = “157540419447505247”; _Element.prototype.assets_path = “//marketplace.editmysite.com/elements/307215191696725706-1.0.0/assets/”; new _Element({ el: ‘#element-11da22d9-61e7-434d-8db1-90f6edf39e6e’ }); }); }); }

if (typeof document.documentElement.appReady == ‘undefined’) { document.documentElement.appReady = 0; }

if (document.documentElement.appReady || (window.inEditor && window.inEditor())) { setupElement408751947669104654(); } else if (document.createEvent && document.addEventListener) { document.addEventListener(‘appReady’, setupElement408751947669104654, false); } else { document.documentElement.attachEvent(‘onpropertychange’, function(event){ if (event.propertyName == ‘appReady’) { setupElement408751947669104654(); } }); }

First we have to define the variable in manifest.json file which is available in Assets Folder of weebly code editor. It will be a select variable having values ‘Block’ and ‘Inline’ with default value of ‘Block’. This select variable defined in manifest.json file will add a class ‘variablename-value’ in body tag, then we can use this class to design logo and navigation menu accordingly. Following code will be added in manifest.json file inside custom-options array to define this custom option in Weebly theme:

{
            “name”: “menulogoappearance”,
            “title”: “Menu Logo Appearance”,
            “type”: “dropdown”,
            “default”: “block”,
            “choices”: [
                {
                    “value”: “block”,
                    “title”: “Block” 
                },
                {
                    “value”: “inline”,
                    “title”: “Inline”
                }
            ],
            “is-body-class” : true,
            “is-less-var” : false
} 

as shown in following image:

Css Code to Add Custom Option in Weebly Theme

if (typeof _W.loadedPlatformDependencies === ‘undefined’) { _W.loadedPlatformDependencies = []; }

if (typeof _W.platformElements === ‘undefined’) { _W.platformElements = []; }

if (typeof _W.platformElements[platform_element_id] === ‘undefined’) { _W.platformElements[platform_element_id] = {}; _W.platformElements[platform_element_id].deferredObject = new $.Deferred(); _W.platformElements[platform_element_id].deferredPromise = _W.platformElements[platform_element_id].deferredObject.promise(); }

if(_.intersection(_W.loadedPlatformDependencies, dependencies).length !== dependencies.length){ _.reduce(dependencies, function(promise, nextScript){ _W.loadedPlatformDependencies.push(nextScript); return promise.then(function(){ return $.getScript(nextScript); }); }, $().promise()).then(function(){ _W.platformElements[platform_element_id].deferredObject.resolve(); }); }

if (dependencies.length === 0){ _W.platformElements[platform_element_id].deferredObject.resolve(); }

_W.platformElements[platform_element_id].deferredPromise.done(function(){ var _ElementDefinition = /** * This is required for element rendering to be possible * @type {PlatformElement} * * we normalize the styles on initial load. */

(function() { var SEOHeadlines = PlatformElement.extend({ initialize: function() { // we normalize the styles on initial load. $(document).ready(function() { this.fixStyles(); }.bind(this));

this.fixStyles(); },

/** * Lots of styles are applied by default to editable areas of * the editor. To make the element looks how you want, some styles * need to be overwritten. */ fixStyles: function() { this.$(‘.editable-text’).each(function(index, value) { $(value).attr(‘style’, ”); });

this.$(‘.element’).each(function(index, value) { $(value).attr(‘style’, ”); }); } });

return SEOHeadlines; })();;

if (typeof _ElementDefinition == ‘undefined’ || typeof _ElementDefinition == ‘null’) { var _ElementDefinition = PlatformElement.extend({}); }

var _Element = _ElementDefinition.extend({ initialize: function() { // we still want to call the initialize function defined by the developer // however, we don’t want to call it until placeholders have been replaced this.placeholderInterval = setInterval(function() { // so use setInterval to check for placeholders. if (this.$(‘.platform-element-child-placeholder’).length == 0) { clearInterval(this.placeholderInterval); this.constructor.__super__.initialize.apply(this); } }.bind(this), 100); } });

_Element.prototype.settings = new PlatformElementSettings({“selectHeadline”:”h3″,”headlineAlignment”:”left”,”borderThickness”:0,”borderStyle”:”none”,”borderColor”:”#fff”,”borderRadius”:0,”headlineBgColor”:”#fff”,”headlineColor”:”#000″}); _Element.prototype.settings.page_element_id = “268282730263837234”;

_Element.prototype.element_id = “ad98e004-c684-4858-93ab-f8144b2d1630”; _Element.prototype.user_id = “13952731”; _Element.prototype.site_id = “157540419447505247”; _Element.prototype.assets_path = “//marketplace.editmysite.com/elements/307215191696725706-1.0.0/assets/”; new _Element({ el: ‘#element-ad98e004-c684-4858-93ab-f8144b2d1630’ }); }); }); }

if (typeof document.documentElement.appReady == ‘undefined’) { document.documentElement.appReady = 0; }

if (document.documentElement.appReady || (window.inEditor && window.inEditor())) { setupElement268282730263837234(); } else if (document.createEvent && document.addEventListener) { document.addEventListener(‘appReady’, setupElement268282730263837234, false); } else { document.documentElement.attachEvent(‘onpropertychange’, function(event){ if (event.propertyName == ‘appReady’) { setupElement268282730263837234(); } }); }

Now that we have defined the variable in manifest.json file and this variable will add a new class in body tag, for example if user selects ‘Block’ option then new class added in body tag will be menulogoappearance-block otherwise it will be menulogoappearance-inline. Now we will use that class to design menu and logo appearance accordingly. Following code is added at the bottom of main.less (new themes) or main_style.css (older themes) to add this custom option in weebly theme:

body.menulogoappearance-inline #sitename, body.menulogoappearance-inline #navigation{
    width: 48%;
    display: block;
    float: left;
}

body.menulogoappearance-inline #header {
    padding-top: 0px;
    padding-bottom: 10px;
    overflow: hidden;
}

body.menulogoappearance-inline div#sitename {
    text-align: left;
    padding-left: 20px;
}

body.menulogoappearance-inline div#navigation {
    padding-bottom: 0;
    margin-top: 15px;
    text-align: right;
}

Html Templates Code to Add Custom Option in Weebly Theme

if (typeof _W.loadedPlatformDependencies === ‘undefined’) { _W.loadedPlatformDependencies = []; }

if (typeof _W.platformElements === ‘undefined’) { _W.platformElements = []; }

if (typeof _W.platformElements[platform_element_id] === ‘undefined’) { _W.platformElements[platform_element_id] = {}; _W.platformElements[platform_element_id].deferredObject = new $.Deferred(); _W.platformElements[platform_element_id].deferredPromise = _W.platformElements[platform_element_id].deferredObject.promise(); }

if(_.intersection(_W.loadedPlatformDependencies, dependencies).length !== dependencies.length){ _.reduce(dependencies, function(promise, nextScript){ _W.loadedPlatformDependencies.push(nextScript); return promise.then(function(){ return $.getScript(nextScript); }); }, $().promise()).then(function(){ _W.platformElements[platform_element_id].deferredObject.resolve(); }); }

if (dependencies.length === 0){ _W.platformElements[platform_element_id].deferredObject.resolve(); }

_W.platformElements[platform_element_id].deferredPromise.done(function(){ var _ElementDefinition = /** * This is required for element rendering to be possible * @type {PlatformElement} * * we normalize the styles on initial load. */

(function() { var SEOHeadlines = PlatformElement.extend({ initialize: function() { // we normalize the styles on initial load. $(document).ready(function() { this.fixStyles(); }.bind(this));

this.fixStyles(); },

/** * Lots of styles are applied by default to editable areas of * the editor. To make the element looks how you want, some styles * need to be overwritten. */ fixStyles: function() { this.$(‘.editable-text’).each(function(index, value) { $(value).attr(‘style’, ”); });

this.$(‘.element’).each(function(index, value) { $(value).attr(‘style’, ”); }); } });

return SEOHeadlines; })();;

if (typeof _ElementDefinition == ‘undefined’ || typeof _ElementDefinition == ‘null’) { var _ElementDefinition = PlatformElement.extend({}); }

var _Element = _ElementDefinition.extend({ initialize: function() { // we still want to call the initialize function defined by the developer // however, we don’t want to call it until placeholders have been replaced this.placeholderInterval = setInterval(function() { // so use setInterval to check for placeholders. if (this.$(‘.platform-element-child-placeholder’).length == 0) { clearInterval(this.placeholderInterval); this.constructor.__super__.initialize.apply(this); } }.bind(this), 100); } });

_Element.prototype.settings = new PlatformElementSettings({“selectHeadline”:”h2″,”headlineAlignment”:”left”,”borderThickness”:0,”borderStyle”:”none”,”borderColor”:”#fff”,”borderRadius”:0,”headlineBgColor”:”#fff”,”headlineColor”:”#000″}); _Element.prototype.settings.page_element_id = “529665394316048228”;

_Element.prototype.element_id = “e3303537-cdc0-43b8-85d8-756717847484”; _Element.prototype.user_id = “13952731”; _Element.prototype.site_id = “157540419447505247”; _Element.prototype.assets_path = “//marketplace.editmysite.com/elements/307215191696725706-1.0.0/assets/”; new _Element({ el: ‘#element-e3303537-cdc0-43b8-85d8-756717847484’ }); }); }); }

if (typeof document.documentElement.appReady == ‘undefined’) { document.documentElement.appReady = 0; }

if (document.documentElement.appReady || (window.inEditor && window.inEditor())) { setupElement529665394316048228(); } else if (document.createEvent && document.addEventListener) { document.addEventListener(‘appReady’, setupElement529665394316048228, false); } else { document.documentElement.attachEvent(‘onpropertychange’, function(event){ if (event.propertyName == ‘appReady’) { setupElement529665394316048228(); } }); }

Html Template code we have in our demo theme for logo and menu is as shown below :

​<div id=”header”>
            <div class=”nav-trigger hamburger”>
                <div class=”open-btn”>
                    <span class=”mobile”></span>
                    <span class=”mobile”></span>
                    <span class=”mobile”></span>
                </div>
            </div>
            <div id=”sitename”>{logo}</div>
            <div id=”navigation”>{menu}</div>
        </div>

Result : Below Image Shows that New Custom Option is Added

if (typeof _W.loadedPlatformDependencies === ‘undefined’) { _W.loadedPlatformDependencies = []; }

if (typeof _W.platformElements === ‘undefined’) { _W.platformElements = []; }

if (typeof _W.platformElements[platform_element_id] === ‘undefined’) { _W.platformElements[platform_element_id] = {}; _W.platformElements[platform_element_id].deferredObject = new $.Deferred(); _W.platformElements[platform_element_id].deferredPromise = _W.platformElements[platform_element_id].deferredObject.promise(); }

if(_.intersection(_W.loadedPlatformDependencies, dependencies).length !== dependencies.length){ _.reduce(dependencies, function(promise, nextScript){ _W.loadedPlatformDependencies.push(nextScript); return promise.then(function(){ return $.getScript(nextScript); }); }, $().promise()).then(function(){ _W.platformElements[platform_element_id].deferredObject.resolve(); }); }

if (dependencies.length === 0){ _W.platformElements[platform_element_id].deferredObject.resolve(); }

_W.platformElements[platform_element_id].deferredPromise.done(function(){ var _ElementDefinition = /** * This is required for element rendering to be possible * @type {PlatformElement} * * we normalize the styles on initial load. */

(function() { var SEOHeadlines = PlatformElement.extend({ initialize: function() { // we normalize the styles on initial load. $(document).ready(function() { this.fixStyles(); }.bind(this));

this.fixStyles(); },

/** * Lots of styles are applied by default to editable areas of * the editor. To make the element looks how you want, some styles * need to be overwritten. */ fixStyles: function() { this.$(‘.editable-text’).each(function(index, value) { $(value).attr(‘style’, ”); });

this.$(‘.element’).each(function(index, value) { $(value).attr(‘style’, ”); }); } });

return SEOHeadlines; })();;

if (typeof _ElementDefinition == ‘undefined’ || typeof _ElementDefinition == ‘null’) { var _ElementDefinition = PlatformElement.extend({}); }

var _Element = _ElementDefinition.extend({ initialize: function() { // we still want to call the initialize function defined by the developer // however, we don’t want to call it until placeholders have been replaced this.placeholderInterval = setInterval(function() { // so use setInterval to check for placeholders. if (this.$(‘.platform-element-child-placeholder’).length == 0) { clearInterval(this.placeholderInterval); this.constructor.__super__.initialize.apply(this); } }.bind(this), 100); } });

_Element.prototype.settings = new PlatformElementSettings({“selectHeadline”:”h2″,”headlineAlignment”:”left”,”borderThickness”:0,”borderStyle”:”none”,”borderColor”:”#fff”,”borderRadius”:0,”headlineBgColor”:”#508d24″,”headlineColor”:”#000″}); _Element.prototype.settings.page_element_id = “233550219672127200”;

_Element.prototype.element_id = “4bb06dc1-15d2-4057-94a3-ca62c5ec240d”; _Element.prototype.user_id = “13952731”; _Element.prototype.site_id = “157540419447505247”; _Element.prototype.assets_path = “//marketplace.editmysite.com/elements/307215191696725706-1.0.0/assets/”; new _Element({ el: ‘#element-4bb06dc1-15d2-4057-94a3-ca62c5ec240d’ }); }); }); }

if (typeof document.documentElement.appReady == ‘undefined’) { document.documentElement.appReady = 0; }

if (document.documentElement.appReady || (window.inEditor && window.inEditor())) { setupElement233550219672127200(); } else if (document.createEvent && document.addEventListener) { document.addEventListener(‘appReady’, setupElement233550219672127200, false); } else { document.documentElement.attachEvent(‘onpropertychange’, function(event){ if (event.propertyName == ‘appReady’) { setupElement233550219672127200(); } }); }

​Video Tutorial:

if (typeof _W.loadedPlatformDependencies === ‘undefined’) { _W.loadedPlatformDependencies = []; }

if (typeof _W.platformElements === ‘undefined’) { _W.platformElements = []; }

if (typeof _W.platformElements[platform_element_id] === ‘undefined’) { _W.platformElements[platform_element_id] = {}; _W.platformElements[platform_element_id].deferredObject = new $.Deferred(); _W.platformElements[platform_element_id].deferredPromise = _W.platformElements[platform_element_id].deferredObject.promise(); }

if(_.intersection(_W.loadedPlatformDependencies, dependencies).length !== dependencies.length){ _.reduce(dependencies, function(promise, nextScript){ _W.loadedPlatformDependencies.push(nextScript); return promise.then(function(){ return $.getScript(nextScript); }); }, $().promise()).then(function(){ _W.platformElements[platform_element_id].deferredObject.resolve(); }); }

if (dependencies.length === 0){ _W.platformElements[platform_element_id].deferredObject.resolve(); }

_W.platformElements[platform_element_id].deferredPromise.done(function(){ var _ElementDefinition = /** * This is required for element rendering to be possible * @type {PlatformElement} * * we normalize the styles on initial load. */

(function() { var SEOHeadlines = PlatformElement.extend({ initialize: function() { // we normalize the styles on initial load. $(document).ready(function() { this.fixStyles(); }.bind(this));

this.fixStyles(); },

/** * Lots of styles are applied by default to editable areas of * the editor. To make the element looks how you want, some styles * need to be overwritten. */ fixStyles: function() { this.$(‘.editable-text’).each(function(index, value) { $(value).attr(‘style’, ”); });

this.$(‘.element’).each(function(index, value) { $(value).attr(‘style’, ”); }); } });

return SEOHeadlines; })();;

if (typeof _ElementDefinition == ‘undefined’ || typeof _ElementDefinition == ‘null’) { var _ElementDefinition = PlatformElement.extend({}); }

var _Element = _ElementDefinition.extend({ initialize: function() { // we still want to call the initialize function defined by the developer // however, we don’t want to call it until placeholders have been replaced this.placeholderInterval = setInterval(function() { // so use setInterval to check for placeholders. if (this.$(‘.platform-element-child-placeholder’).length == 0) { clearInterval(this.placeholderInterval); this.constructor.__super__.initialize.apply(this); } }.bind(this), 100); } });

_Element.prototype.settings = new PlatformElementSettings({“borderThickness_each”:[{“borderThickness_index”:0},{“borderThickness_index”:1}],”selectHeadline”:”h3″,”headlineAlignment”:”left”,”borderThickness”:2,”borderStyle”:”none”,”borderColor”:”#fff”,”borderRadius”:0,”headlineBgColor”:”#248d6c”,”headlineColor”:”#000″}); _Element.prototype.settings.page_element_id = “596788637456462165”;

_Element.prototype.element_id = “aff49a8d-dacc-4fdb-8166-144a6aa2a685”; _Element.prototype.user_id = “13952731”; _Element.prototype.site_id = “157540419447505247”; _Element.prototype.assets_path = “//marketplace.editmysite.com/elements/307215191696725706-1.0.0/assets/”; new _Element({ el: ‘#element-aff49a8d-dacc-4fdb-8166-144a6aa2a685’ }); }); }); }

if (typeof document.documentElement.appReady == ‘undefined’) { document.documentElement.appReady = 0; }

if (document.documentElement.appReady || (window.inEditor && window.inEditor())) { setupElement596788637456462165(); } else if (document.createEvent && document.addEventListener) { document.addEventListener(‘appReady’, setupElement596788637456462165, false); } else { document.documentElement.attachEvent(‘onpropertychange’, function(event){ if (event.propertyName == ‘appReady’) { setupElement596788637456462165(); } }); }

This video tutorial explains how to add custom theme options in weebly website. As an example we added 2 custom options (Header Color and Header Height). These options allow theme user to define / change header background color and header height using Theme Options page.
That’s all, If you have any questions then please let me know in comments.

Please Note that your theme may use different classes, ID’s and layout structure so change the codes accordingly. This Tutorial is only to explain the concept to add custom option in weebly theme.

if (typeof _W.loadedPlatformDependencies === ‘undefined’) { _W.loadedPlatformDependencies = []; }

if (typeof _W.platformElements === ‘undefined’) { _W.platformElements = []; }

if (typeof _W.platformElements[platform_element_id] === ‘undefined’) { _W.platformElements[platform_element_id] = {}; _W.platformElements[platform_element_id].deferredObject = new $.Deferred(); _W.platformElements[platform_element_id].deferredPromise = _W.platformElements[platform_element_id].deferredObject.promise(); }

if(_.intersection(_W.loadedPlatformDependencies, dependencies).length !== dependencies.length){ _.reduce(dependencies, function(promise, nextScript){ _W.loadedPlatformDependencies.push(nextScript); return promise.then(function(){ return $.getScript(nextScript); }); }, $().promise()).then(function(){ _W.platformElements[platform_element_id].deferredObject.resolve(); }); }

if (dependencies.length === 0){ _W.platformElements[platform_element_id].deferredObject.resolve(); }

_W.platformElements[platform_element_id].deferredPromise.done(function(){ var _ElementDefinition = /** * This is required for element rendering to be possible * @type {PlatformElement} * * we normalize the styles on initial load. */

(function() { var SEOHeadlines = PlatformElement.extend({ initialize: function() { // we normalize the styles on initial load. $(document).ready(function() { this.fixStyles(); }.bind(this));

this.fixStyles(); },

/** * Lots of styles are applied by default to editable areas of * the editor. To make the element looks how you want, some styles * need to be overwritten. */ fixStyles: function() { this.$(‘.editable-text’).each(function(index, value) { $(value).attr(‘style’, ”); });

this.$(‘.element’).each(function(index, value) { $(value).attr(‘style’, ”); }); } });

return SEOHeadlines; })();;

if (typeof _ElementDefinition == ‘undefined’ || typeof _ElementDefinition == ‘null’) { var _ElementDefinition = PlatformElement.extend({}); }

var _Element = _ElementDefinition.extend({ initialize: function() { // we still want to call the initialize function defined by the developer // however, we don’t want to call it until placeholders have been replaced this.placeholderInterval = setInterval(function() { // so use setInterval to check for placeholders. if (this.$(‘.platform-element-child-placeholder’).length == 0) { clearInterval(this.placeholderInterval); this.constructor.__super__.initialize.apply(this); } }.bind(this), 100); } });

_Element.prototype.settings = new PlatformElementSettings({“borderThickness_each”:[{“borderThickness_index”:0},{“borderThickness_index”:1}],”selectHeadline”:”h2″,”headlineAlignment”:”center”,”borderThickness”:2,”borderStyle”:”dashed”,”borderColor”:”#fff”,”borderRadius”:0,”headlineBgColor”:”#8d2424″,”headlineColor”:”#000″}); _Element.prototype.settings.page_element_id = “450418735381732317”;

_Element.prototype.element_id = “1adc12db-0482-41db-84e8-2970b1634d95”; _Element.prototype.user_id = “13952731”; _Element.prototype.site_id = “157540419447505247”; _Element.prototype.assets_path = “//marketplace.editmysite.com/elements/307215191696725706-1.0.0/assets/”; new _Element({ el: ‘#element-1adc12db-0482-41db-84e8-2970b1634d95’ }); }); }); }

if (typeof document.documentElement.appReady == ‘undefined’) { document.documentElement.appReady = 0; }

if (document.documentElement.appReady || (window.inEditor && window.inEditor())) { setupElement450418735381732317(); } else if (document.createEvent && document.addEventListener) { document.addEventListener(‘appReady’, setupElement450418735381732317, false); } else { document.documentElement.attachEvent(‘onpropertychange’, function(event){ if (event.propertyName == ‘appReady’) { setupElement450418735381732317(); } }); }

Tags

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Search

Categories

Recent Posts

Tags

angular block theme BlockTheme block themes CodoBookings c programming data science docker expressjs fastapi full site editing FullSiteEditing gutenberg java learn angular learn html & html5 learn nextjs learn wordpress machine learning mongodb n8n beginner guide n8n tutorial nginx nodejs react research methodologies R programming theme.json ubuntu versana companion plugin vps vps server website migration weebly app weebly apps weebly tutorials wordpress blocks wordpress block theme wordpress news wordpress plugin development wordpress plugins wordpress security wordpress templates wordpress theme development wordpress tutorials