User Avatar with Light Effect on Homepage (Pure CSS)

stasar

Before

After

Installation

Step 1. Navigate to Admin Profile / Administration
Step 2. Then click on Appearance / Custom Styles / Click on "Edit Custom CSS"
Step 3. Paste the following CSS code into "Custom CSS". Everything is ready!

/* Avatar Effect*/
.DiscussionListItem-author .Avatar {
    filter: drop-shadow(1px 1px 4px var(--primary-color));
}

You Might Like This One Too

Soft and Beautiful Forum Design (Simple)
https://discuss.flarum.org/d/33585-soft-and-beautiful-forum-design-simple

HOANGVANHIEP

Is there a way to make the username glow as well

stasar

HOANGVANHIEP Yes. You can do it by adding the code to the "Custom CSS" section in the same way.

.DiscussionListItem-info .username {
    filter: drop-shadow(1px 1px 4px var(--primary-color));
}

HOANGVANHIEP

stasar thank you so much ♥️