MyBB Community Forums

(2018-09-13, 04:57 PM)EVX Wrote: [ -> ]easy to do heres how

this method is for how to do it for you and other users can also do it if you set the permissions

first make a Custom Profile Field
title Postbit Cover
Short Description  (Only .jpg, .gif, .png supported)
Field Type textbox
next one can be blank
length 500
display on postbit set to yes

go to templates >> your template >> postbit template >> postbit classic
paste this at the top <div class="postbit_background" style="background-image: url({$post['fidX']});"></div>
change X to your custom field you made if you hover over it at the bottom it will tell you the ID
add this css to global.css
.postbit_background{position:absolute;height:120px;width:170px;opacity:.40}
go to yoursite/usercp.php?action=profile
you will see postbit cover paste your image link save
done
hope this helped

 As per this i did same. 


but the background image didn't fit my postbit. just look at this. 

I changed the css.

here is the css.

.postbit_background{position:absolute;height:226px;width:300px;opacity:.35;
background-size: 100% 100%;}

but didn't change anything.

please anyone suggest me thee css property that the image will fit to the whole postbit.

---

My website link is :- https://gossipion.xyz

Hi,

i see it OK, with the background in all the postbit.

Try to empty the cache of your web browser and check again.

nope , it hasn't changed. i mean check the image it's cover the 1/6 part of my postbit profile. it must be coverd the full postbit. from the left side to the right side.

please suggest the css property.

You don't need to add the postbit_background div. Remove it and in the same template find the div with class post_author, next to the class attribute add:

style="background-image: url({$post['fidX']});"

(2020-09-28, 10:14 AM)chack1172 Wrote: [ -> ]You don't need to add the postbit_background div. Remove it and in the same template find the div with class post_author, next to the class attribute add:

style="background-image: url({$post['fidX']});"

It was nice idea , it worked , but there is one more problem.
this is the "opacity" problem , the original pic's color effect the post author information texts , and the texts don't appears .
is there any solution for it ?
how do solve this opacity css problem ?

Ok, to add opacity the postbit_background div is required.
So add it again in the template but put it inside post_author div. Than remove all the old css you added to global.css and add this:

.post_author { position: relative; z-index: 1; }
.postbit_background { opacity: .35; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; }

not working 😞

You didn't remove the postbitbackground.css file. And you need to clear browser cache to see the edit on global.css.

i delete that css file.
and added the css property in global.css
as you said i did it in template.

{$ignore_bit}{$deleted_bit}
<a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
<div class="post{$usergroup['gid']} post post {$unapproved_shade} {$post['mysupport_bestanswer_highlight']}" style="{$post_visibility}" id="post_{$post['pid']}">
<div class="post_author"> <div class="postbit_background" style="background-image: url({$post['fid5']});"></div>
	{$post['useravatar']}
	<div class="author_information">
			<strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br />
			<span class="smalltext">
				{$post['usertitle']}<br />
				{$post['threadstarter']}
{$post['userstars']}
				{$post['groupimage']}
			</span>
	</div>
	<div class="author_statistics">
		{$post['user_details']}{$post['im']}
	</div>
</div>
<div class="post_content{$post['styleclass']}">
	<div class="post_head">
		{$post['posturl']}
		{$post['mysupport_status']}{$post['icon']}
		<span class="post_date">{$post['postdate']} <span class="post_edit" id="edited_by_{$post['pid']}">{$post['editedmsg']}{$post['edithistory']}</span></span>
		{$post['subject_extra']}<div class="float_right">{$post['mysupport_bestanswer']}{$post['mysupport_deny_support_post']}</div>
	</div>
	<div class="post_body scaleimages" id="pid_{$post['pid']}">
		{$post['message']}
	</div>
	{$post['attachments']}
	{$post['signature']}
	<div class="post_meta" id="post_meta_{$post['pid']}">
		{$post['quick_quote']}{$post['iplogged']}
		<div class="float_right">
			{$post['poststatus']}
		</div>
	</div>
	{$post['input_editreason']}
</div>
<div style="{$post['tyl_display']}" id="tyl_{$post['pid']}">{$post['thankyoulike_data']}</div>
<div class="post_controls">
	<div class="postbit_buttons author_buttons float_left">
		{$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']}{$post['button_rep']}
	</div>
	<div class="postbit_buttons post_management_buttons float_right">
		{$post['button_tyl']}{$post['button_edit']}{$post['button_quickdelete']}{$post['button_quickrestore']}{$post['button_quote_fast']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_mention']}{$post['button_report']}{$post['returntotop']}{$post['button_warn']}{$post['button_purgespammer']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}
	</div>
</div>
</div>
{$post['mcd']}

And now it works, the only problem is that the css file is cached so you don't have the new edits. I suggest you this plugin:
https://community.mybb.com/mods.php?action=view&pid=755