# Overriding Redux CSS
We understand customization is important to any developer. That’s why we've provided a few useful hooks to enqueue or dequeue our default CSS files. Interested? Read on!
DANGER
Be sure to prefix all the function names below to avoid conflicts with another developer's code.
Table of Contents
# Appending CSS
Let's say you want to append some custom CSS to your panel. Here is how this is achieved.
$opt_name = 'OPT_NAME'; # TODO - Replace with your opt_name
function add_panel_css() {
wp_register_style(
'redux-custom-css',
'https://urltomyfile',
array( 'redux-admin-css' ), // Be sure to include redux-admin-css so it's appended after the core CSS is applied
time(),
'all'
);
wp_enqueue_style('redux-custom-css');
}
// This example assumes your opt_name is set to OPT_NAME, replace it with your opt_name value
add_action( 'redux/page/' . $opt_name . '/enqueue', 'add_panel_css' );
# Replacing CSS
If you believe you have a better overall design, it's easy to remove the Redux CSS file completely:
$opt_name = 'OPT_NAME'; # TODO - Replace with your opt_name
function remove_panel_css() {
wp_dequeue_style( 'redux-admin-css' );
}
add_action( 'redux/page/' . $opt_name . '/enqueue', 'remove_panel_css' );
# The Complete Solution
The above functions may also be rolled together into a single function by doing the following:
$opt_name = 'OPT_NAME'; # TODO - Replace with your opt_name
function add_and_override_panel_css() {
wp_dequeue_style( 'redux-admin-css' );
wp_register_style(
'redux-custom-css',
'http://urltomyfile',
array( 'farbtastic' ), // Notice redux-admin-css is removed and the WordPress standard farbtastic is included instead
time(),
'all'
);
wp_enqueue_style('redux-custom-css');
}
add_action( 'redux/page/' . $opt_name . '/enqueue', 'add_and_override_panel_css' );
The power of full CSS override is now in your hands!