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.1k↓25%1MITTypeScript

Since Jul 9Pushed 8mo 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 today

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

35

—

LowBetter than 77% of packages

Maintenance48

Moderate activity, may be stable

Popularity22

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity50

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

634d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/23428495?v=4)[zxy19](/maintainers/zxy19)[@zxy19](https://github.com/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

[flarum-lang/russian

Russian language pack for Flarum.

12128.3k](/packages/flarum-lang-russian)[fof/byobu

Well integrated, advanced private discussions.

59120.6k13](/packages/fof-byobu)[fof/discussion-language

Specify the language a discussion is written in & sort by language

1034.8k4](/packages/fof-discussion-language)[flarum-lang/french

French language pack to localize the Flarum forum software plus its official and third-party extensions.

1938.7k](/packages/flarum-lang-french)[fof/gamification

Upvotes and downvotes for your Flarum community

4066.1k8](/packages/fof-gamification)[fof/best-answer

Mark a post as the best answer in a discussion

25154.0k20](/packages/fof-best-answer)

PHPackages © 2026

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