Support only during business hours : Monday to friday, from 8:30 am – 5:30 pm CEST

Due to the decrease in our staff due to vacations, our response time may be longer.

Be sure we're doing our best to manage your topic as soon as possible.

Changing Icons Background Colour to fi theme

Find Answers and Get Support Forums Cera – Intranet & Community Theme Theme Customizer Changing Icons Background Colour to fi theme

This topic is resolved
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • jotasang
    Participant
    • 7 Topics
    • 27 Posts
    @juanmartinsanguinetti

    Hi Team,

    We have been unable to change the following colours from icons in certain blocks that have them. These are not matching any of the theme customization colours nor there is an option we have been able to see to change this.

    From where can we change these background colour?

    Please see image attached.

    Kind regards,

    Jota.

    Manathan
    Keymaster
    Themosaurus Support
    • 0 Topics
    • 6690 Posts
    @themodactyl

    Hi There,

    You can change the menu colors by first adding one of the 4 following CSS classes to your menu items:
    primary
    info
    success
    danger

    More in this article: https://doc.themosaurus.com/how-to-edit-colors-and-icon-in-a-menu/

    We hope this helps!

    Cheers,

    jotasang
    Participant
    • 7 Topics
    • 27 Posts
    @juanmartinsanguinetti

    Hi Manathan, thank you for your prompt reply. I read the documentation before opening th ticket. Please note the following:

    1) Documentation says: “Each CSS class will have a specific color. You can change their attributed colors in the Customizer by visiting Appearance > Customize > Community.” Please note there is no pathway as such. Screenshot attached where there is no “Community”.

    2) I enabled the CSS classes for the menus, and I actually gave the 3 icons/elemtns in the menu different CSS classes. Note that there is no change whatsoever despite the 3 having different classes. Screenshots attached. Also, please note how the block editor displays them, which is in a different way too.

    How can I proceed? Im trying to find where to edit the colours of those 4 CSS classes but th epath in documentation is not clear to me, see screenshot below where I cant find it.

    Manathan
    Keymaster
    Themosaurus Support
    • 0 Topics
    • 6690 Posts
    @themodactyl

    Hi Jota,

    Thank you for bringing this to our attention. As we have acces to your website, we will investigate further to find from where this issue is coming from.

    We will be back to you ASAP.

    Thank you for your patience.

    Regards,

    Manathan
    Keymaster
    Themosaurus Support
    • 0 Topics
    • 6690 Posts
    @themodactyl

    Thank you for your patience. I deactivated your cache plugin and it seems all is working fine.

    However, the way to edit these colour has changed so I updated the article. thank for your feedback! You can change their attributed colors in the Customizer by visiting Appearance > Customize > BuddyPress > Members Directory > Style.

    Best,

    Manathan
    Keymaster
    Themosaurus Support
    • 0 Topics
    • 6690 Posts
    @themodactyl
    This reply has been marked as private.
    jotasang
    Participant
    • 7 Topics
    • 27 Posts
    @juanmartinsanguinetti

    Hi Manathan!!

    Thank you so much! we would have never find it without you. Perfect, and worked.

    However, I noticed that this class or changing colours would also change the colours of other BudyPress functionality. Like, a Green “Success” icon/class makes sense, I wouldn’t like to change it.

    Is there a way to use another CSS class or CSS config to put any colour where we want? Or we are limited to use any of those 4 options? SOunds like there could be a CSS option but I don’t know exactly how CSS works and at what level. If not, we would use the miscelaneus or something like that. Thank you

    jotasang
    Participant
    • 7 Topics
    • 27 Posts
    @juanmartinsanguinetti

    Update:

    Could you help us define which shortcode/string acts on each of these colours for the CSS classes? I tried to map it with the documentation provided. Screnshot attached.

    I don’t know if we should change a colour because it might change in a lot of other places.

    Love Buttons Color -> primary
    Message Buttons Color -> info
    Success Buttons Color -> success
    Delete Buttons Color -> danger
    Miscellaneous Buttons Color -> (default)

    Manathan
    Keymaster
    Themosaurus Support
    • 0 Topics
    • 6690 Posts
    @themodactyl

    Hi Jota,

    It’s correct for the colors and their CSS class! 🙂

    To add your custom color, you can use this code snippet to your website:

    /**
    * Add Custom Colors in the Features Menu
    */
    .grimlock-nav-menu-section .menu > .menu-item.my-custom-css-class i, .grimlock-nav-menu-section .menu > .menu-item.my-custom-css-class svg{
       background-color: #000000;
    }
    

    In this snippet, I used a CSS class named my-custom-css-class. You have to write it in the menu, instead of success for example. Keep in mind that if you decide to change the class name, make sure to update both instances of this class in the snippet for it to function correctly.

    To add this code snippet to your site, we recommend that you paste it to the Custom CSS panel of your WordPress Customizer. Just go to your dashboard and navigate to “Appearance > Customize > Additional CSS”.
    Pasting your code snippet there should do the trick for you.

    Also, it’s important to remember that we share snippet only to solve issues with our theme. Any further request for CSS snippets will have to be part of a defect that needs to be fixed urgently. No snippets will be shared otherwise.

    If you want to go further with the customization of your website, we advise that you require customization work.

    Regards,

    jotasang
    Participant
    • 7 Topics
    • 27 Posts
    @juanmartinsanguinetti

    Thank you so much Manathan!! It workeddddddd! With this I can make more colours as well. I didn’t know about this. Once again, THANK YOU so much for your clear and helpful responses! It means a lot to me.

    Roboraptor
    Keymaster
    Themosaurus Support
    • 0 Topics
    • 412 Posts
    @roboraptor

    Hi there,

    Thanks for getting in touch!

    We provide support only during Belgian business hours (Monday to Friday, from 8:30 am – 5:30 pm CEST), and our current response time can be up to 1 business day. We’ve received your request and we’ll get you an answer ASAP.

    We really thank you for your patience!

    In the meantime, feel free to check out our documentation resources for more help: https://doc.themosaurus.com/

    Kind regards,

    Manathan
    Keymaster
    Themosaurus Support
    • 0 Topics
    • 6690 Posts
    @themodactyl

    I’m glad Jota! 😁

    Best,

Roboraptor 🦖
Themosaurus Topic Closer

Hi there,

This topic has been inactive for a while now so we will be closing it to keep the forum tidy. Don't hesitate to create a new topic if you still need help and we'll be glad to help you!

Best regards,
The Themosaurus team.

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Changing Icons Background Colour to fi theme’ is closed to new replies.

Troubleshooting Demo Imports

You're trying to setup your theme but you're experiencing errors when importing the demo content? Or you've just followed the setup guide but your website doesn't look exactly like our demo? These are common issues for which you can find easy and quick fixes.

Happy With our Support So Far?

Feel free to review our theme on Themeforest! It helps us making our products more known to new potential customers, which allow us more time to improve the quality and develop new features. #SharingIsCaring ❤️

Discover MatchPress

Skip • Like • Super-Like

Add powerful matching features like Member likes, skips, super likes, conditional private messaging and much more.

Setup Your Cera or Gwangi powered Community Website and Turn it into an iOS and Android App

15% discount for Cera users

To unleash the full power of your Cera or Gwangi theme, we have partnered with the Zipline team. Your community website can now be fully setup and turned into your very own custom app for iOS and Android.

Whether you've newly acquired the theme or already got your site up and running, Zipline got you covered. And we got you an incredible discount.

Holiday, Weather & Festive effects
to pimp your WordPress Site