How to Change CSS Colors from Custom Plugin Settings Page

I have a custom WordPress plugin with a variety of settings that I use across multiple websites. I also use a few of the same 3rd party plugins across all of those pages. I would like to be able to stylize them the same way, but with different colors. While I could add CSS to every site, it is difficult for some of our non-techy admins to go through the CSS and change the hex codes on the correct classes. I am trying to figure out the best way to do this. Here is what I’ve looked into so far:

• I understand that I could change classes with PHP, but I can’t change the classes on 3rd party plugins this way.
• Doing it with JS is annoying to watch the page load with default colors and the switch after a second.
• Tried turning a CSS file into a PHP file with a CSS type header, but it doesn’t seem to work unless I also update the htaccess file. I don’t want to do that for every site, and I see plugins changing other plugin colors all the time, so I know it’s possible without changing the htaccess file.
• I tried adding style via PHP inside and outside of a function, but I get errors if it’s outside of a function, and with it inside of a function nothing happens:

add_action( 'init', 'getCssOptionsUM' );
function getCssOptionsUM(){
   // ACCOUNT PAGE: Menu Background Color
   if (get_option('eri_um_account_menu_bg') != '') {
       echo '<style>.um-account-side li { background: '.get_option('eri_um_account_menu_bg').' !important; }</style>';
   }
   // ACCOUNT PAGE: Menu Background Hover Color & Text Hover Color
   if (get_option('eri_um_account_menuh_bg') != '') {
       echo '<style>.um-account-side li:hover > a, .um-account-side li:hover > a .um-account-icontip {background: '.get_option('eri_um_account_menuh_bg').' !important; }</style>';
   }
   if (get_option('eri_um_account_menuh_txt') != '') {
       echo '<style>.um-account-side li:hover > a, .um-account-side li:hover > a .um-account-icontip { color: '.get_option('eri_um_account_menuh_txt').' !important; }</style>';
   }
}

By the way, I am sure that the options page is saving the data.

Any suggestions?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Nevermind, the last option was actually working, but in my own CSS code I found that I was overriding it. I cleaned up my CSS and it’s working with the function I posted above. I also found an alternative method using wp_add_inline_style() which got me to look at my CSS code in more depth. Example code below:

function wpdocs_styles_method() {
    wp_enqueue_style(
        'custom-um-style',
        plugin_dir_path(__FILE__) . 'includes/plugins/ultimate-member/ultimate-member.css'
    );
        $color = get_option('eri_um_account_menu_bg'); //E.g. #FF0000
        $custom_css = "
                .um-account-side li {
                        background: {$color} !important;
                }";
        wp_add_inline_style( 'custom-um-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_styles_method' );

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0