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
• Default Options
• Build Config
• Example Config
• Example Usage

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

• Global Field Arguments
• Using the compiler Argument
• Using the output Argument
• Using the output_variables Argument
• Using the permissions Argument
• Using the required Argument

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.

ID

Type

Title

Desc

Subtitle

Class

Compiler

Output

Output Variables

Permissions

Required

Field visibility requirements.

Default

Validate

Select2

All

Left

Right

Top

Bottom

Style

Color

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 in 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'];