Resource icon

XF 2 Tip Postbit Background Custom Fields

Verss

Custom Developer
Collaborate
Registered
Joined
Apr 21, 2019
Messages
133
Points
53

Reputation:

Verss submitted a new resource:

Postbit Background Custom Fields - template modification

1. Make a custom user field

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...
Read more about this resource...
 

DareDevil

i am Watching You !
Moderator
S.V.I.P Member
Collaborate
Registered
Joined
May 25, 2019
Messages
802
Points
253

Reputation:

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

Whrere to paste this code which line?
There are many xf:Macro
 

Verss

Custom Developer
Collaborate
Registered
Joined
Apr 21, 2019
Messages
133
Points
53

Reputation:

1572907255612.png

this is the screenshot
of course i edited the css , you guys can customize the css
 
View previous replies…

Pr0fesseur

VIP Member
V.I.P Member
Registered
Joined
Nov 20, 2019
Messages
65
Points
18

Reputation:

can you show how you got the background to fade down.. i tried this method but my picture is outside of the postbit area
 

SacreDWolF

VIP Member
V.I.P Member
Registered
Joined
May 18, 2019
Messages
12
Points
13

Reputation:

hey man im trying to set this on my forum but is not working right for me this is some pic of the problem that im having( I tried to put everything in one pick just the essential)
thanks
ss.png
 

Verss

Custom Developer
Collaborate
Registered
Joined
Apr 21, 2019
Messages
133
Points
53

Reputation:

follow the instructions carefully, place the code after the xf:macro on the top change YourFieldID to your custom field that you made before
 
View previous replies…

vo6tu7

Member
Registered
Joined
Jul 4, 2019
Messages
12
Points
3

Reputation:

Verss

Custom Developer
Collaborate
Registered
Joined
Apr 21, 2019
Messages
133
Points
53

Reputation:

where do you put the code?? i dont see the postbit background code
 
View previous replies…

Sphere

Member
Registered
Joined
Nov 25, 2019
Messages
5
Points
3

Reputation:

@Verss how can I do so that I don't have that cut the cover where the extra info is?

Captura.JPG
 

Verss

Custom Developer
Collaborate
Registered
Joined
Apr 21, 2019
Messages
133
Points
53

Reputation:

Use css backgrounf linear transparent
 

moohook

Member
Registered
Joined
Feb 8, 2019
Messages
22
Points
13

Reputation:

I have tried and tried, this just isn't working for me. Please someone help
 

Verss

Custom Developer
Collaborate
Registered
Joined
Apr 21, 2019
Messages
133
Points
53

Reputation:

Why you put link of the image for the description
 

Verss

Custom Developer
Collaborate
Registered
Joined
Apr 21, 2019
Messages
133
Points
53

Reputation:

God thats not wgat i mean... thats custom field description
 

moohook

Member
Registered
Joined
Feb 8, 2019
Messages
22
Points
13

Reputation:

Would you care to explain where I put the image?

include in css or?
 

Sphere

Member
Registered
Joined
Nov 25, 2019
Messages
5
Points
3

Reputation:

You need put this too bro:

HTML:
Go message_macros, paste the code,

HTML:
    <xf:if is="$user.Profile.custom_fields.profilebackground">
        <div class="profilebackground" style="background-image: linear-gradient(180deg, #fff0, #141414), url({$user.Profile.custom_fields.profilebackground});"></div>
    </xf:if>
after this.

HTML:
<xf:macro name="user_info"
    arg-user="!"
    arg-threadUserId=""
    arg-fallbackName="">

Final Code View:
<xf:macro name="user_info"
    arg-user="!"
    arg-threadUserId=""
    arg-fallbackName="">
    <xf:if is="$user.Profile.custom_fields.profilebackground">
        <div class="profilebackground" style="background-image: linear-gradient(180deg, #fff0, #141414), url({$user.Profile.custom_fields.profilebackground});"></div>
    </xf:if>

HTML:
    <section itemscope itemtype="https://schema.org/Person" class="message-user">
and add this as inline.

CSS:
style="position: relative;"

Final Code view:
    <section itemscope itemtype="https://schema.org/Person" class="message-user" 
             style="position: relative;">
 
Last edited:

nelson ortiz

c0de
Registered
Joined
Feb 3, 2019
Messages
26
Points
13

Reputation:

Is there a way to make it only for a specific group, for example: moderators or administrators?
 

DareDevil

i am Watching You !
Moderator
S.V.I.P Member
Collaborate
Registered
Joined
May 25, 2019
Messages
802
Points
253

Reputation:

nelson ortiz

c0de
Registered
Joined
Feb 3, 2019
Messages
26
Points
13

Reputation:

I already achieved it, some idea on how to modify the size of the block or how I should look to change the size as in this image.

1585601033703.png
 

valid

New member
Registered
Joined
Apr 3, 2020
Messages
3
Points
3

Reputation:

message_macros

There's no
arg-threadUserId=""

Anyway I added the code.

Code:
<xf:macro name="user_info"
    arg-user="!"
    arg-fallbackName="">
    <div class="postbit_background" style="background-image: url({$user.Profile.custom_fields.profilebackground});"></div>

extra.less

Code:
.postbit_background {
position:absolute;
height:120px;
width:170px;
opacity:.40;
}
1586162193172.png

doesn't work.

then I also added the following:

Code:
<xf:macro name="user_info"
    arg-user="!"
    arg-fallbackName="">
    <xf:if is="$user.Profile.custom_fields.profilebackground">
        <div class="profilebackground" style="background-image: linear-gradient(180deg, #fff0, #141414), url({$user.Profile.custom_fields.profilebackground});"></div>
    </xf:if>
    <section itemscope itemtype="https://schema.org/Person" class="message-user" style="position: relative;">
still not working.
 

nelson ortiz

c0de
Registered
Joined
Feb 3, 2019
Messages
26
Points
13

Reputation:

@Verss After reviewing some css and html videos I was able to achieve my goal, but I have a question about how to delete the counters of each box, could you give me some idea of what topic I should read about css.

1586819073878.png
 
View previous replies…

Verss

Custom Developer
Collaborate
Registered
Joined
Apr 21, 2019
Messages
133
Points
53

Reputation:

Wait i mean right
 
View previous replies…

Verss

Custom Developer
Collaborate
Registered
Joined
Apr 21, 2019
Messages
133
Points
53

Reputation:

chrome_Knjg812won.png
yeah hes right, decrease the height
 

huseynalieff

Member
Registered
Joined
Jul 15, 2019
Messages
16
Points
3

Reputation:

Screenshot_1.png

Can you explain how you made the area that I showed in the picture?
 
View previous replies…

huseynalieff

Member
Registered
Joined
Jul 15, 2019
Messages
16
Points
3

Reputation:

@prvtzone Yes of course.
.post-stat {
flex: 0 1 50%;
margin-left: 16px;
}
and
.justify-content-center {
justify-content: center;
margin-right: 38px;
padding-left: 47px;
}
however, the numbers become irregular when they are such a single digit. No more than waiting for the code owner's comment :)
 

nelson ortiz

c0de
Registered
Joined
Feb 3, 2019
Messages
26
Points
13

Reputation:

Extra.less

CSS:
.post-stat {
    flex: 0 1 50%;
}

.post-stats .post-stat:first-child {
    flex: 0 1 49%;
    border-right: 1px solid #333;
}

.justify-content-center {
    justify-content: center;
}

.align-items-center {
    align-items: center;
}
.d-flex {
    display: flex;
}
.post-stats {
    padding-top: 15px;
}
.flex-wrap {
    flex-wrap: wrap;
}
.d-flex {
    position: relative;
    display: flex !important;
}
 

Xcoderzx

Advance Analysis
Collaborate
Registered
Joined
May 3, 2020
Messages
23
Points
13

Reputation:

I already followed but nothing happen
 
Top