# Border
The Border field is a great way to set the border properties of any HTML object that supports the border property.
Table of Contents
# Arguments
Name | Type | Default | Description |
---|---|---|---|
type | string | border | Value identifying the field type. |
default | array | Array of default values. See 'Default Options' below. | |
select2 | array | Array of select2 arguments. Select2 Documentation (opens new window). | |
validate | string | color | String value color to validate the color selection. It is the only accepted value for this field. |
all | bool | true | Flag to enable all borders using one value. |
left | bool | true | Flag to enable the left field border input. |
right | bool | true | Flag to enable the right field border input. |
top | bool | true | Flag to enable the top field border input. |
bottom | bool | true | Flag to enable the bottom field border input. |
style | bool | true | Flag to enable the style selector. |
color | bool | true | Flag to enable the color picker. |
color_alpha | bool | false | Flag to set the color picker to accept an alpha value. |
Also See
# Default Options
Name | Type | Description |
---|---|---|
border-color | string | Hex string representing the default color. |
border-style | string | Sets the default CSS border. Accepts: solid dotted dashed or none . |
border-top | string | Sets the default value of the top border. |
border-right | string | Sets the default value of the right border. |
border-bottom | string | Sets the default value of the bottom border. |
border-left | string | Sets the default value of the left border. |
border-width | string | Sets the default value of the border's width. |
TIP
It is only necessary to set the border-width
default when the all
argument is set to true.
# Build Config
Build a Custom Configuration →
Changes you make to this form will be reflected in the generated code.
Redux::set_field( 'OPT_NAME', 'SECTION_ID', array(
'type' => 'border'
) );
# Example Config
Redux::set_field( 'OPT_NAME', 'SECTION_ID', array(
'id' => 'header-border',
'type' => 'border',
'title' => esc_html__('Header Border Option', 'your-project-name'),
'subtitle' => esc_html__('Only color validation can be done on this field type', 'your-project-name'),
'output' => array('.site-header'),
'desc' => esc_html__('This is the description field, again good for additional info.', 'your-project-name'),
'default' => array(
'border-color' => '#1e73be',
'border-style' => 'solid',
'border-top' => '3px',
'border-right' => '3px',
'border-bottom' => '3px',
'border-left' => '3px'
)
) );
# Example Usage
This example is based on the code above. Be sure to change $redux_demo
to the value you specified in your opt_name argument.
global $redux_demo;
echo 'Border top: ' . $redux_demo['header-border']['border-top'];
echo 'Border bottom: ' . $redux_demo['header-border']['border-bottom'];
echo 'Border left: ' . $redux_demo['header-border']['border-left'];
echo 'Border right: ' . $redux_demo['header-border']['border-right'];
echo 'Border style: ' . $redux_demo['header-border']['border-style'];
echo 'Border color: ' . $redux_demo['header-border']['border-color'];
← Background Box Shadow →