Resource icon

XF 2 Tip Postbit Background Custom Fields

Verss

Moderator
Staff member
Moderator
*Lifetime*
Registered
Joined
Apr 21, 2019
Messages
126
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

Moderator
Staff member
Moderator
*Lifetime*
Registered
Joined
Apr 21, 2019
Messages
126
Points
53

Reputation:

How can i help u
 

moohook

Member
Registered
Joined
Feb 8, 2019
Messages
22
Points
13

Reputation:

840765fb8586642b3bd0b21928760803.png


1639600dcaf5bac6aae8f4bf17293016.png

4f270a03ab7d63e8a79a2a958481e429.png


Have I done something wrong in the process as nothing is showing at all
 

Verss

Moderator
Staff member
Moderator
*Lifetime*
Registered
Joined
Apr 21, 2019
Messages
126
Points
53

Reputation:

Why you put link of the image for the description
 

moohook

Member
Registered
Joined
Feb 8, 2019
Messages
22
Points
13

Reputation:

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

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:

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
 
Top