Xenforo 2.1 Custom Postbit Styling - Put Custom Background

prvtzone

eleaks.to
Registered
Joined
Jul 29, 2019
Messages
122
Points
53

Reputation:

Hello, i was searching for this for so long but my research go well and i found this, and i want to share it with EnXF members. Because sharing is caring. EnXF helped me so much to learn XenForo to make my new forum which grown to 3k members and getting huge traffic organically. Thanks for ENXF Admins who provided so many resources for free for us.

Lets stop talking and start doing

Here are some screenshots of my forum postbit.
Untitled.png


As you can see i have added green background behind my avatar. And Any user can add custom image in the background of Post bit .

Tutorial

Follow these steps
1. Make a custom user field. Go to Xenforo Admin Panel > Users > Custom Userfields

2. Title Postbit Cover or Anything you want

3. Field ID can be anything i suggest no space on it

4. Description : JPG, PNG, GIF (Link of the Image)

5. Display Location : Personal Details

6. Field Type: Single Line text Box

7. General Option: User editable, Moderator Editable

8. go to templates >> search message_macros >> paste this after xf:macro

Code:
<div class="postbit_background" style="background-image: url({$user.Profile.custom_fields.YourFieldID});"></div>

Replace YourFieldID to to field id that you have made earlier in the Step 1

9. and add this at extra.css

Code:
.postbit_background {

position:absolute;

height:120px;

width:170px;

opacity:.40;

}


I dont know if this tutorial is already on this forum, but this tutorial i have tried to do it more easy to understand for users. And new content is always worth because we dont know which thread can get ranked and increase visitors to this site organically .

Edit: https://enxf.net/threads/postbit-background-custom-fields.2227/ Credits @Verss
 
Last edited:

DareSec

Inforc3r
Staff member
Administrator
Moderator
S.V.I.P Member
Collaborate
Registered
Joined
May 25, 2019
Messages
1,372
Points
523

Reputation:

IMG_20200413_212320.jpg


And fix your css in mobile version
 

prvtzone

eleaks.to
Registered
Joined
Jul 29, 2019
Messages
122
Points
53

Reputation:

I didnt see that u posted it before. i will Edit and give credits to you.
 

prvtzone

eleaks.to
Registered
Joined
Jul 29, 2019
Messages
122
Points
53

Reputation:

Okay boss.

can you help me out? Its not mobile friendly . Where do i edit css for mobile friends layout? any tips boss?
IMG_20200413_212320.jpg
 

MEGAHERZ

Collaborate
Collaborate
Registered
Joined
Mar 16, 2019
Messages
50
Points
38

Reputation:

Deleted

i7ds

Member
Registered
Joined
Sep 15, 2021
Messages
9
Points
13

Reputation:

Hello,

Its working perfect. But there's one thing, when somebody isn't using any image link, the forum generates a default image to replace the space.

unknown.png


Q4N0LCY.png


However, when somebody uses a background, it works fine.

dajCtJH.gif


Can somebody tell me how to remove that default image being generated by xenforo?

Edit: found a solution .. add this after your postbit background class

Code:
.postbit_background[style="background-image: url();"] {
    background-image: none !important;
}
 
Top