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
How can I do this with in the Block Designer Plugin.
Thanks
Type: | Discussion |
---|---|
Status: | Resolved |
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.
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.
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.
Not sure where to fine the config.json file. Is that in the packages > block_designer folder?
Go to /application/blocks/THE_HANDLE_ENTERED_WITH_BLOCKDESIGNER
Now paste in the following into the config.json file:
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
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
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?
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:
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
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
Ok. Thanks. This works great now. I just have to add the correct fields I need.
Also when I'm updating a blocks configuration. Do I always have to create a new block?
Nevermind, I figured it out. Thanks again for all your help.
Kind regards,
Ramon