Xenforo 2.1 Custom Postbit Styling - Put Custom Background

[prvtzone]

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.

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

<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

.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

 

[DareSec]

Repost
https://enxf.net/threads/postbit-background-custom-fields.2227/

 

[DareSec]

And fix your css in mobile version

 

[prvtzone]

any tip how to do that?

 

[Verss]

what this is my tutorial??

 

[Verss]

u can just comment it out at my thread jfc

 

[prvtzone]

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

 

[Verss]

its alright lol next time please see carefully

 

[prvtzone]

Okay boss.

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

 

[Verss]

inspect the css, and see it out what it cause that makes look like that

 

[prvtzone]

@Verss Sorted it by adding width in % instead of px

 

[Verss]

@prvtzone goood

 

[eness]

Oh its nice man! thanks

 

[MEGAHERZ]

horrible for CSS, at least add responsive to it so it doesn't fuck up on mobile lol.

killer666U should make new tutorial + responsive man

 

[Jace]

horrible for CSS, at least add responsive to it so it doesn't fuck up on mobile lol.

killer666U should make new tutorial + responsive man

 

[i7ds]

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.

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

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

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