├── .gitignore ├── CHANGELOG.md ├── README.md ├── bb-experiments.php ├── bb-minimap ├── bb-minimap.js ├── bb-minimap.php ├── css │ ├── bb-minimap.css │ └── bb-minimap.css.map ├── min │ └── bb-minimap-min.js ├── scss │ └── bb-minimap.scss └── templates.php ├── bb-store-kit ├── bb-store-kit.php ├── modules │ └── brj-template-collection │ │ ├── brj-template-collection.php │ │ ├── css │ │ ├── frontend.css │ │ └── frontend.responsive.css │ │ └── includes │ │ └── frontend.php └── readme.md ├── bb-tutorials ├── README.md ├── bb-tutorials.php ├── classes │ └── class-bb-tutorials.php ├── css │ └── tutorials.css ├── data │ ├── images-intro.dat │ └── text-intro.dat └── includes │ └── single-tutorial.php └── bb-ui-themes ├── bb-ui-themes.php ├── classes └── class-bb-ui-themes.php ├── css ├── dark.css ├── light.css └── wordpress.css └── js └── settings.js /.gitignore: -------------------------------------------------------------------------------- 1 | config.codekit 2 | .sass-cache -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## v0.1 - 2015-11-23 4 | * Initial Build 5 | * Add UI Color Scheme settings. 6 | * Add Beaver Builder Dark color scheme 7 | * Add WordPress color scheme 8 | 9 | ## v0.2 - 2016-01-23 10 | * Refactor 11 | * Remove bb-metadata 12 | * Add Minimap project 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Beaver Builder Experiments 2 | 3 | This is a set of experiments and ideas to extend Beaver Builder. This code is free to use but is experimental and not supported in any way. Please do not use this plugin on a production site. 4 | 5 | ## Experiment 1: UI Color Schemes 6 | This plugin adds "User Interface" tab to the Global Settings panel in page builder (Tools > Edit Global Settings). This new tab allows you to select from alternate color schemes for the Beaver Builder UI. 7 | 8 | Additional UI themes can be added with a filter: 9 | ```php 10 | __('My Color Scheme', 'bb-experiments'), 14 | 'url' => '/path/to/your/stylesheet.css' 15 | ) 16 | return $themes; 17 | } 18 | add_filter('bb_experiments_get_ui_themes', 'demo_add_color_themes'); 19 | ?> 20 | ``` 21 | 22 | Upcoming Feature: 23 | * Select "Custom" and create your own color settings for beaver builder's UI. 24 | 25 | ## Experiment 2: Minimap 26 | This is a concept for a small control to let you see your layout at a glance, navigate to various rows and rearrange them. Reorder coming soon. 27 | 28 | ## Experiment 3: Tutorials Base Plugin 29 | This is a base plugin to create tutorial pages. It defines a custom post type and allows you to create a set of tutorial posts on activation. 30 | 31 | ## Experiment 4: Store Kit 32 | This is a stub for some modules to allow someone to create a template store site. 33 | -------------------------------------------------------------------------------- /bb-experiments.php: -------------------------------------------------------------------------------- 1 | 'bb-minimap', 17 | 'label' => 'Beaver Builder Minimap', 18 | 'include' => BB_EXPERIMENTS_DIR . '/bb-minimap/bb-minimap.php' 19 | ), 20 | array( 21 | 'key' => 'bb-store-kit', 22 | 'label' => 'Beaver Builder Store Kit', 23 | 'include' => BB_EXPERIMENTS_DIR . '/bb-store-kit/bb-store-kit.php' 24 | ), 25 | array( 26 | 'key' => 'bb-tutorials', 27 | 'label' => 'Beaver Builder Tutorials Plugin Base', 28 | 'include' => BB_EXPERIMENTS_DIR . '/bb-tutorials/bb-tutorials.php' 29 | ), 30 | array( 31 | 'key' => 'bb-ui-themes', 32 | 'label' => 'Beaver Builder UI Themes', 33 | 'include' => BB_EXPERIMENTS_DIR . '/bb-ui-themes/bb-ui-themes.php' 34 | ) 35 | ); 36 | 37 | if (!empty($experiments)) { 38 | foreach($experiments as $proj) { 39 | if ( apply_filters('brj/include_experiment', true, $proj['key']) ) { 40 | require_once $proj['include']; 41 | } 42 | } 43 | } 44 | } 45 | add_action('plugins_loaded', 'brj_include_experiments'); 46 | 47 | function brj_check_include_experiment($bool = true, $key) { 48 | 49 | // @todo: Add UI Check Here 50 | 51 | return $bool; 52 | } 53 | add_filter('brj/include_experiment', 'brj_check_include_experiment', 10, 2); 54 | ?> 55 | -------------------------------------------------------------------------------- /bb-minimap/bb-minimap.js: -------------------------------------------------------------------------------- 1 | 2 | (function($){ 3 | 4 | function brjMinimapRenderRows(rows) { 5 | var html = ""; 6 | var rowTemplate = wp.template('bb-minimap-row'); 7 | $.each(rows, function(i, item) { 8 | var node = $(item).data('node'); 9 | var data = { 10 | node: node 11 | } 12 | html += rowTemplate(data); 13 | }); 14 | $('.fl-minimap-rows').html(html); 15 | } 16 | 17 | $(function(){ 18 | 19 | var rows = $('.fl-builder-content .fl-row'); 20 | var renderMinimap = wp.template('bb-minimap'); 21 | var data = {}; 22 | $('body').append(renderMinimap(data)); 23 | 24 | brjMinimapRenderRows(rows); 25 | 26 | // Click scroll to row 27 | $('#fl-minimap').on('click', '.fl-minimap-row', function(event) { 28 | var barHeight = $('.fl-builder-bar').height(); 29 | var nodeID = $(this).data('node'); 30 | var node = $('.fl-row[data-node="' + nodeID + '"]'); 31 | var position = node.offset().top - barHeight; 32 | 33 | if (position == window.scrollY) { 34 | 35 | FLBuilder._closePanel(); 36 | FLBuilder._showLightbox(); 37 | 38 | FLBuilder.ajax({ 39 | action: 'render_row_settings', 40 | node_id: nodeID 41 | }, FLBuilder._rowSettingsLoaded); 42 | event.preventDefault(); 43 | 44 | } else { 45 | scrollTo(0, position); 46 | } 47 | }); 48 | 49 | // Hover - highlight row 50 | $('#fl-minimap').on('mouseenter', '.fl-minimap-row', function(event) { 51 | var nodeID = $(this).data('node'); 52 | var row = $('.fl-row[data-node="' + nodeID + '"]'); 53 | var template = wp.template( 'fl-row-overlay' ); 54 | 55 | if ( ! row.hasClass( 'fl-block-overlay-active' ) ) { 56 | 57 | // Append the overlay. 58 | FLBuilder._appendOverlay( row, template( { 59 | global : row.hasClass( 'fl-node-global' ), 60 | node : row.attr('data-node') 61 | } ) ); 62 | 63 | // Adjust the height of modules if needed. 64 | row.find( '.fl-module' ).each( function(){ 65 | if ( $( this ).outerHeight( true ) < 20 ) { 66 | $( this ).addClass( 'fl-module-adjust-height' ); 67 | } 68 | } ); 69 | } 70 | }); 71 | 72 | $('#fl-minimap').on('mouseleave', '.fl-minimap-row', function(event) { 73 | //var nodeID = $(this).data('node'); 74 | //var node = $('.fl-row[data-node="' + nodeID + '"]'); 75 | FLBuilder._removeRowOverlays(); 76 | }); 77 | 78 | 79 | 80 | 81 | var observer = new MutationObserver(function(mutations) { 82 | // For the sake of...observation...let's output the mutation to console to see how this all works 83 | mutations.forEach(function(mutation) { 84 | console.log(mutation); 85 | }); 86 | }); 87 | 88 | // Notify me of everything! 89 | var observerConfig = { 90 | attributes: true, 91 | childList: true, 92 | characterData: false 93 | }; 94 | 95 | // Node, config 96 | // In this case we'll listen to all changes to body and child nodes 97 | var targetNode = $('.fl-minimap-rows')[0]; 98 | observer.observe(targetNode, observerConfig); 99 | }); 100 | })(jQuery); 101 | 102 | 103 | /* 104 | // Notes 105 | _reorderRow: function(node_id, position) 106 | { 107 | FLBuilder.ajax({ 108 | action: 'reorder_node', 109 | node_id: node_id, 110 | position: position, 111 | silent: true 112 | }); 113 | }, 114 | */ 115 | -------------------------------------------------------------------------------- /bb-minimap/bb-minimap.php: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /bb-minimap/css/bb-minimap.css: -------------------------------------------------------------------------------- 1 | #fl-minimap { 2 | position: fixed; 3 | top: 44px; 4 | right: 0; 5 | bottom: 0; 6 | padding: 20px; 7 | width: 120px; 8 | z-index: 999999; 9 | display: flex; 10 | flex-direction: column; 11 | justify-content: center; 12 | opacity: .25; 13 | -webkit-filter: blur(2px) saturate(0%); 14 | transform-origin: right center; 15 | transition-duration: .25s; 16 | transition-property: opacity, padding, filter, transform; } 17 | #fl-minimap:hover { 18 | opacity: 1; 19 | -webkit-filter: blur(0px) saturate(100%); } 20 | #fl-minimap .fl-minimap-inside { 21 | background: white; 22 | box-shadow: 0px 0px 19px rgba(0, 0, 0, 0.21); 23 | border: 1px solid #ABABAB; 24 | border-radius: 6px; 25 | font-size: 11px; } 26 | #fl-minimap .fl-minimap-inside > div:first-child { 27 | border-top-right-radius: 6px; 28 | border-top-left-radius: 6px; } 29 | #fl-minimap .fl-minimap-inside > div:last-child { 30 | border-top-right-radius: 6px; 31 | border-top-left-radius: 6px; } 32 | #fl-minimap .fl-minimap-inside .fl-minimap-header { 33 | padding: 5px 8px; 34 | background: #E6E6E6; } 35 | #fl-minimap .fl-minimap-inside .fl-minimap-rows .fl-minimap-row { 36 | border-top: 1px solid #ddd; 37 | cursor: pointer; } 38 | #fl-minimap .fl-minimap-inside .fl-minimap-rows .fl-minimap-row:hover { 39 | background: #eee; } 40 | #fl-minimap .fl-minimap-inside .fl-minimap-rows .fl-minimap-row .fl-row-content-wrap { 41 | padding: 10px !important; 42 | text-align: center; } 43 | #fl-minimap .fl-minimap-inside .fl-minimap-footer { 44 | padding: 3px; 45 | background: #E6E6E6; } 46 | 47 | .bb-minimap-highlight { 48 | outline: 5px solid red; 49 | pointer-events: none; } 50 | 51 | /*# sourceMappingURL=bb-minimap.css.map */ -------------------------------------------------------------------------------- /bb-minimap/css/bb-minimap.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "file": "bb-minimap.css", 4 | "sources": [ 5 | "../scss/bb-minimap.scss" 6 | ], 7 | "mappings": "AAGA,WAAW,CAAC;EACR,QAAQ,EAAE,KAAM;EAChB,GAAG,EAAC,IAAK;EACT,KAAK,EAAC,CAAE;EACR,MAAM,EAAC,CAAE;EACT,OAAO,EAAC,IAAK;EACb,KAAK,EAAC,KAAM;EACZ,OAAO,EAAE,MAAO;EAEhB,OAAO,EAAE,IAAK;EACd,cAAc,EAAE,MAAO;EACvB,eAAe,EAAE,MAAO;EAExB,OAAO,EAAE,GAAI;EACb,cAAc,EAAE,SAAI,CAAM,YAAQ;EAClC,gBAAgB,EAAE,YAAa;EAC/B,mBAAmB,EAAE,IAAK;EAC1B,mBAAmB,EAAE,mCAAoC,GAgD5D;EAjED,WAAW,AAmBN,MAAM,CAAC;IACJ,OAAO,EAAE,CAAE;IACX,cAAc,EAAE,SAAI,CAAM,cAAQ,GACrC;EAtBL,WAAW,CAwBP,kBAAkB,CAAC;IACf,UAAU,EAAC,KAAM;IACjB,UAAU,EAAE,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,mBAAI;IAC7B,MAAM,EAAC,iBAAkB;IACzB,aAAa,EA9BL,GAAG;IA+BX,SAAS,EAAE,IAAK,GAmCnB;IAhEL,WAAW,CAwBP,kBAAkB,GAOV,GAAG,AAAA,YAAY,CAAC;MAChB,uBAAuB,EAlCnB,GAAG;MAmCP,sBAAsB,EAnClB,GAAG,GAoCV;IAlCT,WAAW,CAwBP,kBAAkB,GAYV,GAAG,AAAA,WAAW,CAAC;MACf,uBAAuB,EAvCnB,GAAG;MAwCP,sBAAsB,EAxClB,GAAG,GAyCV;IAvCT,WAAW,CAwBP,kBAAkB,CAiBd,kBAAkB,CAAC;MACf,OAAO,EAAE,OAAQ;MACjB,UAAU,EAAE,OAAQ,GACvB;IA5CT,WAAW,CAwBP,kBAAkB,CAqBd,gBAAgB,CACZ,eAAe,CAAC;MACZ,UAAU,EAAC,cAAe;MAC1B,MAAM,EAAE,OAAQ,GAUnB;MA1Db,WAAW,CAwBP,kBAAkB,CAqBd,gBAAgB,CACZ,eAAe,AAIV,MAAM,CAAC;QACJ,UAAU,EAAC,IAAK,GACnB;MApDjB,WAAW,CAwBP,kBAAkB,CAqBd,gBAAgB,CACZ,eAAe,CAQX,oBAAoB,CAAC;QACjB,OAAO,EAAC,eAAgB;QACxB,UAAU,EAAE,MAAO,GACtB;IAzDjB,WAAW,CAwBP,kBAAkB,CAoCd,kBAAkB,CAAC;MACf,OAAO,EAAC,GAAI;MACZ,UAAU,EAAE,OAAQ,GACvB;;AAIT,qBAAqB,CAAC;EAClB,OAAO,EAAC,aAAc;EACtB,cAAc,EAAE,IAAK,GACxB", 8 | "names": [] 9 | } -------------------------------------------------------------------------------- /bb-minimap/min/bb-minimap-min.js: -------------------------------------------------------------------------------- 1 | !function($){function e(e){var o="",a=wp.template("bb-minimap-row");$.each(e,function(e,n){var i=$(n).data("node"),l={node:i};o+=a(l)}),$(".fl-minimap-rows").html(o)}$(function(){var o=$(".fl-builder-content .fl-row"),a=wp.template("bb-minimap"),n={};$("body").append(a(n)),e(o),$("#fl-minimap").on("click",".fl-minimap-row",function(e){var o=$(".fl-builder-bar").height(),a=$(this).data("node"),n=$('.fl-row[data-node="'+a+'"]'),i=n.offset().top-o;i==window.scrollY?(FLBuilder._closePanel(),FLBuilder._showLightbox(),FLBuilder.ajax({action:"render_row_settings",node_id:a},FLBuilder._rowSettingsLoaded),e.preventDefault()):scrollTo(0,i)}),$("#fl-minimap").on("mouseenter",".fl-minimap-row",function(e){var o=$(this).data("node"),a=$('.fl-row[data-node="'+o+'"]'),n=wp.template("fl-row-overlay");a.hasClass("fl-block-overlay-active")||(FLBuilder._appendOverlay(a,n({global:a.hasClass("fl-node-global"),node:a.attr("data-node")})),a.find(".fl-module").each(function(){$(this).outerHeight(!0)<20&&$(this).addClass("fl-module-adjust-height")}))}),$("#fl-minimap").on("mouseleave",".fl-minimap-row",function(e){FLBuilder._removeRowOverlays()});var i=new MutationObserver(function(e){e.forEach(function(e){console.log(e)})}),l={attributes:!0,childList:!0,characterData:!1},t=$(".fl-minimap-rows")[0];i.observe(t,l)})}(jQuery); -------------------------------------------------------------------------------- /bb-minimap/scss/bb-minimap.scss: -------------------------------------------------------------------------------- 1 | 2 | $border_radius: 6px; 3 | 4 | #fl-minimap { 5 | position: fixed; 6 | top:44px; 7 | right:0; 8 | bottom:0; 9 | padding:20px; 10 | width:120px; 11 | z-index: 999999; 12 | 13 | display: flex; 14 | flex-direction: column; 15 | justify-content: center; 16 | 17 | opacity: .25; 18 | -webkit-filter: blur(2px) saturate(0%); 19 | transform-origin: right center; 20 | transition-duration: .25s; 21 | transition-property: opacity, padding, filter, transform; 22 | 23 | &:hover { 24 | opacity: 1; 25 | -webkit-filter: blur(0px) saturate(100%); 26 | } 27 | 28 | .fl-minimap-inside { 29 | background:white; 30 | box-shadow: 0px 0px 19px rgba(0, 0, 0, 0.21); 31 | border:1px solid #ABABAB; 32 | border-radius:$border_radius; 33 | font-size: 11px; 34 | 35 | & > div:first-child { 36 | border-top-right-radius: $border_radius; 37 | border-top-left-radius: $border_radius; 38 | } 39 | 40 | & > div:last-child { 41 | border-top-right-radius: $border_radius; 42 | border-top-left-radius: $border_radius; 43 | } 44 | 45 | .fl-minimap-header { 46 | padding: 5px 8px; 47 | background: #E6E6E6; 48 | } 49 | .fl-minimap-rows { 50 | .fl-minimap-row { 51 | border-top:1px solid #ddd; 52 | cursor: pointer; 53 | 54 | &:hover { 55 | background:#eee; 56 | } 57 | 58 | .fl-row-content-wrap { 59 | padding:10px !important; 60 | text-align: center; 61 | } 62 | } 63 | } 64 | .fl-minimap-footer { 65 | padding:3px; 66 | background: #E6E6E6; 67 | } 68 | } 69 | } 70 | 71 | .bb-minimap-highlight { 72 | outline:5px solid red; 73 | pointer-events: none; 74 | } 75 | -------------------------------------------------------------------------------- /bb-minimap/templates.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 14 | 15 | 16 | 21 | -------------------------------------------------------------------------------- /bb-store-kit/bb-store-kit.php: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /bb-store-kit/modules/brj-template-collection/brj-template-collection.php: -------------------------------------------------------------------------------- 1 | __('Template Collection', 'fl-builder'), 7 | 'description' => __('Display a collection of templates', 'fl-builder'), 8 | 'category' => FL_STORE_MODULE_CATEGORY, 9 | 'dir' => FL_STORE_PLUGIN_DIR . 'modules/brj-template-collection/', 10 | 'url' => FL_STORE_PLUGIN_URL . 'modules/brj-template-collection/', 11 | )); 12 | } 13 | 14 | function get_templates() { 15 | /* 16 | $user_templates = get_posts( array( 17 | 'post_type' => 'fl-builder-template', 18 | 'orderby' => 'menu_order title', 19 | 'order' => 'ASC', 20 | 'posts_per_page' => -1, 21 | 'fl-builder-template-type' => 'layout' 22 | )); 23 | */ 24 | 25 | // Temp 26 | $template_data = FLBuilderModel::get_templates(); 27 | return $template_data; 28 | } 29 | 30 | } 31 | /** 32 | * Register the module and its form settings. 33 | */ 34 | FLBuilder::register_module('BRJ_TemplateCollectionModule', array( 35 | 'general' => array( 36 | 'title' => __('General', 'fl-builder'), 37 | 'sections' => array( 38 | 'general' => array( 39 | 'title' => '', 40 | 'fields' => array( 41 | 'name' => array( 42 | 'label' => 'Name', 43 | 'type' => 'text' 44 | ) 45 | ) 46 | ) 47 | ) 48 | ) 49 | )); 50 | ?> 51 | -------------------------------------------------------------------------------- /bb-store-kit/modules/brj-template-collection/css/frontend.css: -------------------------------------------------------------------------------- 1 | 2 | .template-item { 3 | float:left; 4 | width:25%; 5 | padding:10px; 6 | } 7 | .template-thumbnail { 8 | position: relative; 9 | overflow: hidden; 10 | box-shadow: 0px 10px 12px 0px rgba(0,0,0,0.25); 11 | border-radius: 3px; 12 | background: white; 13 | } 14 | .template-thumbnail:before { 15 | display: block; 16 | content: ""; 17 | padding-top:110%; 18 | } 19 | .template-thumbnail-inside { 20 | position: absolute; 21 | top:0; 22 | left:0; 23 | right:0; 24 | bottom:0; 25 | } 26 | .template-title { 27 | padding:15px; 28 | text-align: center; 29 | } 30 | -------------------------------------------------------------------------------- /bb-store-kit/modules/brj-template-collection/css/frontend.responsive.css: -------------------------------------------------------------------------------- 1 | .template-item { 2 | float:left; 3 | width:33.3%; 4 | padding:10px; 5 | } 6 | -------------------------------------------------------------------------------- /bb-store-kit/modules/brj-template-collection/includes/frontend.php: -------------------------------------------------------------------------------- 1 | 2 |

name ?>

3 |
4 | get_templates(); 6 | if (!empty($templates)) { 7 | foreach($templates as $template) { 8 | if ($template->index == 0) continue; 9 | 10 | $image_url = FL_BUILDER_URL . 'img/templates/' . $template->image; 11 | ?> 12 |
13 |
14 |
15 | 16 |
17 |
18 |
name ?>
19 |
20 | 24 |
25 | -------------------------------------------------------------------------------- /bb-store-kit/readme.md: -------------------------------------------------------------------------------- 1 | # Store Kit 2 | 3 | This will eventually have a collection of modules for displaying templates and template collections. Stay tuned. 4 | -------------------------------------------------------------------------------- /bb-tutorials/README.md: -------------------------------------------------------------------------------- 1 | # Tutorials for Beaver Builder 2 | -------------------------------------------------------------------------------- /bb-tutorials/bb-tutorials.php: -------------------------------------------------------------------------------- 1 | 20 | -------------------------------------------------------------------------------- /bb-tutorials/classes/class-bb-tutorials.php: -------------------------------------------------------------------------------- 1 | __('Tutorials', 'bb-tutorials'), 8 | 'singular_name' => __('Tutorial', 'bb-tutorials'), 9 | 'add_new_item' => __('Add New Tutorial', 'bb-tutorials'), 10 | ); 11 | $args = array( 12 | 'label' => __('Tutorial', 'bb-tutorials'), 13 | 'labels' => $labels, 14 | 'hierarchical' => false, 15 | 'public' => true, 16 | 'show_ui' => true, 17 | 'menu_icon' => 'dashicons-art', 18 | 'show_in_admin_bar' => false, 19 | 'show_in_nav_menus' => true, 20 | 'can_export' => true, 21 | 'has_archive' => true, 22 | 'exclude_from_search' => true, 23 | 'publicly_queryable' => true, 24 | 'supports' => array('title', 'revisions'), 25 | 'rewrite' => array( 26 | 'with_front' => false, 27 | 'slug' => 'tutorials' 28 | ), 29 | 'menu_position' => 100 30 | ); 31 | register_post_type($handle, $args); 32 | 33 | // Enable Beaver Builder for Workspace Post Type 34 | $types = get_option('_fl_builder_post_types'); 35 | if (!in_array($handle, $types)) { 36 | $types[] = $handle; 37 | update_option('_fl_builder_post_types', $types); 38 | } 39 | } 40 | 41 | static function activate() { 42 | self::init(); 43 | flush_rewrite_rules(); 44 | 45 | self::populate_posts(); 46 | } 47 | 48 | static function enqueue() { 49 | global $post; 50 | if ($post->post_type == 'bb-tutorial') { 51 | wp_enqueue_style('bb-tutorials', plugins_url('/css/tutorials.css', dirname(__FILE__)), array('open-sans')); 52 | } 53 | } 54 | 55 | static function get_template($template) { 56 | global $post; 57 | if ($post->post_type == 'bb-tutorial') { 58 | $template = BB_TUTORIALS_DIR . 'includes/single-tutorial.php'; 59 | } 60 | return $template; 61 | } 62 | 63 | static function populate_posts() { 64 | $tutorials = array( 65 | array( 66 | 'post_title' => 'Intro To Text Modules', 67 | 'post_status' => 'publish', 68 | 'post_type' => 'bb-tutorial', 69 | 'layout_data' => 'text-intro.dat' 70 | ) 71 | ); 72 | foreach($tutorials as $post) { 73 | if ($id = wp_insert_post($post)) { 74 | $data = file_get_contents(BB_TUTORIALS_DIR . '/data/' . $post['layout_data']); 75 | $layout = unserialize($data); 76 | update_post_meta($id, '_fl_builder_enabled', 1); 77 | update_post_meta($id, '_fl_builder_draft', $layout); 78 | update_post_meta($id, '_fl_builder_data', $layout); 79 | } 80 | } 81 | } 82 | } 83 | ?> 84 | -------------------------------------------------------------------------------- /bb-tutorials/css/tutorials.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Open Sans', Helvetica, Arial, sans-serif; 3 | font-size: 18px; 4 | background:white; 5 | margin:0; 6 | padding:0; 7 | } 8 | 9 | h1, h2, h3, h4 { 10 | font-weight: 200; 11 | line-height: 1.5; 12 | margin:6px 0; 13 | } 14 | h1 { 15 | font-size: 36px; 16 | } 17 | h2 { 18 | font-size:28px; 19 | } 20 | h3 { 21 | font-size:24px; 22 | } 23 | h1:first-child { 24 | margin-top:0; 25 | } 26 | blockquote { 27 | font-style: italic; 28 | border-left:3px solid #aaa; 29 | margin:10px 0; 30 | padding:8px 20px; 31 | font-size:24px; 32 | } 33 | blockquote p { 34 | margin:0; 35 | font-size: inherit; 36 | line-height: 1.5; 37 | } 38 | -------------------------------------------------------------------------------- /bb-tutorials/data/images-intro.dat: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brentjett/bb-experiments/f475450ea8e462e2969101ac443db36f3ae23527/bb-tutorials/data/images-intro.dat -------------------------------------------------------------------------------- /bb-tutorials/data/text-intro.dat: -------------------------------------------------------------------------------- 1 | a:28:{s:13:"56521c5772a23";O:8:"stdClass":5:{s:4:"node";s:13:"56521c5772a23";s:4:"type";s:3:"row";s:6:"parent";N;s:8:"position";i:1;s:8:"settings";O:8:"stdClass":47:{s:5:"width";s:4:"full";s:13:"content_width";s:5:"fixed";s:11:"full_height";s:7:"default";s:10:"text_color";s:0:"";s:10:"link_color";s:0:"";s:11:"hover_color";s:0:"";s:13:"heading_color";s:0:"";s:7:"bg_type";s:4:"none";s:8:"bg_color";s:0:"";s:10:"bg_opacity";s:3:"100";s:8:"bg_image";s:0:"";s:9:"bg_repeat";s:4:"none";s:11:"bg_position";s:13:"center center";s:13:"bg_attachment";s:6:"scroll";s:7:"bg_size";s:5:"cover";s:8:"bg_video";s:0:"";s:13:"bg_video_webm";s:0:"";s:17:"bg_video_fallback";s:0:"";s:9:"ss_source";s:9:"wordpress";s:9:"ss_photos";s:0:"";s:11:"ss_feed_url";s:0:"";s:8:"ss_speed";s:1:"3";s:13:"ss_transition";s:4:"fade";s:21:"ss_transitionDuration";s:1:"1";s:12:"ss_randomize";s:5:"false";s:17:"bg_parallax_image";s:0:"";s:17:"bg_parallax_speed";s:4:"fast";s:16:"bg_overlay_color";s:0:"";s:18:"bg_overlay_opacity";s:2:"50";s:11:"border_type";s:0:"";s:12:"border_color";s:0:"";s:14:"border_opacity";s:3:"100";s:10:"border_top";s:1:"1";s:13:"border_bottom";s:1:"1";s:11:"border_left";s:1:"0";s:12:"border_right";s:1:"0";s:10:"margin_top";s:0:"";s:13:"margin_bottom";s:0:"";s:11:"margin_left";s:0:"";s:12:"margin_right";s:0:"";s:11:"padding_top";s:0:"";s:14:"padding_bottom";s:0:"";s:12:"padding_left";s:0:"";s:13:"padding_right";s:0:"";s:18:"responsive_display";s:0:"";s:2:"id";s:0:"";s:5:"class";s:0:"";}}s:13:"56521c5775f18";O:8:"stdClass":5:{s:4:"node";s:13:"56521c5775f18";s:4:"type";s:12:"column-group";s:6:"parent";s:13:"56521c5772a23";s:8:"position";i:0;s:8:"settings";s:0:"";}s:13:"56521c57767cc";O:8:"stdClass":5:{s:4:"node";s:13:"56521c57767cc";s:4:"type";s:6:"column";s:6:"parent";s:13:"56521c5775f18";s:8:"position";i:0;s:8:"settings";O:8:"stdClass":1:{s:4:"size";i:50;}}s:13:"56521c5776808";O:8:"stdClass":5:{s:4:"node";s:13:"56521c5776808";s:4:"type";s:6:"column";s:6:"parent";s:13:"56521c5775f18";s:8:"position";i:1;s:8:"settings";O:8:"stdClass":1:{s:4:"size";i:50;}}s:13:"56521c6c1e74c";O:8:"stdClass":5:{s:4:"node";s:13:"56521c6c1e74c";s:4:"type";s:6:"module";s:6:"parent";s:13:"56521c57767cc";s:8:"position";i:0;s:8:"settings";O:8:"stdClass":11:{s:4:"text";s:417:"

Text Modules

Text modules are the foundation for adding content to your site. Each module has an editor field just like the WordPress editor. You can edit text using the visual editor or use the text editor to see the raw HTML. Just like the WordPress editor, paragraph tags are added for you, so all you have to do is return between each paragraph. Click anywhere on a text module to edit its content.

";s:10:"margin_top";s:0:"";s:13:"margin_bottom";s:0:"";s:11:"margin_left";s:0:"";s:12:"margin_right";s:0:"";s:18:"responsive_display";s:0:"";s:9:"animation";s:0:"";s:15:"animation_delay";s:3:"0.0";s:2:"id";s:0:"";s:5:"class";s:0:"";s:4:"type";s:9:"rich-text";}}s:13:"56522357c651e";O:8:"stdClass":5:{s:4:"node";s:13:"56522357c651e";s:4:"type";s:3:"row";s:6:"parent";N;s:8:"position";i:0;s:8:"settings";O:8:"stdClass":47:{s:5:"width";s:4:"full";s:13:"content_width";s:5:"fixed";s:11:"full_height";s:7:"default";s:10:"text_color";s:6:"ffffff";s:10:"link_color";s:0:"";s:11:"hover_color";s:0:"";s:13:"heading_color";s:0:"";s:7:"bg_type";s:5:"color";s:8:"bg_color";s:6:"7341d6";s:10:"bg_opacity";s:3:"100";s:8:"bg_image";s:0:"";s:9:"bg_repeat";s:9:"no-repeat";s:11:"bg_position";s:13:"center center";s:13:"bg_attachment";s:6:"scroll";s:7:"bg_size";s:5:"cover";s:8:"bg_video";s:0:"";s:13:"bg_video_webm";s:0:"";s:17:"bg_video_fallback";s:0:"";s:9:"ss_source";s:9:"wordpress";s:9:"ss_photos";s:0:"";s:11:"ss_feed_url";s:0:"";s:8:"ss_speed";s:1:"3";s:13:"ss_transition";s:4:"fade";s:21:"ss_transitionDuration";s:1:"1";s:12:"ss_randomize";s:5:"false";s:17:"bg_parallax_image";s:0:"";s:17:"bg_parallax_speed";s:1:"2";s:16:"bg_overlay_color";s:0:"";s:18:"bg_overlay_opacity";s:2:"50";s:11:"border_type";s:0:"";s:12:"border_color";s:0:"";s:14:"border_opacity";s:3:"100";s:10:"border_top";s:1:"1";s:13:"border_bottom";s:1:"1";s:11:"border_left";s:1:"0";s:12:"border_right";s:1:"0";s:10:"margin_top";s:0:"";s:13:"margin_bottom";s:0:"";s:11:"margin_left";s:0:"";s:12:"margin_right";s:0:"";s:11:"padding_top";s:2:"90";s:14:"padding_bottom";s:2:"50";s:12:"padding_left";s:0:"";s:13:"padding_right";s:0:"";s:18:"responsive_display";s:0:"";s:2:"id";s:0:"";s:5:"class";s:0:"";}}s:13:"56522357cc538";O:8:"stdClass":5:{s:4:"node";s:13:"56522357cc538";s:4:"type";s:12:"column-group";s:6:"parent";s:13:"56522357c651e";s:8:"position";i:0;s:8:"settings";s:0:"";}s:13:"56522357ccb2a";O:8:"stdClass":5:{s:4:"node";s:13:"56522357ccb2a";s:4:"type";s:6:"column";s:6:"parent";s:13:"56522357cc538";s:8:"position";i:0;s:8:"settings";O:8:"stdClass":1:{s:4:"size";i:100;}}s:13:"56522357c6102";O:8:"stdClass":5:{s:4:"node";s:13:"56522357c6102";s:4:"type";s:6:"module";s:6:"parent";s:13:"56522357ccb2a";s:8:"position";i:1;s:8:"settings";O:8:"stdClass":24:{s:7:"heading";s:25:"Getting Started with Text";s:4:"link";s:0:"";s:11:"link_target";s:5:"_self";s:5:"color";s:0:"";s:9:"alignment";s:6:"center";s:3:"tag";s:2:"h1";s:4:"font";a:2:{s:6:"family";s:7:"Default";s:6:"weight";s:7:"default";}s:9:"font_size";s:7:"default";s:16:"custom_font_size";s:2:"24";s:11:"r_alignment";s:7:"default";s:18:"r_custom_alignment";s:6:"center";s:11:"r_font_size";s:7:"default";s:18:"r_custom_font_size";s:2:"24";s:10:"margin_top";s:0:"";s:13:"margin_bottom";s:0:"";s:11:"margin_left";s:0:"";s:12:"margin_right";s:0:"";s:18:"responsive_display";s:0:"";s:9:"animation";s:0:"";s:15:"animation_delay";s:3:"0.0";s:2:"id";s:0:"";s:5:"class";s:0:"";s:4:"type";s:7:"heading";s:11:"link-search";s:0:"";}}s:13:"565223ee8d580";O:8:"stdClass":5:{s:4:"node";s:13:"565223ee8d580";s:4:"type";s:6:"module";s:6:"parent";s:13:"56522357ccb2a";s:8:"position";i:0;s:8:"settings";O:8:"stdClass":22:{s:4:"icon";s:10:"fa fa-list";s:4:"link";s:0:"";s:11:"link_target";s:5:"_self";s:4:"text";s:0:"";s:5:"color";s:6:"ffffff";s:11:"hover_color";s:6:"ffffff";s:8:"bg_color";s:6:"a850fb";s:14:"bg_hover_color";s:0:"";s:7:"three_d";s:1:"0";s:4:"size";s:2:"80";s:5:"align";s:6:"center";s:10:"margin_top";s:0:"";s:13:"margin_bottom";s:0:"";s:11:"margin_left";s:0:"";s:12:"margin_right";s:0:"";s:18:"responsive_display";s:0:"";s:9:"animation";s:0:"";s:15:"animation_delay";s:3:"0.0";s:2:"id";s:0:"";s:5:"class";s:0:"";s:4:"type";s:4:"icon";s:11:"link-search";s:0:"";}}s:13:"565226134b6b5";O:8:"stdClass":5:{s:4:"node";s:13:"565226134b6b5";s:4:"type";s:6:"module";s:6:"parent";s:13:"56521c5776808";s:8:"position";i:0;s:8:"settings";O:8:"stdClass":11:{s:4:"text";s:640:"

Text modules can hold passages of text with multiple types of tags inside.

Paragraph Text. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo.

Blockquote. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Ordered and Unordered Lists

";s:10:"margin_top";s:0:"";s:13:"margin_bottom";s:0:"";s:11:"margin_left";s:0:"";s:12:"margin_right";s:0:"";s:18:"responsive_display";s:0:"";s:9:"animation";s:0:"";s:15:"animation_delay";s:3:"0.0";s:2:"id";s:0:"";s:5:"class";s:0:"";s:4:"type";s:9:"rich-text";}}s:13:"56522650e5817";O:8:"stdClass":5:{s:4:"node";s:13:"56522650e5817";s:4:"type";s:3:"row";s:6:"parent";N;s:8:"position";i:2;s:8:"settings";O:8:"stdClass":47:{s:5:"width";s:4:"full";s:13:"content_width";s:5:"fixed";s:11:"full_height";s:7:"default";s:10:"text_color";s:0:"";s:10:"link_color";s:0:"";s:11:"hover_color";s:0:"";s:13:"heading_color";s:0:"";s:7:"bg_type";s:5:"color";s:8:"bg_color";s:6:"dcdafb";s:10:"bg_opacity";s:3:"100";s:8:"bg_image";s:0:"";s:9:"bg_repeat";s:9:"no-repeat";s:11:"bg_position";s:13:"center center";s:13:"bg_attachment";s:6:"scroll";s:7:"bg_size";s:5:"cover";s:8:"bg_video";s:0:"";s:13:"bg_video_webm";s:0:"";s:17:"bg_video_fallback";s:0:"";s:9:"ss_source";s:9:"wordpress";s:9:"ss_photos";s:0:"";s:11:"ss_feed_url";s:0:"";s:8:"ss_speed";s:1:"3";s:13:"ss_transition";s:4:"fade";s:21:"ss_transitionDuration";s:1:"1";s:12:"ss_randomize";s:5:"false";s:17:"bg_parallax_image";s:0:"";s:17:"bg_parallax_speed";s:1:"2";s:16:"bg_overlay_color";s:0:"";s:18:"bg_overlay_opacity";s:2:"50";s:11:"border_type";s:0:"";s:12:"border_color";s:0:"";s:14:"border_opacity";s:3:"100";s:10:"border_top";s:1:"1";s:13:"border_bottom";s:1:"1";s:11:"border_left";s:1:"0";s:12:"border_right";s:1:"0";s:10:"margin_top";s:0:"";s:13:"margin_bottom";s:0:"";s:11:"margin_left";s:0:"";s:12:"margin_right";s:0:"";s:11:"padding_top";s:0:"";s:14:"padding_bottom";s:0:"";s:12:"padding_left";s:0:"";s:13:"padding_right";s:0:"";s:18:"responsive_display";s:0:"";s:2:"id";s:0:"";s:5:"class";s:0:"";}}s:13:"56522650ef7f6";O:8:"stdClass":5:{s:4:"node";s:13:"56522650ef7f6";s:4:"type";s:12:"column-group";s:6:"parent";s:13:"56522650e5817";s:8:"position";i:0;s:8:"settings";s:0:"";}s:13:"56522650efef3";O:8:"stdClass":5:{s:4:"node";s:13:"56522650efef3";s:4:"type";s:6:"column";s:6:"parent";s:13:"56522650ef7f6";s:8:"position";i:0;s:8:"settings";O:8:"stdClass":1:{s:4:"size";d:50;}}s:13:"56522650eff1b";O:8:"stdClass":5:{s:4:"node";s:13:"56522650eff1b";s:4:"type";s:6:"column";s:6:"parent";s:13:"56522650ef7f6";s:8:"position";i:1;s:8:"settings";O:8:"stdClass":38:{s:4:"size";s:2:"50";s:12:"equal_height";s:2:"no";s:10:"text_color";s:0:"";s:10:"link_color";s:0:"";s:11:"hover_color";s:0:"";s:13:"heading_color";s:0:"";s:7:"bg_type";s:5:"color";s:8:"bg_color";s:0:"";s:10:"bg_opacity";s:3:"100";s:8:"bg_image";s:0:"";s:9:"bg_repeat";s:9:"no-repeat";s:11:"bg_position";s:13:"center center";s:13:"bg_attachment";s:6:"scroll";s:7:"bg_size";s:5:"cover";s:16:"bg_overlay_color";s:0:"";s:18:"bg_overlay_opacity";s:2:"50";s:11:"border_type";s:0:"";s:12:"border_color";s:0:"";s:14:"border_opacity";s:3:"100";s:10:"border_top";s:1:"1";s:13:"border_bottom";s:1:"1";s:11:"border_left";s:1:"1";s:12:"border_right";s:1:"1";s:10:"margin_top";s:0:"";s:13:"margin_bottom";s:0:"";s:11:"margin_left";s:0:"";s:12:"margin_right";s:0:"";s:11:"padding_top";s:2:"30";s:14:"padding_bottom";s:0:"";s:12:"padding_left";s:0:"";s:13:"padding_right";s:0:"";s:18:"responsive_display";s:0:"";s:11:"medium_size";s:7:"default";s:18:"custom_medium_size";s:3:"100";s:15:"responsive_size";s:7:"default";s:22:"custom_responsive_size";s:3:"100";s:2:"id";s:0:"";s:5:"class";s:0:"";}}s:13:"565226706348b";O:8:"stdClass":5:{s:4:"node";s:13:"565226706348b";s:4:"type";s:6:"module";s:6:"parent";s:13:"56522650efef3";s:8:"position";i:0;s:8:"settings";O:8:"stdClass":11:{s:4:"text";s:316:"

Heading Modules

Heading tags are how you define the structure of your page. Heading Modules work just like text modules but are useful when all you want to add to your layout is a heading without text following it. Heading modules can be found in the Basic Modules section of the Add Content area. 

";s:10:"margin_top";s:0:"";s:13:"margin_bottom";s:0:"";s:11:"margin_left";s:0:"";s:12:"margin_right";s:0:"";s:18:"responsive_display";s:0:"";s:9:"animation";s:0:"";s:15:"animation_delay";s:3:"0.0";s:2:"id";s:0:"";s:5:"class";s:0:"";s:4:"type";s:9:"rich-text";}}s:13:"5652282eb1dfc";O:8:"stdClass":5:{s:4:"node";s:13:"5652282eb1dfc";s:4:"type";s:3:"row";s:6:"parent";N;s:8:"position";i:3;s:8:"settings";O:8:"stdClass":47:{s:5:"width";s:4:"full";s:13:"content_width";s:5:"fixed";s:11:"full_height";s:7:"default";s:10:"text_color";s:6:"ffffff";s:10:"link_color";s:0:"";s:11:"hover_color";s:0:"";s:13:"heading_color";s:0:"";s:7:"bg_type";s:5:"color";s:8:"bg_color";s:6:"7341d6";s:10:"bg_opacity";s:3:"100";s:8:"bg_image";s:0:"";s:9:"bg_repeat";s:9:"no-repeat";s:11:"bg_position";s:13:"center center";s:13:"bg_attachment";s:6:"scroll";s:7:"bg_size";s:5:"cover";s:8:"bg_video";s:0:"";s:13:"bg_video_webm";s:0:"";s:17:"bg_video_fallback";s:0:"";s:9:"ss_source";s:9:"wordpress";s:9:"ss_photos";s:0:"";s:11:"ss_feed_url";s:0:"";s:8:"ss_speed";s:1:"3";s:13:"ss_transition";s:4:"fade";s:21:"ss_transitionDuration";s:1:"1";s:12:"ss_randomize";s:5:"false";s:17:"bg_parallax_image";s:0:"";s:17:"bg_parallax_speed";s:1:"2";s:16:"bg_overlay_color";s:0:"";s:18:"bg_overlay_opacity";s:2:"50";s:11:"border_type";s:0:"";s:12:"border_color";s:0:"";s:14:"border_opacity";s:3:"100";s:10:"border_top";s:1:"1";s:13:"border_bottom";s:1:"1";s:11:"border_left";s:1:"0";s:12:"border_right";s:1:"0";s:10:"margin_top";s:0:"";s:13:"margin_bottom";s:0:"";s:11:"margin_left";s:0:"";s:12:"margin_right";s:0:"";s:11:"padding_top";s:0:"";s:14:"padding_bottom";s:0:"";s:12:"padding_left";s:0:"";s:13:"padding_right";s:0:"";s:18:"responsive_display";s:0:"";s:2:"id";s:0:"";s:5:"class";s:0:"";}}s:13:"5652282ebc647";O:8:"stdClass":5:{s:4:"node";s:13:"5652282ebc647";s:4:"type";s:12:"column-group";s:6:"parent";s:13:"5652282eb1dfc";s:8:"position";i:1;s:8:"settings";s:0:"";}s:13:"5652282ebccbc";O:8:"stdClass":5:{s:4:"node";s:13:"5652282ebccbc";s:4:"type";s:6:"column";s:6:"parent";s:13:"5652282ebc647";s:8:"position";i:0;s:8:"settings";O:8:"stdClass":1:{s:4:"size";d:50;}}s:13:"5652282ebcce8";O:8:"stdClass":5:{s:4:"node";s:13:"5652282ebcce8";s:4:"type";s:6:"column";s:6:"parent";s:13:"5652282ebc647";s:8:"position";i:1;s:8:"settings";O:8:"stdClass":38:{s:4:"size";s:2:"50";s:12:"equal_height";s:2:"no";s:10:"text_color";s:0:"";s:10:"link_color";s:0:"";s:11:"hover_color";s:0:"";s:13:"heading_color";s:0:"";s:7:"bg_type";s:5:"color";s:8:"bg_color";s:0:"";s:10:"bg_opacity";s:3:"100";s:8:"bg_image";s:0:"";s:9:"bg_repeat";s:9:"no-repeat";s:11:"bg_position";s:13:"center center";s:13:"bg_attachment";s:6:"scroll";s:7:"bg_size";s:5:"cover";s:16:"bg_overlay_color";s:0:"";s:18:"bg_overlay_opacity";s:2:"50";s:11:"border_type";s:0:"";s:12:"border_color";s:0:"";s:14:"border_opacity";s:3:"100";s:10:"border_top";s:1:"1";s:13:"border_bottom";s:1:"1";s:11:"border_left";s:1:"1";s:12:"border_right";s:1:"1";s:10:"margin_top";s:0:"";s:13:"margin_bottom";s:0:"";s:11:"margin_left";s:0:"";s:12:"margin_right";s:0:"";s:11:"padding_top";s:0:"";s:14:"padding_bottom";s:0:"";s:12:"padding_left";s:0:"";s:13:"padding_right";s:0:"";s:18:"responsive_display";s:0:"";s:11:"medium_size";s:7:"default";s:18:"custom_medium_size";s:3:"100";s:15:"responsive_size";s:7:"default";s:22:"custom_responsive_size";s:3:"100";s:2:"id";s:16:"drop-text-module";s:5:"class";s:0:"";}}s:13:"56522851a7e0f";O:8:"stdClass":5:{s:4:"node";s:13:"56522851a7e0f";s:4:"type";s:12:"column-group";s:6:"parent";s:13:"5652282eb1dfc";s:8:"position";i:0;s:8:"settings";s:0:"";}s:13:"56522851a857f";O:8:"stdClass":5:{s:4:"node";s:13:"56522851a857f";s:4:"type";s:6:"column";s:6:"parent";s:13:"56522851a7e0f";s:8:"position";i:0;s:8:"settings";O:8:"stdClass":1:{s:4:"size";i:100;}}s:13:"56522851a75f3";O:8:"stdClass":5:{s:4:"node";s:13:"56522851a75f3";s:4:"type";s:6:"module";s:6:"parent";s:13:"56522851a857f";s:8:"position";i:0;s:8:"settings";O:8:"stdClass":24:{s:7:"heading";s:23:"Ok, Now It's Your Turn!";s:4:"link";s:0:"";s:11:"link_target";s:5:"_self";s:5:"color";s:0:"";s:9:"alignment";s:6:"center";s:3:"tag";s:2:"h2";s:4:"font";a:2:{s:6:"family";s:7:"Default";s:6:"weight";s:7:"default";}s:9:"font_size";s:7:"default";s:16:"custom_font_size";s:2:"24";s:11:"r_alignment";s:7:"default";s:18:"r_custom_alignment";s:6:"center";s:11:"r_font_size";s:7:"default";s:18:"r_custom_font_size";s:2:"24";s:10:"margin_top";s:0:"";s:13:"margin_bottom";s:0:"";s:11:"margin_left";s:0:"";s:12:"margin_right";s:0:"";s:18:"responsive_display";s:0:"";s:9:"animation";s:0:"";s:15:"animation_delay";s:3:"0.0";s:2:"id";s:0:"";s:5:"class";s:0:"";s:4:"type";s:7:"heading";s:11:"link-search";s:0:"";}}s:13:"565228693ed16";O:8:"stdClass":5:{s:4:"node";s:13:"565228693ed16";s:4:"type";s:6:"module";s:6:"parent";s:13:"5652282ebccbc";s:8:"position";i:0;s:8:"settings";O:8:"stdClass":11:{s:4:"text";s:177:"

Click the "Add Content" button in the top right corner and select a Text Module from the Basic Modules section. Drag and drop the module in the blank column to the right.

";s:10:"margin_top";s:0:"";s:13:"margin_bottom";s:0:"";s:11:"margin_left";s:0:"";s:12:"margin_right";s:0:"";s:18:"responsive_display";s:0:"";s:9:"animation";s:0:"";s:15:"animation_delay";s:3:"0.0";s:2:"id";s:0:"";s:5:"class";s:0:"";s:4:"type";s:9:"rich-text";}}s:13:"565229f14bee9";O:8:"stdClass":5:{s:4:"node";s:13:"565229f14bee9";s:4:"type";s:6:"module";s:6:"parent";s:13:"56522650eff1b";s:8:"position";i:0;s:8:"settings";O:8:"stdClass":24:{s:7:"heading";s:9:"Heading 1";s:4:"link";s:0:"";s:11:"link_target";s:5:"_self";s:5:"color";s:0:"";s:9:"alignment";s:4:"left";s:3:"tag";s:2:"h1";s:4:"font";a:2:{s:6:"family";s:7:"Default";s:6:"weight";s:7:"default";}s:9:"font_size";s:7:"default";s:16:"custom_font_size";s:2:"24";s:11:"r_alignment";s:7:"default";s:18:"r_custom_alignment";s:6:"center";s:11:"r_font_size";s:7:"default";s:18:"r_custom_font_size";s:2:"24";s:10:"margin_top";s:1:"0";s:13:"margin_bottom";s:1:"0";s:11:"margin_left";s:0:"";s:12:"margin_right";s:0:"";s:18:"responsive_display";s:0:"";s:9:"animation";s:0:"";s:15:"animation_delay";s:3:"0.0";s:2:"id";s:0:"";s:5:"class";s:0:"";s:4:"type";s:7:"heading";s:11:"link-search";s:0:"";}}s:13:"56522a03d7c46";O:8:"stdClass":5:{s:4:"node";s:13:"56522a03d7c46";s:4:"type";s:6:"module";s:6:"parent";s:13:"56522650eff1b";s:8:"position";i:1;s:8:"settings";O:8:"stdClass":24:{s:7:"heading";s:9:"Heading 2";s:4:"link";s:0:"";s:11:"link_target";s:5:"_self";s:5:"color";s:0:"";s:9:"alignment";s:4:"left";s:3:"tag";s:2:"h2";s:4:"font";a:2:{s:6:"family";s:7:"Default";s:6:"weight";s:7:"default";}s:9:"font_size";s:7:"default";s:16:"custom_font_size";s:2:"24";s:11:"r_alignment";s:7:"default";s:18:"r_custom_alignment";s:6:"center";s:11:"r_font_size";s:7:"default";s:18:"r_custom_font_size";s:2:"24";s:10:"margin_top";s:1:"0";s:13:"margin_bottom";s:1:"0";s:11:"margin_left";s:0:"";s:12:"margin_right";s:0:"";s:18:"responsive_display";s:0:"";s:9:"animation";s:0:"";s:15:"animation_delay";s:3:"0.0";s:2:"id";s:0:"";s:5:"class";s:0:"";s:4:"type";s:7:"heading";s:11:"link-search";s:0:"";}}s:13:"56522a362e5c5";O:8:"stdClass":5:{s:4:"node";s:13:"56522a362e5c5";s:4:"type";s:6:"module";s:6:"parent";s:13:"56522650eff1b";s:8:"position";i:2;s:8:"settings";O:8:"stdClass":24:{s:7:"heading";s:9:"Heading 3";s:4:"link";s:0:"";s:11:"link_target";s:5:"_self";s:5:"color";s:0:"";s:9:"alignment";s:4:"left";s:3:"tag";s:2:"h3";s:4:"font";a:2:{s:6:"family";s:7:"Default";s:6:"weight";s:7:"default";}s:9:"font_size";s:7:"default";s:16:"custom_font_size";s:2:"24";s:11:"r_alignment";s:7:"default";s:18:"r_custom_alignment";s:6:"center";s:11:"r_font_size";s:7:"default";s:18:"r_custom_font_size";s:2:"24";s:10:"margin_top";s:1:"0";s:13:"margin_bottom";s:1:"0";s:11:"margin_left";s:0:"";s:12:"margin_right";s:0:"";s:18:"responsive_display";s:0:"";s:9:"animation";s:0:"";s:15:"animation_delay";s:3:"0.0";s:2:"id";s:0:"";s:5:"class";s:0:"";s:4:"type";s:7:"heading";s:11:"link-search";s:0:"";}}s:13:"56522a39b02dd";O:8:"stdClass":5:{s:4:"node";s:13:"56522a39b02dd";s:4:"type";s:6:"module";s:6:"parent";s:13:"56522650eff1b";s:8:"position";i:3;s:8:"settings";O:8:"stdClass":24:{s:7:"heading";s:9:"Heading 4";s:4:"link";s:0:"";s:11:"link_target";s:5:"_self";s:5:"color";s:0:"";s:9:"alignment";s:4:"left";s:3:"tag";s:2:"h4";s:4:"font";a:2:{s:6:"family";s:7:"Default";s:6:"weight";s:7:"default";}s:9:"font_size";s:7:"default";s:16:"custom_font_size";s:2:"24";s:11:"r_alignment";s:7:"default";s:18:"r_custom_alignment";s:6:"center";s:11:"r_font_size";s:7:"default";s:18:"r_custom_font_size";s:2:"24";s:10:"margin_top";s:1:"0";s:13:"margin_bottom";s:1:"0";s:11:"margin_left";s:0:"";s:12:"margin_right";s:0:"";s:18:"responsive_display";s:0:"";s:9:"animation";s:0:"";s:15:"animation_delay";s:3:"0.0";s:2:"id";s:0:"";s:5:"class";s:0:"";s:4:"type";s:7:"heading";s:11:"link-search";s:0:"";}}} -------------------------------------------------------------------------------- /bb-tutorials/includes/single-tutorial.php: -------------------------------------------------------------------------------- 1 | 2 | > 3 | 4 | 5 | 6 | 7 | 8 | 9 | > 10 |
11 | 12 |
> 13 | 14 |
15 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /bb-ui-themes/bb-ui-themes.php: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /bb-ui-themes/classes/class-bb-ui-themes.php: -------------------------------------------------------------------------------- 1 | bb_ui_theme; 14 | if ($ui_theme == 'custom') { 15 | // setup custom style block 16 | add_action('wp_head', array($this, 'print_custom_css')); 17 | 18 | } elseif ($ui_theme != '') { 19 | $theme = $themes[$ui_theme]; 20 | wp_enqueue_style('bb-ui-theme', $theme['url']); 21 | } 22 | wp_enqueue_script('bb-ui-theme', plugins_url('/js/settings.js', dirname(__FILE__)), false, false, true); 23 | 24 | $bb_ui = array(); 25 | $bb_ui['themes'] = $themes; 26 | $bb_ui['fields'] = self::get_color_fields(); 27 | wp_localize_script('bb-ui-theme', 'BB_UI', $bb_ui); 28 | } 29 | } 30 | 31 | function add_settings($form, $id) { 32 | 33 | if ($id == 'global') { 34 | $form['tabs']['ui'] = array( 35 | 'title' => __('User Interface', 'bb-experiments'), 36 | 'sections' => array( 37 | 'general' => array( 38 | 'title' => '', 39 | 'fields' => array( 40 | 'bb_ui_theme' => array( 41 | 'type' => 'select', 42 | 'label' => 'Color Scheme', 43 | 'options' => self::get_theme_options(), 44 | 'toggle' => array( 45 | 'custom' => array( 46 | 'sections' => array('custom_colors') 47 | ) 48 | ) 49 | ) 50 | ) 51 | ), 52 | 'custom_colors' => array( 53 | 'title' => __('Customize UI Colors', 'bb-experiments'), 54 | 'fields' => self::get_color_fields() 55 | ) 56 | ) 57 | ); 58 | } 59 | return $form; 60 | } 61 | 62 | static function get_theme_options() { 63 | $options = array( 64 | '' => __('Default', 'bb-experiments') 65 | ); 66 | $themes = self::get_themes(); 67 | if (!empty($themes)) { 68 | foreach ($themes as $handle => $args) { 69 | $options[$handle] = $args['name']; 70 | } 71 | } 72 | //$options['custom'] = __('Custom', 'bb-experiments'); 73 | return $options; 74 | } 75 | 76 | static function get_themes() { 77 | $themes = array( 78 | 'dark' => array( 79 | 'name' => __('Beaver Builder Dark', 'bb-experiments'), 80 | 'url' => plugins_url('/css/dark.css', dirname(__FILE__) ) 81 | ), 82 | 'wordpress' => array( 83 | 'name' => __('WordPress Dark', 'bb-experiments'), 84 | 'url' => plugins_url('/css/wordpress.css', dirname(__FILE__) ) 85 | ) 86 | ); 87 | return apply_filters('bb_experiments_get_ui_themes', $themes); 88 | } 89 | 90 | static function get_color_fields() { 91 | $selectors = array( 92 | 'panel_background' => array( 93 | 'label' => __('Panel Background', 'bb-experiments'), 94 | 'type' => 'color', 95 | 'show_reset' => true, 96 | 'properties' => array('background'), 97 | 'selectors' => array( 98 | 'body .fl-builder-panel', 99 | 'body .fl-builder-bar-content', 100 | 'body .fl-lightbox', 101 | 'body .fl-lightbox-header', 102 | 'body .fl-form-table th', 103 | 'body .fl-builder-settings-tabs a.fl-active' 104 | ) 105 | ), 106 | 'panel_color' => array( 107 | 'type' => 'color', 108 | 'label' => __('Panel Text Color', 'bb-experiments'), 109 | 'show_reset' => true, 110 | 'properties' => array('color'), 111 | 'selectors' => array( 112 | 'body .fl-lightbox *:not(i)' 113 | ) 114 | ) 115 | ); 116 | return $selectors; 117 | } 118 | 119 | function print_custom_css() { 120 | $fields = self::get_color_fields(); 121 | $settings = FLBuilderModel::get_global_settings(); 122 | print "\n"; 142 | } 143 | 144 | } 145 | ?> 146 | -------------------------------------------------------------------------------- /bb-ui-themes/css/dark.css: -------------------------------------------------------------------------------- 1 | /* 2 | Dark Theme for Beaver Builder UI 3 | By Brent Jett 4 | */ 5 | body .fl-builder-panel, 6 | body .fl-builder-bar-content, 7 | body .fl-lightbox, 8 | body .fl-lightbox-header { 9 | background-color:#333; 10 | border-color:black; 11 | } 12 | body .fl-builder-panel { 13 | border-left: 1px solid #000; 14 | } 15 | body .fl-builder-bar-content { 16 | border-bottom: 1px solid #000; 17 | } 18 | body .fl-builder-bar-title { 19 | color:#E0E0E0; 20 | } 21 | body .fl-builder-bar .fl-builder-button, 22 | body .fl-lightbox .fl-builder-button { 23 | border: 1px solid #000000; 24 | color: #FBB040; 25 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0),0 1px 0 rgba(0,0,0,.08); 26 | background: #2D2D2D; 27 | } 28 | body .fl-builder-button.fl-builder-button-primary { 29 | background: #FBB040; 30 | border-color: black; 31 | color: #333 !important; 32 | } 33 | body .fl-builder-blocks-section .fl-builder-blocks-section-title { 34 | color:#A7A7A7; 35 | border-bottom: 1px solid #000000; 36 | } 37 | body .fl-builder-blocks-section-content .fl-builder-block { 38 | border-bottom: 1px solid #353535; 39 | color: #B7B7B7; 40 | } 41 | body .fl-builder-blocks-section .fl-builder-blocks-section-title:hover, 42 | body .fl-builder-blocks-section .fl-builder-blocks-section-title:hover { 43 | background-color:rgba(255, 255, 255, .05); 44 | } 45 | body .fl-builder-blocks-separator { 46 | background:#272727; 47 | } 48 | 49 | body .fl-builder-blocks-section-content { 50 | background:#464646; 51 | } 52 | body .fl-builder-blocks-section-content .fl-builder-block { 53 | transition-property: background; 54 | transition-duration: .35s; 55 | } 56 | body .fl-builder-blocks-section-content .fl-builder-block:hover { 57 | background:#FBB040; 58 | color: #333 !important; 59 | } 60 | body .fl-builder-panel-actions { 61 | background: #272727; 62 | border-bottom: 1px solid #000000; 63 | } 64 | 65 | body .fl-builder-blocks-section .fl-builder-blocks-section-title:hover, 66 | body .fl-builder-blocks-section .fl-builder-blocks-section-title:hover i { 67 | background:transparent; 68 | } 69 | 70 | /* Small Modal */ 71 | body .fl-lightbox *:not(i) { 72 | color:#A7A7A7 !important; 73 | } 74 | body .fl-builder-actions-title { 75 | color:#aaa !important; 76 | } 77 | 78 | body .fl-lightbox-header h1 { 79 | color:#A7A7A7 !important; 80 | } 81 | 82 | body .fl-builder-settings-fields h3.fl-builder-settings-title, 83 | body .fl-lightbox .fl-builder-settings-tab-description { 84 | color:#A7A7A7; 85 | border-color:black; 86 | } 87 | 88 | body .fl-builder-settings-tabs { 89 | background: #272727; 90 | border-bottom: 1px solid #000000; 91 | } 92 | body .fl-builder-settings-tabs a:hover { 93 | color:#dddddd; 94 | } 95 | body .fl-builder-settings-tabs a.fl-active { 96 | background-color:#333; 97 | color:#A7A7A7; 98 | border-color:black; 99 | } 100 | body .fl-form-table th { 101 | background: transparent !important; 102 | } 103 | body .fl-builder-settings-fields label { 104 | color:#A7A7A7; 105 | } 106 | body .fl-lightbox-footer { 107 | border-color:black; 108 | } 109 | 110 | body .fl-user-templates, 111 | body .fl-user-template { 112 | border-color:black; 113 | } 114 | body .fl-user-template:hover { 115 | background:#FBB040; 116 | } 117 | body .fl-user-template:hover *, 118 | body .fl-user-template:hover a { 119 | color: #333 !important; 120 | } 121 | body .fl-template-image:hover { 122 | border-color: #FBB040; 123 | } 124 | 125 | 126 | 127 | body .fl-builder-settings-fields textarea:focus, 128 | body .fl-builder-settings-fields input[type=text]:focus, 129 | body .fl-builder-settings-fields input[type=password]:focus, 130 | body .fl-builder-settings-fields input[type=file]:focus, 131 | body .fl-builder-settings-fields input[type=email]:focus, 132 | body .fl-builder-settings-fields input[type=number]:focus, 133 | body .fl-builder-settings-fields input[type=search]:focus, 134 | body .fl-builder-settings-fields input[type=tel]:focus, 135 | body .fl-builder-settings-fields input[type=url]:focus, 136 | body .fl-builder-settings-fields select:focus { 137 | background-color:white !important; 138 | } 139 | 140 | 141 | /* Metadata panel */ 142 | body .fl-metadata-panel, 143 | body .fl-metadata-panel .fl-metadata-tabs a.fl-active { 144 | background-color:#333; 145 | border-color:black; 146 | color:#aaa; 147 | } 148 | body .fl-metadata-panel .fl-metadata-tabs { 149 | background: #272727; 150 | border-bottom: 1px solid #000000; 151 | } 152 | body .fl-metadata-panel-content .field .input-wrap, 153 | body .fl-post-link-block, 154 | body .fl-post-link-block:hover { 155 | border-color:black; 156 | color:#aaa; 157 | } 158 | body .fl-metadata-panel-content .field label { 159 | background:black; 160 | color:#aaa; 161 | } 162 | body .fl-metadata-panel-content .fl-post-list-section-content { 163 | background:#464646; 164 | border-color:#353535; 165 | } 166 | body .fl-metadata-panel-content .fl-post-list-section-content .fl-post-link-block { 167 | transition-property: background, color; 168 | transition-duration: .35s; 169 | border-color:#353535; 170 | } 171 | body .fl-metadata-panel-content .fl-post-list-section-content .fl-post-link-block:hover { 172 | background:#FBB040; 173 | color: #333 !important; 174 | } 175 | body .fl-metadata-panel-content input:focus { 176 | color:#aaa; 177 | } 178 | 179 | @supports (-webkit-backdrop-filter: blur(10px)) { 180 | 181 | body .fl-builder-panel, 182 | body .fl-builder-bar-content, 183 | body .fl-lightbox { 184 | background-color: rgba(51, 51, 51, 0.9); 185 | -webkit-backdrop-filter: blur(30px) saturate(60%); 186 | } 187 | body .fl-lightbox { 188 | box-shadow: rgba(0, 0, 0, .6) 0 4px 30px; 189 | -moz-box-shadow: rgba(0, 0, 0, .6) 0 4px 30px; 190 | -webkit-box-shadow: rgba(0, 0, 0, 0.6) 0 4px 30px; 191 | } 192 | body .fl-builder-blocks-section-content { 193 | background: rgba(0, 0, 0, 0.28); 194 | } 195 | body .fl-lightbox-mask { 196 | -webkit-backdrop-filter: blur(20px) saturate(80%); 197 | background: rgba(178, 168, 176, 0.2); 198 | opacity: 1; 199 | } 200 | } 201 | -------------------------------------------------------------------------------- /bb-ui-themes/css/light.css: -------------------------------------------------------------------------------- 1 | /* 2 | Light Theme for Beaver Builder UI 3 | By Brent Jett 4 | */ 5 | body .fl-builder-panel, 6 | body .fl-builder-bar-content, 7 | body .fl-lightbox, 8 | body .fl-lightbox-header { 9 | background-color:#fff; 10 | color:#444; 11 | border-color:#ddd; 12 | } 13 | -------------------------------------------------------------------------------- /bb-ui-themes/css/wordpress.css: -------------------------------------------------------------------------------- 1 | /* 2 | Dark Theme for Beaver Builder UI 3 | By Brent Jett 4 | 5 | Panel BG Color: #23282d 6 | Main Text Color: #ffffff 7 | Seperator Color: black 8 | */ 9 | 10 | /* Main Backgrounds */ 11 | body .fl-builder-panel, 12 | body .fl-builder-bar-content, 13 | body .fl-lightbox, 14 | body .fl-lightbox-header { 15 | background-color:#23282d; 16 | border-color:black; 17 | } 18 | 19 | body .fl-builder-panel { 20 | border-color: #000; 21 | } 22 | body .fl-builder-bar-content { 23 | border-bottom: 1px solid #000; 24 | } 25 | body .fl-builder-bar-title { 26 | color:#B4B6B9; 27 | } 28 | 29 | /* Buttons */ 30 | body .fl-builder-bar .fl-builder-button, 31 | body .fl-lightbox .fl-builder-button { 32 | border-color: #7B8792; 33 | color: #ffffff; 34 | box-shadow: none; 35 | background: #46505A; 36 | } 37 | /* PRIMARY BUTTON */ 38 | body .fl-builder-button.fl-builder-button-primary { 39 | background: #0073aa; 40 | border-color: #0073aa; 41 | color: #ffffff !important; 42 | } 43 | 44 | body .fl-builder-blocks-section { 45 | transition-property: background; 46 | transition-duration: .35s; 47 | } 48 | body .fl-builder-blocks-section .fl-builder-blocks-section-title { 49 | color:#A7A7A7; 50 | border-color: transparent; 51 | } 52 | body .fl-builder-blocks-section-content .fl-builder-block { 53 | border-color: transparent; 54 | color: #B7B7B7; 55 | } 56 | body .fl-builder-blocks-section .fl-builder-blocks-section-title:hover, 57 | body .fl-builder-blocks-section .fl-builder-blocks-section-title:hover i { 58 | background:transparent; 59 | color:#00b9eb; 60 | } 61 | body .fl-builder-blocks-section.fl-active { 62 | background: #0073aa; 63 | } 64 | /* Active block section */ 65 | body .fl-builder-blocks-section.fl-active .fl-builder-blocks-section-title, 66 | body .fl-builder-blocks-section.fl-active .fl-builder-blocks-section-title i, 67 | body .fl-builder-blocks-section.fl-active .fl-builder-blocks-section-title:hover, 68 | body .fl-builder-blocks-section.fl-active .fl-builder-blocks-section-title:hover i { 69 | background:transparent; 70 | color: #ffffff !important; 71 | } 72 | 73 | body .fl-builder-blocks-section-content .fl-builder-block { 74 | transition-property: color; 75 | transition-duration: .15s; 76 | color:#B4B9BE !important; 77 | } 78 | body .fl-builder-blocks-section-content .fl-builder-block:hover { 79 | background:transparent; 80 | color: #00b9eb !important; 81 | } 82 | 83 | /* Secondary Fill Color */ 84 | body .fl-builder-panel-actions, 85 | body .fl-builder-blocks-separator { 86 | background: #32373c; 87 | border-color: #272D33; 88 | } 89 | body .fl-builder-blocks-separator { 90 | border:none; 91 | } 92 | /* module list expanded */ 93 | body .fl-builder-blocks-section-content { 94 | background:#32373c; 95 | } 96 | 97 | /* Modal */ 98 | body .fl-lightbox *:not(i) { 99 | color:#989898 !important; 100 | } 101 | body .fl-lightbox input, 102 | body .fl-lightbox select { 103 | color:#333 !important; 104 | } 105 | body .fl-builder-actions-title { 106 | color:#aaa !important; 107 | } 108 | 109 | body .fl-lightbox-header h1 { 110 | color:#dddddd !important; 111 | } 112 | 113 | body .fl-builder-settings-fields h3.fl-builder-settings-title, 114 | body .fl-lightbox .fl-builder-settings-tab-description { 115 | color:#A7A7A7; 116 | border-color:black; 117 | } 118 | 119 | body .fl-builder-settings-tabs { 120 | background: #2C3135; 121 | border-bottom: 1px solid #000000; 122 | } 123 | body .fl-builder-settings-tabs a:hover { 124 | color:#dddddd; 125 | } 126 | body .fl-builder-settings-tabs a.fl-active { 127 | background-color:#23282D; 128 | color:#A7A7A7; 129 | border-color:black; 130 | } 131 | body .fl-form-table th { 132 | background: transparent !important; 133 | } 134 | body .fl-builder-settings-fields label { 135 | color:#A7A7A7; 136 | } 137 | body .fl-lightbox-footer { 138 | border-color:black; 139 | } 140 | 141 | body .fl-user-templates, 142 | body .fl-user-template { 143 | border-color:black; 144 | } 145 | body .fl-user-template:hover { 146 | background:#FBB040; 147 | } 148 | /* 149 | body .fl-user-template:hover *, 150 | body .fl-user-template:hover a { 151 | color: #333 !important; 152 | } 153 | */ 154 | /* Template thumbnail outline */ 155 | body .fl-template-image:hover { 156 | border-color: #0073aa; 157 | } 158 | 159 | 160 | body .fl-builder-settings-fields textarea:focus, 161 | body .fl-builder-settings-fields input[type=text]:focus, 162 | body .fl-builder-settings-fields input[type=password]:focus, 163 | body .fl-builder-settings-fields input[type=file]:focus, 164 | body .fl-builder-settings-fields input[type=email]:focus, 165 | body .fl-builder-settings-fields input[type=number]:focus, 166 | body .fl-builder-settings-fields input[type=search]:focus, 167 | body .fl-builder-settings-fields input[type=tel]:focus, 168 | body .fl-builder-settings-fields input[type=url]:focus, 169 | body .fl-builder-settings-fields select:focus { 170 | background-color:white !important; 171 | } 172 | -------------------------------------------------------------------------------- /bb-ui-themes/js/settings.js: -------------------------------------------------------------------------------- 1 | (function($){ 2 | 3 | $('body').on('change', '.fl-builder-global-settings select[name=bb_ui_theme]', function() { 4 | var themes = BB_UI.themes; 5 | var handle = $(this).val(); 6 | var theme = themes[handle]; 7 | var stylesheet = $('#bb-ui-theme-css'); 8 | if (!stylesheet.length) { 9 | var stylesheet = $('head').append(''); 10 | } 11 | if (handle == 'custom') { 12 | // handle custom colors 13 | stylesheet.prop('disabled', true); 14 | $('#bb-ui-theme-custom').prop('media', 'screen'); 15 | } else if (theme != undefined) { 16 | // Set stylesheet url 17 | var css_url = theme.url; 18 | stylesheet.attr('href', css_url); 19 | stylesheet.prop('disabled', false); 20 | $('#bb-ui-theme-custom').prop('media', 'none'); 21 | reset_custom_ui_styles(); 22 | } else { 23 | // Reset to default styling 24 | $('#bb-ui-theme-custom').prop('media', 'none'); 25 | reset_custom_ui_styles(); 26 | stylesheet.prop('disabled', true); 27 | } 28 | }); 29 | 30 | $('body').on('change', '.fl-builder-global-settings input.fl-color-picker-value', function() { 31 | 32 | var input = $(this); 33 | var name = input.attr('name'); 34 | var color = input.val(); 35 | var selectors = BB_UI.fields[name].selectors; 36 | var properties = BB_UI.fields[name].properties; 37 | console.log(selectors, properties); 38 | 39 | if (color != "") { 40 | 41 | $.each(properties, function(i, property) { 42 | console.log("set", property, selectors); 43 | $.each(selectors, function(i, selector) { 44 | $(selector).css(property, '#' + color).addClass('custom-ui-theme-' + property); 45 | }); 46 | }); 47 | 48 | } else { 49 | // clear the color 50 | console.log('clear css properties'); 51 | $('.custom-ui-theme-' + property).css(property, ""); 52 | } 53 | 54 | }); 55 | 56 | function reset_custom_ui_styles() { 57 | console.log('reset custom styles'); 58 | $('custom-ui-theme-color').css('color', ''); 59 | $('custom-ui-theme-background').css('background', ''); 60 | $('custom-ui-theme-background-color').css('background-color', ''); 61 | $('custom-ui-theme-border-color').css('border-color', ''); 62 | } 63 | 64 | })(jQuery); 65 | --------------------------------------------------------------------------------