Okay
  Public Ticket #3063682
Salient Child Theme Dynamic-styles.php and colors.php
Closed

Comments

  •  2
    Richard started the conversation

    Hi ThemeNectar,

    Is it possible to use the Theme colors settings like

    esc_attr($nectar_options["accent-color"]) from the colors.php in a custom stylesheet in the child theme?

    So is it possible to build simple php function/file that writes a custom .css file?

    I have a lot of css class elements based on categories or other elements that need to use the accent-color or extra color based on there category etc.

  •  997
    ThemeNectar replied

    Hey Richard,

    You could handle that by using a function from your child theme like:

    function child_custom_color_css() {
        global $nectar_options;
        
        $child_custom_css = '.rule {
          color: '.esc_attr($nectar_options["accent-color"]).'; 
        }';
        wp_add_inline_style( 'main-styles', $child_custom_css);
      }
      add_action('wp_enqueue_scripts','child_custom_color_css', 20);

    Kind regards,

  •  2
    Richard replied

    Thank you Theme Nectar it worked! 

    Below is what i created with some help of a development community.

    What it does? We have got 4 category's ($classes) with each a own main color like red, blue, yellow and green that are based on the salient admin color settings. I have some custom CSS that's the same for all the category's but because it uses the salient theme accent colors. With this piece of code if any of the colors are changed in the salient settings the colors of my custom CSS will change with it.


    function child_colors_css_with_taxonomy_class() {
        function generate_the_child_colors_css() {
            // Define thematic classes where the colors are matched
            $classes = [    
              'class1' => 'loopbaanadvies',
              'class2' => 'omscholen',
              'class3' => 'bijscholen',
              'class4' => 'baanverlies',
            ];
            global $nectar_options; // Gets the Theme options (colors) set in admin ($nectar_options is created by the theme i use)
            
            foreach ($classes as $class) { // Gets the class set in the $classes array
                // Sets the theme colors for each class
                if ($class == $classes['class1']) {   // Sets main theme color for class1
                    $color = esc_attr( $nectar_options['accent-color'] ); 
                }
                if ($class == $classes['class2']) {   // Sets extra theme color 1 for class2
                    $color = esc_attr( $nectar_options['extra-color-1'] ); 
                }
                if ($class == $classes['class3']) {   // Sets extra theme color 2 for class3
                    $color = esc_attr( $nectar_options['extra-color-2'] ); 
                }
                if ($class == $classes['class4']) {   // Sets extra theme color 3 for class4
                    $color = esc_attr( $nectar_options['extra-color-3'] ); 
                }
                // The custom css with the color and matched thematic classes
                $customcolorscss[] = '
                
                #thema-button.' . $class . ' {
                    background-color: '. $color .' !important;
                }
                
                .category-title .' . $class . ',
                .single-verhalen.' . $class . ' .subtitle, 
                .single-verhalen.' . $class . ' h3 {
                    color: '. $color .';
                }
                
                .verhalen.soort-verhaal-' . $class . ' .custom-fd-img-wrap img, 
                .verhalen.soort-verhaal-' . $class . ' .post-featured-img {
                    border-color: '. $color .';
                }
                
                #thema-button.' . $class . ',
                .single-verhalen.' . $class . ' .nectar-button[data-color-override="false"],
                .soort-verhaal-' . $class . ' .video-tag  {
                    background-color: '. $color .' !important;
                }
                
                ';
            };
            array_push($customcolorscss, '.page h3 { color: '.esc_attr($nectar_options["accent-color"]).' !important;}' );
            return implode($customcolorscss);
            
        }
        $child_color_css = generate_the_child_colors_css();
        
        wp_add_inline_style( 'main-styles', $child_color_css);
    }
    add_action('wp_enqueue_scripts','child_colors_css_with_taxonomy_class', 20);