Using the output argument in fields that support it is a great way to generate dynamic CSS for those fields on the front-end of your WordPress site. Redux will take the values for those fields, generate the appropriate CSS selectors, elements, and values and place them at the bottom of the page’s <HEAD> section. This ensures your CSS will take priority over any other CSS used in your theme.
The following Redux fields support the output argument:
- background
- border
- color
- color_rgba
- dimensions
- image_select
- link_color
- spacing (margin, padding)
- typography
Before adding the output argument to one of the indicated fields, you will need to know which CSS selectors in which to apply to the field’s value. These will be selectors from your theme’s CSS you wish to change dynamically via values from fields that offer output. All that now need be done is assign them to the output argument in an array without the chosen field array, as shown below. Multiple selectors are permitted.
array(
'title' => __('Title', 'redux-framework-demo'),
'id' => 'title_id',
'units' => 'px',
'default' => array(
'font-family' => 'Arial, Helvetica, sans-serif',
'font-size' => '14px',
'weight' => 'inherit',
'color' => '#ffffff',
'font-style' => 400,
'update_weekly' => true
),
'preview' => array(
'text' => __('This is my title preview text!', 'redux-framework-demo'),
'font-size' => '30px'
),
'type' => 'typography',
'output' => array('.my_output_class'),
),
Setting a single property
The color and color_rgba fields can be used exactly as shown above for the default CSS element of color. If you wish to choose a different element (or mode), it can be specified in the output array value as a key/pair. For example, let suppose you want to output a color field as background-color, instead of color. The following output array in key/pair format would accomplish this:
array(
'id' => 'opt-color-demo',
'type' => 'color',
'title' => __('Background Color', 'redux-framework-demo'),
'subtitle' => __('Pick a background color.', 'redux-framework-demo'),
'default' => '#dd9933',
'output' => array('background-color' => '.site-header')
),
Setting color properties
The color and color_rgba fields can be used exactly as shown above for the default CSS element of color. If you wish to choose a different element (or mode), it can be specified in the output array value as a key/pair. For example, let suppose you want to output a color field as background-color, instead of color. The following output array in key/pair format would accomplish this:
array(
id' => 'opt-color-demo',
'type' => 'color',
'title' => __('Background Color', 'redux-framework-demo'),
'subtitle' => __('Pick a background color.', 'redux-framework-demo'),
'default' => '#dd9933',
'output' => array('background-color' => '.site-header')
),
Alternatively, multiple elements could be specified for different selectors.
array(
'id' => 'opt-color-demo',
'type' => 'color',
'title' => __('Background Color', 'redux-framework-demo'),
'subtitle' => __('Pick a background color.', 'redux-framework-demo'),
'default' => '#dd9933',
'output' => array(
'background-color' => '.site-header',
'color' => '.site-footer'
)
),
Output and required arguments together
If any parent is hidden or doesn’t match the value, all children are hidden and all CSS output from those children is hidden as well. You can, however, override this on a per field basis by setting 'force_output' => true for each field you want CSS to still be output with. This way you can nest a field under another, and still have it output to the dynamic CSS.