Can I get the colors values and make my custom css rules from the tailor element

Are you wanting to get that color value on the server (i.e., PHP) side, or in the frontend using JavaScript?

The example you mention above concerns changing the default setting for an element (in this case button). All buttons added to the page following that change would use that new default value. It sounds like you are wanting to access the actual value of an instance of an element on the page, which is possible but a little different.

Tailor does allow for the generation of custom CSS rules dynamically based on the value of a given element setting. It sounds like this is what you’re after. I’ve added a couple of helpful filters that will be released in the next version:

$css_rule_sets = apply_filters( ‘tailor_element_css_rule_sets’, $css_rule_sets, $element );

css_rule_sets = apply_filters( ‘tailor_element_css_rule_sets_’ . $tag, $css_rule_sets, $element );

Using that filter you could then add additional custom CSS rules to whatever element you like, for example:

if ( ! empty( $atts[‘border_color’] ) ) {
$css_rules[] = array(
‘selectors’ => array( ‘.custom-selector’ ),
‘declarations’ => array(
border-color’ => esc_attr( $atts[‘border_color’] ),
),
);
}

(you can also define media queries using these rules, which I’ll write about soon).

If you’re creating a new element, just be sure to define your rules in the generate_css method of your element class.

thanks, this helped us a lot

Glad to hear it! Do let me know if you have any other questions ??