Resource icon

XF 2 Tip Postbit Background Custom Fields

nelson ortiz

c0de
Registered
Joined
Feb 3, 2019
Messages
26
Points
13

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;
 

Verss

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

Reputation:

chrome_Knjg812won.png
yeah hes right, decrease the height
 

huseynalieff

Member
Registered
Joined
Jul 15, 2019
Messages
15
Points
13

Reputation:

Screenshot_1.png

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

Verss

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

Reputation:

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

huseynalieff

Member
Registered
Joined
Jul 15, 2019
Messages
15
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
15
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 :)
 

huseynalieff

Member
Registered
Joined
Jul 15, 2019
Messages
15
Points
13

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
 

Yoel Rodriguez

Active member
Registered
Joined
Mar 25, 2020
Messages
36
Points
8

Reputation:

good someone who has version 2.2 and is active with this postbit can help me?
 
Top