Create Background Color Selector for Block

Permalink Browser Info Environment
Made a custom block with Block Designer for my client. The block was created correctly I want to change the background color of the block from a drop down selector of colors or the block picker attribute.

How can I do this with in the Block Designer Plugin.

Thanks

Type: Discussion
Status: Resolved
stewblack23
View Replies:
ramonleenders replied on at Permalink Reply
ramonleenders
Can you attach your config.json contents and where you want to put the background color on? So give some example HTML!

Kind regards,

Ramon
stewblack23 replied on at Permalink Reply
stewblack23
Current I have a test page with the block I created using the Block Designer plugin.
https://www.enablesoft.com/test...

What I would like to have a dropdown menu on the Block Designer interface that allows me to change the background color of the block. I would like it to add a class on the casestudy container wrapper that changes when I select from a dropdown when you edit the block.

The HTML markup would be similar to the HTML provided below.

<div class="casestudy red">
    <div class="icon">icon</div>    
    <h4 class="page-title">Title of Block</h4>    
     <div class="description">Description of Block</div> 
</div>


You can also inspect the block on the test page I created. (https://www.enablesoft.com/test) for a more detailed look at the HTML.
stewblack23 replied on at Permalink Reply
stewblack23
Not sure where to fine the config.json file. Is that in the packages > block_designer folder?
ramonleenders replied on at Permalink Reply
ramonleenders
Go to /application/blocks/THE_HANDLE_ENTERED_WITH_BLOCKDESIGNER

Now paste in the following into the config.json file:


{"view_css":"","view_js":"","block_name":"Case Study stewblack","block_description":"","block_type_set":0,"cache_block_output_lifetime":"","block_install":0,"ignore_page_theme_grid_framework_container":0,"cache_block_record":1,"cache_block_output":1,"cache_block_output_on_post":1,"cache_block_output_for_registered_users":1,"table_prefix":"","interface_width":"400","interface_height":"500","fields":{"1":{"type":"static","static_html":"<div class=\"casestudy"},"6":{"type":"select","label":"Color","slug":"color","required":"1","description":"","prefix":"","suffix":"","select_options":"red: Red\r\nyellow: Yellow\r\npurple: Purple\r\nlight-blue: Light blue","translate":"1","view_output":"1","default_value":"red"},"2":{"type":"static","static_html":"\">"},"3":{"type":"text_box","label":"Title","slug":"title","required":"1","description":"","prefix":"<h4 class=\"page-title\">","suffix":"<\/h4>","max_length":"","placeholder":"Title of Block","fallback_value":""},"4":{"type":"wysiwyg","label":"Description","slug":"description","required":"1","description":"Description of Block","prefix":"<div class=\"description\">","suffix":"<\/div> "},"5":{"type":"static","static_html":"<\/div>"}},"block_handle":"case_study_sb","packages":{"block_designer":{"version":"3.1.3"}}}


Go to this URL: /index.php/dashboard/blocks/block_designer/block_config

Click the Block Type that you changed the config.json file for. Now the config will be loaded. This should be, more or less, what you are asking for. See if you change the block handle and block name to your likings and eventually add more fields (I left out the icon for example).

Kind regards,

Ramon
stewblack23 replied on at Permalink Reply
stewblack23
I followed all your directions and updated the config.json file. I do see the updated configuration when I select my block named "new case study". But when I place the block on my test page and I choose a different color from the color picker, don't see any changes to the background color. When I inspect it with google developer tools not seeing any change to the class on the div container. What am I missing?
ramonleenders replied on at Permalink Reply
ramonleenders
Hi,

Ah my bad, uninstall the block type and load the configuration back in again. Go to the Select field and change the "Select choices (one per line) *" field (it's a text area) to this:

red :: Red
yellow :: Yellow
purple :: Purple
light-blue :: Light blue


Regenerate the Block Type (so delete if you get the red alert box at the top). Should be good and working now!

Kind regards,

Ramon
stewblack23 replied on at Permalink Reply
stewblack23
Ok. Thanks. This works great now. I just have to add the correct fields I need.
stewblack23 replied on at Permalink Reply
stewblack23
Also when I'm updating a blocks configuration. Do I always have to create a new block?
stewblack23 replied on at Permalink Reply
stewblack23
Nevermind, I figured it out. Thanks again for all your help.

concrete5 Environment Information

# concrete5 Version
Core Version - 8.2.1
Version Installed - 8.2.1
Database Version - 20170802000000

# concrete5 Packages
Accordion Content (1.2.4), Add and Remove Classes and IDs (0.9.5), Afixia: Login Redirect (0.9.2), Block Designer (3.1.0), Honest Websites Back To Top (0.9.4), Icons for Redactor (0.9.1), Image Optimizer (2.0), Login/Logout Link (1.0), Login Block Pro (1.0.1), Magic Tabs (7.0.1), Manual Nav (2.2.0), Minify HTML (1.1), Nestable Manual Nav (1.2.0), Responsive Embed (1.0.1), Smooth Link Scrolling (1.2.1), Stack Popover (1.2.7), SVG Social Media Icons (0.9.9), Video Lightbox (1.8.9), Vimeo Video (1.0.2), Whale OWL Carousel (2.5.7.6), Whale Sky Tabs (1.1.7), White Label (1.0.1)

# concrete5 Overrides
blocks/new_case_study/config.json, blocks/new_case_study/form.php, blocks/new_case_study/controller.php, blocks/new_case_study/icon.png, blocks/new_case_study/composer.php, blocks/new_case_study/view.php, blocks/new_case_study/add.php, blocks/new_case_study/db.xml, blocks/new_case_study/edit.php, blocks/new_case_study, blocks/update_case_study/config.json, blocks/update_case_study/form.php, blocks/update_case_study/controller.php, blocks/update_case_study/icon.png, blocks/update_case_study/composer.php, blocks/update_case_study/view.php, blocks/update_case_study/add.php, blocks/update_case_study/db.xml, blocks/update_case_study/edit.php, blocks/update_case_study, blocks/stack_popover/templates/enablesoft/view.php, blocks/stack_popover/templates/enablesoft, blocks/stack_popover/templates, blocks/stack_popover, blocks/whale_manual_nav/templates/enablesoft/view.php, blocks/whale_manual_nav/templates/enablesoft, blocks/whale_manual_nav/templates, blocks/whale_manual_nav, blocks/page_list/templates/fa_icons/view.php, blocks/page_list/templates/fa_icons, blocks/page_list/templates/enablesoft_blog_list/view.php, blocks/page_list/templates/enablesoft_blog_list, blocks/page_list/templates/blog_description/view.php, blocks/page_list/templates/blog_description, blocks/page_list/templates/button/view.php, blocks/page_list/templates/button, blocks/page_list/templates/videos/view.php, blocks/page_list/templates/videos, blocks/page_list/templates, blocks/page_list, blocks/video_lightbox/templates/enablesoft/view.php, blocks/video_lightbox/templates/enablesoft, blocks/video_lightbox/templates, blocks/video_lightbox, blocks/updated_case_study/config.json, blocks/updated_case_study/form.php, blocks/updated_case_study/controller.php, blocks/updated_case_study/icon.png, blocks/updated_case_study/composer.php, blocks/updated_case_study/view.php, blocks/updated_case_study/add.php, blocks/updated_case_study/db.xml, blocks/updated_case_study/edit.php, blocks/updated_case_study, blocks/case_study/config.json, blocks/case_study/form.php, blocks/case_study/controller.php, blocks/case_study/icon.png, blocks/case_study/composer.php, blocks/case_study/view.php, blocks/case_study/add.php, blocks/case_study/db.xml, blocks/case_study/edit.php, blocks/case_study, blocks/team_member/config.json, blocks/team_member/form.php, blocks/team_member/controller.php, blocks/team_member/icon.png, blocks/team_member/composer.php, blocks/team_member/view.php, blocks/team_member/add.php, blocks/team_member/db.xml, blocks/team_member/edit.php, blocks/team_member, blocks/feature/templates/enablesoft/view.php, blocks/feature/templates/enablesoft, blocks/feature/templates, blocks/feature, blocks/html/templates/lightbox/view.php, blocks/html/templates/lightbox, blocks/html/templates, blocks/html, blocks/case_study_ja/config.json, blocks/case_study_ja/form.php, blocks/case_study_ja/controller.php, blocks/case_study_ja/icon.png, blocks/case_study_ja/composer.php, blocks/case_study_ja/view.php, blocks/case_study_ja/add.php, blocks/case_study_ja/db.xml, blocks/case_study_ja/edit.php, blocks/case_study_ja, blocks/simple_button/form.php, blocks/simple_button/controller.php, blocks/simple_button/icon.png, blocks/simple_button/view.php, blocks/simple_button/add.php, blocks/simple_button/db.xml, blocks/simple_button/edit.php, blocks/simple_button, blocks/button_download/config.json, blocks/button_download/form.php, blocks/button_download/controller.php, blocks/button_download/icon.png, blocks/button_download/composer.php, blocks/button_download/view.php, blocks/button_download/add.php, blocks/button_download/db.xml, blocks/button_download/edit.php, blocks/button_download, themes/enablesoft/blog-post.php, themes/enablesoft/portal-subpages.php, themes/enablesoft/login.php, themes/enablesoft/customer-login-full.php, themes/enablesoft/company-interior-two-column.php, themes/enablesoft/interior-full-width.php, themes/enablesoft/products-two-column.php, themes/enablesoft/page_theme.php, themes/enablesoft/default.php, themes/enablesoft/resources-video-landing.php, themes/enablesoft/img/LogoFoxtrotbyEnablesoft.png, themes/enablesoft/img/desktop-HomeHeader.jpg, themes/enablesoft/img/logoFoxtrot.png, themes/enablesoft/img/headerFreeDemo.jpg, themes/enablesoft/img/header-customerportal.jpg, themes/enablesoft/img/mobile-HomeHeader.png, themes/enablesoft/img/christopher-gower-291240_2-min.png, themes/enablesoft/img/audi.jpg, themes/enablesoft/img/logoCapterra.png, themes/enablesoft/img/header-partnerportal.jpg, themes/enablesoft/img/headerHome.png, themes/enablesoft/img, themes/enablesoft/view.php, themes/enablesoft/products-foxtrot-full-width.php, themes/enablesoft/portal-landing-full-width.php, themes/enablesoft/elements/demo-hero-image.php, themes/enablesoft/elements/interior-tab-area.php, themes/enablesoft/elements/customer-login-hero.php, themes/enablesoft/elements/customer-hero-image.php, themes/enablesoft/elements/navigation.php, themes/enablesoft/elements/home-hero-image.php, themes/enablesoft/elements/login-navigation.php, themes/enablesoft/elements/portal-landing-hero.php, themes/enablesoft/elements/portal-login-hero.php, themes/enablesoft/elements/interior-hero-image.php, themes/enablesoft/elements/white-paper.php, themes/enablesoft/elements/blog-hero-image.php, themes/enablesoft/elements/footer.php, themes/enablesoft/elements/blog-entry-hero-image.php, themes/enablesoft/elements/script.php, themes/enablesoft/elements/resources-interior-hero-image.php, themes/enablesoft/elements/header.php, themes/enablesoft/elements/customer-link.php, themes/enablesoft/elements/accelerate-your-business.php, themes/enablesoft/elements/tab-area.php, themes/enablesoft/elements/script-no-tab.php, themes/enablesoft/elements/portal-hero-image.php, themes/enablesoft/elements/products-foxtrot-hero.php, themes/enablesoft/elements, themes/enablesoft/thumbnail.png, themes/enablesoft/resources-interior-two-column.php, themes/enablesoft/css/site.less, themes/enablesoft/css/bootstrap/panels.less, themes/enablesoft/css/bootstrap/print.less, themes/enablesoft/css/bootstrap/button-groups.less, themes/enablesoft/css/bootstrap/utilities.less, themes/enablesoft/css/bootstrap/input-groups.less, themes/enablesoft/css/bootstrap/progress-bars.less, themes/enablesoft/css/bootstrap/tables.less, themes/enablesoft/css/bootstrap/modals.less, themes/enablesoft/css/bootstrap/navbar.less, themes/enablesoft/css/bootstrap/alerts.less, themes/enablesoft/css/bootstrap/responsive-embed.less, themes/enablesoft/css/bootstrap/responsive-utilities.less, themes/enablesoft/css/bootstrap/badges.less, themes/enablesoft/css/bootstrap/popovers.less, themes/enablesoft/css/bootstrap/mixins.less, themes/enablesoft/css/bootstrap/wells.less, themes/enablesoft/css/bootstrap/navs.less, themes/enablesoft/css/bootstrap/code.less, themes/enablesoft/css/bootstrap/variables.less, themes/enablesoft/css/bootstrap/forms.less, themes/enablesoft/css/bootstrap/scaffolding.less, themes/enablesoft/css/bootstrap/list-group.less, themes/enablesoft/css/bootstrap/tooltip.less, themes/enablesoft/css/bootstrap/mixins/panels.less, themes/enablesoft/css/bootstrap/mixins/text-emphasis.less, themes/enablesoft/css/bootstrap/mixins/reset-text.less, themes/enablesoft/css/bootstrap/mixins/grid-framework.less, themes/enablesoft/css/bootstrap/mixins/border-radius.less, themes/enablesoft/css/bootstrap/mixins/opacity.less, themes/enablesoft/css/bootstrap/mixins/alerts.less, themes/enablesoft/css/bootstrap/mixins/clearfix.less, themes/enablesoft/css/bootstrap/mixins/gradients.less, themes/enablesoft/css/bootstrap/mixins/vendor-prefixes.less, themes/enablesoft/css/bootstrap/mixins/text-overflow.less, themes/enablesoft/css/bootstrap/mixins/center-block.less, themes/enablesoft/css/bootstrap/mixins/forms.less, themes/enablesoft/css/bootstrap/mixins/list-group.less, themes/enablesoft/css/bootstrap/mixins/labels.less, themes/enablesoft/css/bootstrap/mixins/reset-filter.less, themes/enablesoft/css/bootstrap/mixins/nav-divider.less, themes/enablesoft/css/bootstrap/mixins/responsive-visibility.less, themes/enablesoft/css/bootstrap/mixins/table-row.less, themes/enablesoft/css/bootstrap/mixins/grid.less, themes/enablesoft/css/bootstrap/mixins/progress-bar.less, themes/enablesoft/css/bootstrap/mixins/tab-focus.less, themes/enablesoft/css/bootstrap/mixins/buttons.less, themes/enablesoft/css/bootstrap/mixins/resize.less, themes/enablesoft/css/bootstrap/mixins/pagination.less, themes/enablesoft/css/bootstrap/mixins/image.less, themes/enablesoft/css/bootstrap/mixins/hide-text.less, themes/enablesoft/css/bootstrap/mixins/nav-vertical-align.less, themes/enablesoft/css/bootstrap/mixins/background-variant.less, themes/enablesoft/css/bootstrap/mixins/size.less, themes/enablesoft/css/bootstrap/mixins, themes/enablesoft/css/bootstrap/labels.less, themes/enablesoft/css/bootstrap/pager.less, themes/enablesoft/css/bootstrap/dropdowns.less, themes/enablesoft/css/bootstrap/bootstrap.less, themes/enablesoft/css/bootstrap/grid.less, themes/enablesoft/css/bootstrap/type.less, themes/enablesoft/css/bootstrap/jumbotron.less, themes/enablesoft/css/bootstrap/carousel.less, themes/enablesoft/css/bootstrap/buttons.less, themes/enablesoft/css/bootstrap/media.less, themes/enablesoft/css/bootstrap/close.less, themes/enablesoft/css/bootstrap/component-animations.less, themes/enablesoft/css/bootstrap/breadcrumbs.less, themes/enablesoft/css/bootstrap/pagination.less, themes/enablesoft/css/bootstrap/glyphicons.less, themes/enablesoft/css/bootstrap/theme.less, themes/enablesoft/css/bootstrap/normalize.less, themes/enablesoft/css/bootstrap/thumbnails.less, themes/enablesoft/css/bootstrap, themes/enablesoft/css/content.less, themes/enablesoft/css/structure.less, themes/enablesoft/css, themes/enablesoft/customer-subpages.php, themes/enablesoft/blog-landing.php, themes/enablesoft/js/jquery.js, themes/enablesoft/js/bootstrap.js, themes/enablesoft/js/nav-script.js, themes/enablesoft/js/bootstrap.min.js, themes/enablesoft/js/nav-script.min.js, themes/enablesoft/js, themes/enablesoft/interior-full-width-demo.php, themes/enablesoft/interior-two-column.php, themes/enablesoft/new-products-foxtrot-full-width.php, themes/enablesoft/interior-two-column-who-we-serve.php, themes/enablesoft/portal-login-full.php, themes/enablesoft

# concrete5 Cache Settings
Block Cache - On
Overrides Cache - On
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).

# Server Software
Apache

# Server API
cgi-fcgi

# PHP Version
5.6.36

# PHP Extensions
bcmath, calendar, cgi-fcgi, Core, ctype, curl, date, dom, ereg, fileinfo, filter, ftp, gd, hash, iconv, imap, json, libxml, mbstring, mcrypt, mhash, mysql, mysqli, mysqlnd, openssl, pcntl, pcre, PDO, pdo_mysql, pdo_sqlite, Phar, posix, readline, Reflection, session, SimpleXML, sockets, SPL, sqlite3, standard, suhosin, tokenizer, wddx, xml, xmlreader, xmlwriter, xsl, zip, zlib

# PHP Settings
max_execution_time - 300
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 300
max_input_vars - 1000
memory_limit - 512M
post_max_size - 500M
sql.safe_mode - Off
upload_max_filesize - 800M
mysql.max_links - Unlimited
mysql.max_persistent - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 7200
suhosin.cookie.max_array_depth - 50
suhosin.cookie.max_array_index_length - 64
suhosin.cookie.max_name_length - 64
suhosin.cookie.max_totalname_length - 256
suhosin.cookie.max_value_length - 10000
suhosin.cookie.max_vars - 100
suhosin.executor.include.max_traversal - 0
suhosin.executor.max_depth - 750
suhosin.get.max_array_depth - 50
suhosin.get.max_array_index_length - 64
suhosin.get.max_name_length - 64
suhosin.get.max_totalname_length - 256
suhosin.get.max_value_length - 512
suhosin.get.max_vars - 100
suhosin.log.phpscript.is_safe - Off
suhosin.memory_limit - 0
suhosin.post.max_array_depth - 50
suhosin.post.max_array_index_length - 64
suhosin.post.max_name_length - 64
suhosin.post.max_totalname_length - 256
suhosin.post.max_value_length - 1000000
suhosin.post.max_vars - 1000
suhosin.request.max_array_depth - 50
suhosin.request.max_array_index_length - 64
suhosin.request.max_totalname_length - 256
suhosin.request.max_value_length - 1000000
suhosin.request.max_varname_length - 64
suhosin.request.max_vars - 1000
suhosin.session.max_id_length - 128
suhosin.upload.max_newlines - 100
suhosin.upload.max_uploads - 25

Browser User-Agent String

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.