XF 2 Tip Postbit Background Custom Fields

[Verss]

Wait i mean right

 

[nelson ortiz]

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]

@nelson ortiz can I see live preview

 

[nelson ortiz]

@DareDevil I just realized that it damages the mobile version in my postbit, I correct it and send you the result

 

[prvtzone]

@nelson ortiz i achieved that by putting width in % instead of px in extra.less

 

[nelson ortiz]

@prvtzone for mobile?

 

[prvtzone]

@nelson ortiz Yes sir.

BTW https://enxf.net/attachments/1586819073878-png.13972/
Which theme is that? and how can i achieve the box in messages, reactions and points?

 

[prvtzone]

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

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

 

[DareSec]

@prvtzone he is asking about postbit not background

 

[prvtzone]

@DareDevil
Yes it will resolve that postbit issue that damage the mobile version

 

[DareSec]

@prvtzone its only fix the background not postbit . because he added a custom postbit . so he have to customize the css for mobile

https://enxf.net/attachments/1586819073878-png.13972/ - custom posbit icon . text ,and other

 

[prvtzone]

@DareDevil oh okay. i misunderstood sorry bro

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

 

[Verss]

yeah hes right, decrease the height

 

[huseynalieff]

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

 

[Verss]

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

 

[prvtzone]

@Verss i want that too. Looks great.

 

[prvtzone]

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

 

[huseynalieff]

@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

<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

.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

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

 

[huseynalieff]

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

 

[prvtzone]

@huseynalieff
Only @Verss can provide the perfect code. lets wait for him