Resource icon

XF 2 Tip Postbit Background Custom Fields

nelson ortiz

GamerzHacking
Registered
Joined
Feb 3, 2019
Messages
28
Points
23

Reputation:

Thank you, but I already solved it with the following property, apart I realized my error and I was missing one "." in my css class.

margin-left: auto;
 

DareSec

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

Reputation:

prvtzone

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

Reputation:

Use width like this. and it will be responsive for mobile also

Code:
.postbit_background {
position:Absolute;
height:150px;
width:90%;
opacity:.50;
}
 

DareSec

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

Reputation:

@prvtzone he is asking about postbit not background :p
 

prvtzone

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

Reputation:

@DareDevil oh okay. i misunderstood sorry bro :p

How can i add custom postbit icon and text box like that image ?
 

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
21
Points
13

Reputation:

Screenshot_1.png


Can you explain how you made the area that I showed in the picture?
 

Verss

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

Reputation:

sure, but its complicated
will trying to find the code if i still have
 

prvtzone

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

Reputation:

i added you on discord too, Please accept if you can Mr. Robot#0173
 

huseynalieff

Member
Registered
Joined
Jul 15, 2019
Messages
21
Points
13

Reputation:

@Verss thank you so much man
I made some quotes that I downloaded from your theme for the last time but I guess I couldn't get it right

PHP:
<div class="uix_messagePostBitWrapper">
            <xf:if is="{{$user.isMemberOf(3)}}">
            <div class="postbit-tag" style="font-weight:bold;"><img src="https://i.imgur.com/MBbaIIq.png"></div>
            </xf:if>
            <div class="d-flex align-items-center justify-content-center flex-wrap post-stats">
        <div class="post-stat">
    <span class="largetext">
    <strong style="color:green;">{$user.trophy_points}</strong>
    </span>
        <br>
    <span class="x-smalltext text-uppercase" style="font-weight:bold;">POİNT</span>
        </div>
        <div class="post-stat">
    <span class="largetext"><strong style="color:green; margin-left: 10px;">{$user.reaction_score}</strong></span>
    <br>
        <span class="x-smalltext text-uppercase" style="font-weight:bold;">LİKE</span>
        </div>
    </div>

CSS
CSS:
.d-flex {
    display: flex;
}
.d-flex {
    position: relative;
    display: flex !important;
}
@media (max-width: 650px) {
    .post-stat, .post-stats {
    display: none !important;
    }
}
.post-stat {
    flex: 0 1 50%;
    margin-left: 16px;
}
.post-stats .post-stat:first-child {
    flex: 0 0 32%;
    border-right: 1px solid #2f3136;
}
.justify-content-center {
    justify-content: center;
    margin-right: 38px;
    padding-left: 47px;
}

looks like this in odd numbers

Screenshot (2).png


I guess I arranged the codes wrong, how exactly can I center them?
 

huseynalieff

Member
Registered
Joined
Jul 15, 2019
Messages
21
Points
13

Reputation:

I was able to do it with margin-left, margin-right and other things, but it wasn't exactly like the picture :)
 
Top