PHPackages                             xypp/user-decoration - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. xypp/user-decoration

ActiveFlarum-extension[Utility & Helpers](/categories/utility)

xypp/user-decoration
====================

Add decoration for user avatar/name/card/post.

v1.2.1(1y ago)12.0k—0%1MITTypeScript

Since Jul 9Pushed 7mo ago1 watchersCompare

[ Source](https://github.com/zxy19/user-decoration)[ Packagist](https://packagist.org/packages/xypp/user-decoration)[ RSS](/packages/xypp-user-decoration/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependencies (3)Versions (22)Used By (0)

User Decoration
===============

[](#user-decoration)

[![Title Poster](https://camo.githubusercontent.com/4b9946b47eea6deea6138ee03493c59137c6f33b99281abeb7e8f948c6f7800b/68747470733a2f2f6963652e66726f7374736b792e636f6d2f323032342f30372f31312f31333333343234396338323036393565623930356463666565636335613332662e706e67)](https://camo.githubusercontent.com/4b9946b47eea6deea6138ee03493c59137c6f33b99281abeb7e8f948c6f7800b/68747470733a2f2f6963652e66726f7374736b792e636f6d2f323032342f30372f31312f31333333343234396338323036393565623930356463666565636335613332662e706e67)

[![License](https://camo.githubusercontent.com/7013272bd27ece47364536a221edb554cd69683b68a46fc0ee96881174c4214c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e737667)](https://camo.githubusercontent.com/7013272bd27ece47364536a221edb554cd69683b68a46fc0ee96881174c4214c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e737667)[![Latest Stable Version](https://camo.githubusercontent.com/18b373dfdd112e7dec2068e6cd7fe05ac4c0169abdb4050c95841e426e9aa966/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f787970702f757365722d6465636f726174696f6e2e737667)](https://packagist.org/packages/xypp/user-decoration)[![Total Downloads](https://camo.githubusercontent.com/99ff94b9a853fc3f07c5e5dd394634819f3a8b6f6e5cd901e477b07968fc2f6a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f787970702f757365722d6465636f726174696f6e2e737667)](https://packagist.org/packages/xypp/user-decoration)

A [Flarum](http://flarum.org) extension. Add decoration for user avatar/username/posts/usercard.

> Actually, this plugin is more likely to be called "User Based Style Injection Engine"

Notice
------

[](#notice)

This code uses some aggressive tricks to make interceptions of all avatars/usernames possible. This may cause problems with other parts of the plugin. If there is a problem, please disable username/avatar hijacking in the settings.

This extension is NOT COMPATIBLE with all extensions using highlight helper. Currently we supports flarum/core and flarum/mentions. If you found somewhere that username is displayed blank, please disable username/avatar hijacking in the settings and report us as incompatibility.

To experience full functionality, you may also need to install [xypp/store](https://github.com/zxy19/store)

Introduction
------------

[](#introduction)

This plugin provides a way to change the appearance of user components using CSS and other special markup.

Administrators can create decorations and then grant them to users. Users can see the decorations they have been granted and apply them on their personal home page. Decorations should be in effect anywhere on the forum.

If [xypp/store](https://github.com/zxy19/store) is installed, users can buy decorations from the store!

Usage
-----

[](#usage)

### Add Decoration

[](#add-decoration)

Log in with your administrator account, navigate to the user page and click the Decoration button to open the Decoration page. Just click the Add Decoration button in the upper right corner.

### Grant Decoration

[](#grant-decoration)

Navigate to the user page, click on the control button in the upper right corner, and click on "Offer Decoration".

### Create Item

[](#create-item)

Navigate to the Store page and click the `Add Item` button in the upper right corner.

After filling out the basic information, select the product provider as `Decoration`.

Once the product has loaded, select the Decoration you want to use as the product below.

If you want Decoration to have a time limit, you can just fill in `Time Limit`.

Please do not fill in the usage limit if you don't have to, this will not have an effect but will cause the user to deduct the number of times it is used from the purchased.

Special CSS Mark
----------------

[](#special-css-mark)

Use .base to select a dressed container element (i.e. a .decoration-container element). This element will have all the attributes of its original counterpart and wrap its content.

Use .element-aNameToBeFillThere\[....\] to create a new element. See below for a specific use case

```
/** Rules */
.element-[tag=""][parent=""][copy=""][after=""][content=""][ class=""]

.element-test
/** Create a span element with the content Hello, located under container */
.element-test1[tag="span"][content="hello"]{....}
/** Create a div element under .Post-body */
.element-test1[tag="div"][parent="Post-body"]{....}
/** Create a span element with the content Hello, located under the first child of the first element */
.element-test1[tag="div"][parent="* *"]{....}
/** Copy the first img element and place under the container */
.element-test1[tag="#"][content="img"]{....}
```

The `` and `` above support matching any element with `*`, or matching className or tagName with a string. Note that className and tagName do not need to be prefixed with `. ` or `#` , and they are case sensitive. Separate nested matches with a space.

Q&A
-------

[](#qa)

- Why does style selection not work with QuerySelector?

> Element matching does not run on the DOM, but on the VNode tree.

- Can't administrators delete their own decorations?

> Turn off the `View All` feature

- Decoration does not take effect

> Open the console to see if warnings or errors are output.

Installation
------------

[](#installation)

Install with composer:

```
composer require xypp/user-decoration:"*"
```

Updating
--------

[](#updating)

```
composer update xypp/user-decoration:"*"
php flarum migrate
php flarum cache:clear
```

Links
-----

[](#links)

- [Packagist](https://packagist.org/packages/xypp/user-decoration)
- [GitHub](https://github.com/zxy19/user-decoration)

###  Health Score

36

—

LowBetter than 82% of packages

Maintenance51

Moderate activity, may be stable

Popularity22

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity49

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 97% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~4 days

Recently: every ~11 days

Total

21

Last Release

588d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/ac2785bf6307ee44bd2fdeba70cf00f77f0fe9eb7e5b70e3fbe40a25f6ab61c4?d=identicon)[zxy19](/maintainers/zxy19)

---

Top Contributors

[![zxy19](https://avatars.githubusercontent.com/u/23428495?v=4)](https://github.com/zxy19 "zxy19 (32 commits)")[![10086mea](https://avatars.githubusercontent.com/u/96985096?v=4)](https://github.com/10086mea "10086mea (1 commits)")

---

Tags

flarum

### Embed Badge

![Health badge](/badges/xypp-user-decoration/health.svg)

```
[![Health](https://phpackages.com/badges/xypp-user-decoration/health.svg)](https://phpackages.com/packages/xypp-user-decoration)
```

###  Alternatives

[fof/byobu

Well integrated, advanced private discussions.

61105.8k9](/packages/fof-byobu)[fof/user-bio

Add a user bio to user profiles

2196.5k9](/packages/fof-user-bio)[fof/links

Manage Flarum primary navbar menu links

39118.3k2](/packages/fof-links)[fof/drafts

Allow users to create post and discussion drafts

1771.1k5](/packages/fof-drafts)[fof/nightmode

Add a Night Mode option for your users to use on your Flarum forum

3774.5k2](/packages/fof-nightmode)[fof/best-answer

Mark a post as the best answer in a discussion

26135.2k15](/packages/fof-best-answer)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)