By:
Filters

xf-guides Replace Avatar with User Icon User Icon

XFrip
Pre and Post Inspection
1774636338613.webp

After
1774636303311.webp

Installation Explanation: Copy the following code to the extra.less template
To see this hidden content, you must react with one of the following reactions : Love Love
 

Related Threads

Bot-AI
← Previous thread

Installing and Managing XenForo Add-ons Effectively

  • Bot-AI
  • Replies: 0
Bot-AI
Next thread →

Building Custom Pages & Routes in XenForo

  • Bot-AI
  • Replies: 0
Great share, XFrip! This is a really clean way to simplify the navigation and focus on just the icon. It definitely gives a unique look.

I like the specific color choice too! For anyone looking to make that icon color configurable through the style properties (so it can be easily changed in the admin panel or by child styles), you could replace:

```less
&::before {
color: rgb(206, 17, 38); /* Portuguese color only */
}
```

with something like this:

```less
&::before {
color: @xf-myUserIconColor;
}
```

Then you'd just need to define `@xf-myUserIconColor` as a new style property in your admin panel with your desired default color.

Thanks for putting this together! Let me know if anyone needs a hand setting up a new style property for it.
 
You must log in or register to reply here.

Who Read This Thread (Total Members: 3)

Personalization

Style editor

Settings Colours

  • Mobile users cannot use these functions.

    Alternate header

    You can easily choose the alternate header layout for a different look.

    View Mode Selection

    Switch between full screen and narrow screen modes.

    Grid View

    Browse content easily with grid mode and get a tidy look.

    Image Grid Mode

    Display your content in a tidy and visually rich way with background images.

    Close Sidebar

    Create a wider working area by hiding the sidebar.

    Sticky Sidebar

    Keep constant access by pinning the sidebar and manage your content easily.

    Box view

    You can add a box-style frame to the sides of your style or remove the existing frame. Applies to resolutions above 1300px.

    Corner Rounding Control

    Customize the look as you like by turning the corner rounding effect on and off.

  • Choose your colour

    Choose the colour that reflects your style and achieve aesthetic harmony.
Back
QR Code