Development
Topics surrounding development
Snippet cb_colours
This snippet will return to content blocks the options for all valid colours used upon the site.
This was made as colours are used a lot - meaning that we update the snippet with any changes, and it will filter down to any/all content block fields/layouts/settings without the need to revisit everyone.
Use this field in options are of the select type. Ensure you select the process tags options.
[[cb_colours]]
Layout base settings
Copy the below code and paste into the relevant row of modx_contentblocks_layout settings field.
Be sure to still add in the columns, and their references to Bootstrap Columns.
[{"reference":"bs_one","title":"Bootstrap Column 1","fieldtype":"textfield","default_value":"","image_source":"","image_directory":"","image_file_types":"","image_thumbnail_size":"","fieldoptions":"","field_is_exposed":"modal"},{"reference":"data_id","title":"Data-UID Attribute","fieldtype":"textfield","default_value":"","image_source":"","image_directory":"","image_file_types":"","image_thumbnail_size":"","fieldoptions":"","field_is_exposed":"modal"},{"reference":"full_width","title":"Show full width?","fieldtype":"select","default_value":"0","image_source":"","image_directory":"","image_file_types":"","image_thumbnail_size":"","fieldoptions":"0==No\n1==Yes","field_is_exposed":"modal"},{"reference":"show_gutter","title":"Show Gutters?","fieldtype":"select","default_value":"1","image_source":"","image_directory":"","image_file_types":"","image_thumbnail_size":"","fieldoptions":"0==No\n1==Yes","field_is_exposed":"modal"},{"reference":"vertical_align","title":"Vertical Align?","fieldtype":"select","default_value":"1","image_source":"","image_directory":"","image_file_types":"","image_thumbnail_size":"","fieldoptions":"0==No\n1==Yes","field_is_exposed":"modal"},{"reference":"bg_color","title":"Background Colour","fieldtype":"select","default_value":"white_bg","image_source":"","image_directory":"","image_file_types":"","image_thumbnail_size":"","fieldoptions":"white_bg==White\nblue_dk_bg==Dark Blue\nblue_lt_bg==Light Blue\ngreen_bg==Green\norange_bg==Orange\nred_bg==Red\nyellow_bg==Yellow\ngrey_lt_bg==Light Grey\ngrey_md_bg==Med Grey\ngrey_dk_bg==Dark Grey\ngrey_xdk_bg==Extra Dark Grey","field_is_exposed":"modal"},{"reference":"p_top","title":"Padding Top","fieldtype":"select","default_value":"pt45","image_source":"","image_directory":"","image_file_types":"","image_thumbnail_size":"","fieldoptions":"pt0==0px \npt15==15px \npt30==30px \npt45==45px\npt60==60px\npt75==75px \npt90==90px \npt105==105px\npt120==120px","field_is_exposed":"modal"},{"reference":"p_bottom","title":"Padding Bottom","fieldtype":"select","default_value":"pb45","image_source":"","image_directory":"","image_file_types":"","image_thumbnail_size":"","fieldoptions":"pb0==0px \npb15==15px \npb30==30px \npb45==45px\npb60==60px\npb75==75px \npb90==90px \npb105==105px\npb120==120px","field_is_exposed":"modal"},{"reference":"m_top","title":"Margin Top","fieldtype":"select","default_value":"mt0","image_source":"","image_directory":"","image_file_types":"","image_thumbnail_size":"","fieldoptions":"mt0==0px \nmt15==15px \nmt30==30px \nmt45==45px\nmt60==60px\nmt75==75px \nmt90==90px \nmt105==105px\nmt120==120px","field_is_exposed":"modal"},{"reference":"m_bottom","title":"Margin Bottom","fieldtype":"select","default_value":"mb60","image_source":"","image_directory":"","image_file_types":"","image_thumbnail_size":"","fieldoptions":"mb0==0px \nmb15==15px \nmb30==30px \nmb45==45px\nmb60==60px\nmb75==75px \nmb90==90px \nmb105==105px\nmb120==120px","field_is_exposed":"modal"},{"reference":"neg_margin","title":"Negative Margin","fieldtype":"select","default_value":"","image_source":"","image_directory":"","image_file_types":"","image_thumbnail_size":"","fieldoptions":"==0px \nnm15==15px \nnm30==30px \nnm45==45px\nnm60==60px\nnm75==75px \nnm90==90px ","field_is_exposed":"modal"}]CB Settings
SVG
blue_dk_svg==Dark Blue
blue_lt_svg==Light Blue
green_svg==Green
orange_svg==Orange
grey_lt_svg==Light Grey
grey_md_svg ==Med Grey
grey_dk_svg==Dark Grey
grey_xdk_svg==Extra Dark Grey
Margins
Margin top
mt0==0px
mt15==15px
mt30==30px
mt45==45px
mt60==60px
mt75==75px
mt90==90px
mt105==105px
mt120==120px
Margin bottom
mb0==0px
mb15==15px
mb30==30px
mb45==45px
mb60==60px
mb75==75px
mb90==90px
mb105==105px
mb120==120px
Padding top
pt0==0px
pt15==15px
pt30==30px
pt45==45px
pt60==60px
pt75==75px
pt90==90px
pt105==105px
pt120==120px
Padding bottom
pb0==0px
pb15==15px
pb30==30px
pb45==45px
pb60==60px
pb75==75px
pb90==90px
pb105==105px
pb120==120px
Background colour
trans_bg==Inherit
white_bg==White
blue_dk_bg==Dark Blue
blue_lt_bg==Light Blue
green_bg==Green
orange_bg==Orange
red_bg==Red
yellow_bg==Yellow
grey_lt_bg==Light Grey
grey_md_bg==Med Grey
grey_dk_bg==Dark Grey
grey_xdk_bg==Extra Dark Grey
Negative margin
==0px
nm15==15px
nm30==30px
nm45==45px
nm60==60px
nm75==75px
nm90==90px
Text colours
blue_dk==Blue Dark
blue_lt==Blue Light
green==Green
text-grey_lt grey_lt==Grey Light
text-grey_md ==Grey Medium
text-grey_dk grey_dk==Grey Dark
text-grey_xdk grey_xdk==Grey Extra Dark
orange text-orange==Orange
red text-red==Red
yellow text-yellow==Yellow
text-white==White
Copy paste snippets
| Setting | Description | Default |
| Bootstrap Column 1 | Adjust the size of the column using bootstrap classes | col-lg-4 |
| Bootstrap Column 2 | Adjust the size of the column using bootstrap classes | col-lg-4 |
| Bootstrap Column 3 | Adjust the size of the column using bootstrap classes | col-lg-4 |
| Data-UID | A unique ID of the container for skip to links | |
| Show full width? | Element stretches full width of the page | No |
| Show Gutters? | Show Bootstrap gutters | Yes |
| Vertical Align? | Vertically align the columns | No |
| Text colour | Font colour | White |
| Background Colour | Section background colour | Transparent |
| Block background | Background colour if each individual block | None |
| Padding top | Section padding-top - Use if you have background colour set | |
| Padding bottom | Section padding-bottom - Use if you have background colour set | |
| Margin top | Add margin to the top of the container for vertical alignment adjust | |
| Margin bottom | Add margin to the bottom of the container for vertical alignment adjust | 60px |
| Section classes | Add additional classes to the section | |
| Additional container classes | Add additional classes to the container | |
| Justify content | Justify the columns horizontally on the page |
Data-UID: A unique ID of the container for skip to links