Different accent colors and colors for each category

I am trying to change this through the CSS code but nothing seems to be working. Any help would be appreciated.

1. It is possible with custom CSS, but in plugin settings there is no such ability.

2. First of all, you can add custom CSS classes to any team or team member shortcode.
https://amothemo.com/docs/amo-team-showcase-documentation/en/#sc-amoteam

3. The accent color CSS as well as all plugin Options’ CSS is a dynamic CSS by definition. So it is added to the page code at the end of it using <style> HTML element.
You can find it right after this comment (in page HTML code) – /* AMO TEAM DYNAMIC CSS */

4. It is plain CSS code and can be easily overridden, if you know how to override CSS code added to the page in style element (so almost the same specificity/hierarchy as inline CSS).
If you are still having troubles try to also add your CSS in <style> in tag, using wp_footer action (after plugin’s CSS code).

I am a bit confused with your response. I need to change the icon color and the label area – both yellow areas to the color red on this page:https://www.prophix.com/customer-events/ please let me know what I need to do in order to make this change. I am using this AMO team on several different pages and the icons and labels need to be a different color on each one which is why I can’t use the plugin’s options.

For example in my CSS I added for the following code but it did not work:

ul#16086.amoteam-member-hover-icon{
background:red;
}

Hi again,

Well, first of all your CSS is wrong there is no <ul> element on the page with id=”16086″ and of course it doesn’t have “amoteam-member-hover-icon” CSS class, because this class applied to <div> tag. I don’t teach people CSS here. I support the plugin. But I can give you a few tips.

1. Read documentation and add a class to your shortcode.
For example – [amo_member id="17" item-width="250" align="left" item-margin="20" full-width="yes" panel="right" class="my-red-team"]
I’ve added – my-red-team CSS class to my shortcode here.

2. Next the code for the class and hover icon would look like this:

.amoteam-sc-team.test-class .amoteam-member-hover-icon {
    background: red !important;
}

This way it will work.

• This reply was modified 7 years, 5 months ago by Oleg Goltsev.

Thank you for your response, the solution you provided worked ?? Much appreciated.