Tutorial - Color Customization with Custom CSS

The Color Customization settings from the recent release are fantastic, but currently it doesn't cover every single element in the UI (and hover colors). So here is a little tutorial for anyone who wants even more custom colors in FluentCommunity.

FluentSnippets

First of all, install FluentSnippets if you haven't. It’s completely free. You can get it from here or here.

Create a Snippet

After installation and activation, create a new PHP snippet. Give it a nice name, e.g. “Custom CSS for FluentCommunity”.

Copy and paste the following code:

add_action('fluent_community/portal_head', function() {
    ?>
    <style>
        /* Add your custom CSS here */
    </style>
    <?php
});

Where to run?

Choose “Frontend Only”.

Save and activate the snippet.

Add custom CSS

Any CSS code needs to be added between <style> and </style>. And here are the CSS codes for colors that are not covered by the settings:

(Replace #RRGGBB with your own hex code, rgba code, var(), etc.)

• Verified badge color:

/*Verified Badge color*/
span.fcom_verified svg {
    fill: #RRGGBB!important;
}

• Heart color:

/*Heart color*/
.el-icon.user_reacted svg {
    color: #RRGGBB!important;
}

• Bookmark icon active color:

/*Bookmark icon active color*/
.bookmark_icon_active {
    color: #RRGGBB!important;
}

• Comment count text hover color:

/*Comment count text hover color*/
.feed_reaction_meta .feed_comment_count:hover {
    color: #RRGGBB!important;
}

• "View more comments" text hover color:

/* View more comments text hover color*/
.show_all_comments:hover {
    color: #RRGGBB!important;
}

• Reply button text hover color:

/*Reply button text hover color*/
.each_comment .reply_btn:hover {
color: #RRGGBB!important;
}

• Timestamp hover color:

/*Timestamp hover color*/  
.feed_timestamp:hover {
    color: #RRGGBB!important;
}

• Kebab icon (three vertical dots) menu item hover color:

/*Kebab menu item hover color*/
.actions_items li:hover {
    color: #RRGGBB!important;
}

• Icon link item hover color:

/*Icon link item hover color*/
.fcom_inline_icon_link_item:hover {
    color: #RRGGBB!important;
}

This list may not cover all the elements, but should be enough for most cases.

Dealing with Light/Dark Mode

To make things look good in both Light and Dark mode, you might need to use different colors for each mode. In order to do this, we’ll have to use CSS variables. Here is an example of how to do it with the Heart color.

Let’s say I want the heart to be black (#000000) in Light mode and white (#FFFFFF) in Dark mode. Add the following code right after the <style> tag (before any other CSS code):

body {
    --custom-heart-color: #000000;
}
html.dark body {
    --custom-heart-color: #ffffff;
}

And the code for heart color would become:

/*Heart color*/
.el-icon.user_reacted svg {
    color: var(--custom-heart-color)!important;
}

If you need to define more variables, simply expand the list like this:

body {
    --custom-heart-color: #000000;
    --custom-badge-color: #333333;
    --my-whatever-color: code;
}
html.dark body {
    --custom-heart-color: #ffffff;
    --custom-badge-color: #cccccc;
    --my-whatever-color: code;
}

That’s it! Hope you find this tutorial useful. Have fun! Cheers!