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?
