vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)
-   -   Show Thread Enhancements - [CM] Fancy Background for Userinfo & Post Title (Postbit) (https://vborg.vbsupport.ru/showthread.php?t=288997)

ChiNa 10-12-2012 10:00 PM

[CM] Fancy Background for Userinfo & Post Title (Postbit)
 
1 Attachment(s)
Credits for the CSS Part to: FASTBIRDfrom vBulletin.org

This mod was requested by member on vBCoderz.com where I am also a Staff Member.

Please notice: This mod has only been tested on (Postbit Legacy)

Fancy Background for Userinfo & Post Title
Used for ADMINS - With 5 Stars Backgounrson Both Background

https://vborg.vbsupport.ru/external/2012/10/45.png


First of all Upload the 2 Images to your forum Images folder, which is attached below!

userinfo.png + posttitle.png = Upload both to your forum Images folder



1)posttitle.png
https://vborg.vbsupport.ru/external/2012/10/46.png


2) userinfo.png

https://vborg.vbsupport.ru/external/2012/10/47.png

You only need to upload userinfo.png + posttitle.png to your images folder.


Tutorial Starts Here

STEP 1: Goto
your Style Manager >> Click on <<>> Button to enter your Templates Area >> Then find your "CSS Templates" >> In CSS Templates look for "postbit.css", Double Click on postbit.css to access it. >> Now scroll all the way down, and add the following code below everything else:

Code to add in postbit.css:

Code:

.postbitlegacy .userinfo2 {
    float:{vb:stylevar left};
    position: relative;
    width:{vb:math {vb:stylevar postbitlegacy_userinfo_width}-{vb:math {vb:stylevar
padding}*2}};
    padding: 2px {vb:stylevar padding} {vb:math {vb:stylevar padding}/2};
    font-size: {vb:stylevar small_fontSize};
    display:block;
      background: url(URL TO YOUR userinfo.png IMAGE) no-repeat;
      width:175px;
      height:400px;
        _margin-top: -{vb:math {vb:math 16px*{vb:stylevar line_height}} +  {vb:stylevar padding}-{vb:stylevar postbit_border.borderWidth}};
    clear:both;
}
.postbitlegacy .userinfo2 .postuseravatar img, .eventbit userinfo .eventuseravatar img {
    border: {vb:stylevar postbitlegacy_avatar_border};
    outline: {vb:stylevar postbitlegacy_avatar_outline};
    max-width: {vb:math {vb:stylevar postbitlegacy_userinfo_width} -  {vb:math {vb:stylevar padding}*2}- {vb:math {vb:stylevar  postbitlegacy_avatar_outline.borderWidth}*2} - {vb:math {vb:stylevar

postbitlegacy_avatar_border.borderWidth}*2}};
}
.postbitlegacy .userinfo2 a.username, .eventbit .userinfo a.username {
    clear:right;
    font-size:21px;
    font-weight:none;
    width: auto;
    max-width:{vb:math {vb:stylevar postbitlegacy_userinfo_width} - {vb:math {vb:stylevar padding}*2} - 20px};
    word-wrap:break-word;
}
.postbitlegacy .userinfo2 .postuseravatar, .eventbit .userinfo .eventuseravatar {
    display:block;
    margin:{vb:math {vb:stylevar padding}/3} auto 0;
    text-align:center;
    width: auto;
}
.postbitlegacy dl.userinfo_extra2 dt, .postbitlegacy dl.user_rep dt {
    float: {vb:stylevar left};
    text-align: {vb:stylevar left};
    /*color: {vb:stylevar shade_color};*/
    margin-{vb:stylevar right}: {vb:stylevar padding};
    margin-{vb:stylevar left}: 0;
    min-width:60px;
    width:auto !important;
    width:60px;
}



STEP 2: Now
if you look at the FIRST code, I have marked it in red where it says:
(URL TO YOUR userinfo.png IMAGE) on top.

Replace the red code with the FULL URL to the userinfo.png image in you images folder!

Example: http://site.com/forum/images/userinfo.png

So basicly make sure now both of the images in are uploaded the "userinfo.png" and "posttitle.png" to your forums "images" folder!

STEP 3: Now you need to go back to Style Manager and click on the again back to the Template area to Edit the Postbit_legacy template.

Now in the Templates area Locate the Postbit Templates! Click on it and open the template called "postbit_legacy"!

In postbit_legacy:

FIND CODE:
Code:

<div class="userinfo">
REPLACE WITH:
Code:

<vb:if condition="is_member_of($post, 6)"><div class="userinfo2">
<vb:else />
<div class="userinfo">
</vb:if><center>

IN SAME TEMPLATE FIND:
Code:

<dl class="userinfo_extra">
AND REPLACE WITH:
Code:

<vb:if condition="is_member_of($post, 6)"><dl class="userinfo_extra2">
<vb:else />
<dl class="userinfo_extra">
</vb:if><center>

If you can see the NUMBER 6 as ($post, 6)
is the usergroupd ID that you want to have a fancy background!

Now this was for the USERINFO Background, lets fix the "POST TITLE" background, but do not refresh your "postbit_legacy" template, Stay there to add the last part:


LAST PART FOR USERTITLE BACKGROUND:
In your postbit_legacy find the following code below:

FIND THIS CODE:

Code:

<h2 class="title icon">
Add this code below:
Code:

<vb:if condition="is_member_of($post, 6)">
<img src="images/posttitle.png" alt="Admin Image"><br />
</vb:if>

Now lets make all of it to stay in CENTER, if you dont want it to be centered, you can SAVE it now, and DONE!

But if you want it all to be showen nicely then I suggest you center it all following my instructions!

In same Template, Postbit_legacy find..

Find this Code:
Code:

<img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}" />


Add this code below:

Code:

</center>
In same Template find Code:
Code:

<dt>{vb:rawphrase posts}</dt> <dd>{vb:raw post.posts}</dd>
ADD THIS CODE BELOW:
Code:

</center>
Now CLICK SAVE, and we are done!

And again the Number 6 is used ($post, 6) the 6 is the usergroup ID for Administrators! So it means that ONLY the admins will be able to have this BACKGROUND IMAGE! If you decided to give other usergroups a fancy background as the admins!

You can add more USERGROUP ID's or Numbers like this: ($post, 2,4,6)

Good luck and you can always ask if anything, and dont forget to visit us and contribute some more time on
vBCoderz.com!
Notice: Dont forget to download the 2 images attached right below, and upload them both to your forums Images folder!


OPTIONAL INFO

If you decided to use your own images for the BACKGROUND, then make sure thar you images should match the options below:

Name one of the images to userinfo.png and name the the other to posttitle.png

Size of images should be:

userinfo.png: 400px height / 175px width
posttitle.png: 276px height / 37px width


The posttitle_EXTRA.png image below is just an an extra image with the ADMIN text added on the opposit side! I you wanted to use it then to change the name to posttitle.png

posttitle_EXTRA.png
https://vborg.vbsupport.ru/external/2012/10/48.png

TheSupportForum 10-13-2012 09:46 AM

this template edit is a copy of Usergroup Background in postbit Legacy

ChiNa 10-13-2012 02:26 PM

Thanks god I came by to answer you, I was online from my phone when I saw this.

Thats not true, and thats not belonging to
Dr.osamA, A link you found in similar threads? which I saw the same day befor posting this!

The CSS and some of the Template Edits are made by FastBird, and not any Dr.Osama that you linked. Rest of the Template Edits are made by me, plus the 2 Images and I added a NEW Post Title background, and Userinfo Background!

And if you look below my thread it says big:
It says: Credits for the CSS Part to: FASTBIRD from vBulletin.org, and also I have added FASTBIRD as Co-Author

And where came the Dr.Osama from?

============ BELOW IS MY CSS & TEMPLATE CODE + IMAGES =============

My CSS Code:

PHP Code:

.postbitlegacy .userinfo2 {
    
float:{vb:stylevar left};
    
positionrelative;
    
width:{vb:math {vb:stylevar postbitlegacy_userinfo_width}-{vb:math {vb:stylevar 
padding
}*2}}; 
    
padding2px {vb:stylevar padding} {vb:math {vb:stylevar padding}/2};
    
font-size: {vb:stylevar small_fontSize};
    
display:block;
       
backgroundurl(URL TO YOUR ADMINBG.PNG IMAGEno-repeat;
       
width:200px;
       
height:374px;
        
_margin-top: -{vb:math {vb:math 16px*{vb:stylevar line_height}} +  {vb:stylevar padding}-{vb:stylevar postbit_border.borderWidth}};
    
clear:both;
}
.
postbitlegacy .userinfo2 .postuseravatar img, .eventbit userinfo .eventuseravatar img {
    
border: {vb:stylevar postbitlegacy_avatar_border};
     
outline: {vb:stylevar postbitlegacy_avatar_outline};
     
max-width: {vb:math {vb:stylevar postbitlegacy_userinfo_width} -  {vb:math {vb:stylevar padding}*2}- {vb:math {vb:stylevar  postbitlegacy_avatar_outline.borderWidth}*2} - {vb:math {vb:stylevar 

postbitlegacy_avatar_border
.borderWidth}*2}};
}
.
postbitlegacy .userinfo2 a.username, .eventbit .userinfo a.username {
    
clear:right;
    
font-size:21px;
    
font-weight:none;
    
widthauto;
    
max-width:{vb:math {vb:stylevar postbitlegacy_userinfo_width} - {vb:math {vb:stylevar padding}*2} - 20px};
    
word-wrap:break-word;
}
.
postbitlegacy .userinfo2 .postuseravatar, .eventbit .userinfo .eventuseravatar {
    
display:block;
    
margin:{vb:math {vb:stylevar padding}/3auto 0;
    
text-align:center;
    
widthauto;
}
.
postbitlegacy dl.userinfo_extra2 dt, .postbitlegacy dl.user_rep dt {
    
float: {vb:stylevar left};
    
text-align: {vb:stylevar left};
    
/*color: {vb:stylevar shade_color};*/
    
margin-{vb:stylevar right}: {vb:stylevar padding};
    
margin-{vb:stylevar left}: 0;
    
min-width:60px;
    
width:auto !important;
    
width:60px;





My Template Code
Code:

<div class="userinfo">
Code:

<vb:if condition="is_member_of($post, 6)"><div class="userinfo2">
<vb:else />
<div class="userinfo">
</vb:if><center>

Code:

<dl class="userinfo_extra">
Code:

<vb:if condition="is_member_of($post, 6)"><dl class="userinfo_extra2">
<vb:else />
<dl class="userinfo_extra">
</vb:if><center>

Code:

<h2 class="title icon">
Code:

<vb:if condition="is_member_of($post, 6)">
<img src="adminbadge.png" alt="Admin Image"><br />
</vb:if>

Code:

<img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase  xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar,  {vb:raw post.username}}" />
Code:

</center>
Code:

<dt>{vb:rawphrase posts}</dt> <dd>{vb:raw post.posts}</dd>
Code:

</center>


This is my IMAGES:

https://vborg.vbsupport.ru/attachmen...c=1&thumb=1&d=https://vborg.vbsupport.ru/attachmen...c=1&thumb=1&d=

This was requested by a member on vBCoderz.com where I am an ADMIN there: http://vbcoderz.com/showthread.php?p=29395#post29395 !
And Honestly you are a coder yourself, you should first really see how much time people have used on it befor even judge or find something not even close to it!




============= BELOW IS THE CSS CODE AND IMAGES YOU POSTED =============


And this is his CSS:

Code:

.postbitlegacy .postbody, .eventbit .eventdetails .eventbody {
    margin-{vb:stylevar left}: {vb:stylevar postbitlegacy_userinfo_width};
    border-{vb:stylevar left}: {vb:stylevar postbit_userinfo_border};
    background: {vb:stylevar postbit_background};
    _background-image: none;
    padding-bottom: 1em;
}
add ander it

PHP Code:
/* Dr.osamA - alra7ba editing postbit */
.postbitlegacy .postbody_admin, .eventbit .eventdetails .eventbody {
    margin-{vb:stylevar left}: {vb:stylevar postbitlegacy_userinfo_width};
    border-{vb:stylevar left}: {vb:stylevar postbit_userinfo_border};
    background: url(http://www.xxxx.net/forum/xxx/Back-Admin-1.gif) repeat;
    _background-image: none;
    padding-bottom: 1em;
}

PHP Code:


And this is his Template Code:

Code:

<div class="postbody">
Code:

<vb:if condition="is_member_of($post, #)"><div class="postbody_admin">
<vb:else />
<div class="postbody">
</vb:if>



This is his images:
https://vborg.vbsupport.ru/external/2012/10/6.gif

https://vborg.vbsupport.ru/external/2012/10/7.gif

Can you even see his images, ? and can you see the SMALL CSS and TEMPLATE code that has been used.
Can u see any difference!


============ Can you maybe see the difference? ============


ChiNa 10-13-2012 06:22 PM

MR simonhind I was hoping that you will reply back and see your mistakes about FASTBIRDs Tutorial,

I also did message you in private to read my reply here, about your mysteriouse ways of thinking that this is was a template COPY, I think you owe an apology to Me and Fastbird for blowing up such a thing by sayin it was a copy!

Taurus1 10-15-2012 02:54 PM

@simonhind, it is interesting to me that you try and find fault with everyone on vb.org, and when proven wrong, you hide your head in the sand. I guess it is too hard admitting you are wrong hey!?

ChiNa-Man, keep up the good work mate! It is not overseen!

This is a great template edit! Thank you.

Donavaz 10-15-2012 05:50 PM

tanx

but please when u want give a post try to use paraphrase and more easy.

ChiNa 10-17-2012 12:29 PM

Quote:

Originally Posted by Taurus1 (Post 2373173)
@simonhind, it is interesting to me that you try and find fault with everyone on vb.org, and when proven wrong, you hide your head in the sand. I guess it is too hard admitting you are wrong hey!?

ChiNa-Man, keep up the good work mate! It is not overseen!

This is a great template edit! Thank you.

@Taurus1 , Thank you, finally a decent and honest person to stand up for his words.. You just really made my day.. I have worked my tears and svet to make this and all of my mods! And each mod that I have have got helped with from friends or members on here, or outside of vB.org I have put that person on THE TOP of my page with full CREDITS !

Even websites that i knew who have helped me years ago I have mentioned them in my profile! Only because they have helped me and made me become the person I am, and because I am raised like this..

I have today Tributet all of my work to Mybbextras.net and Yaldaram.com which can sees on my profiel page. And I hope mr @simonhind could learn from that, not to disrespect him, but to tell him the truth about crediting the right people and their support!

@Taurus1 you really raised my head after this Gentlemans message! May god bless you and your family......

Regards China-Man

TheSupportForum 10-17-2012 01:00 PM

and yet i haven't said anything about it, i am busy with a project and don't need the sarcasm

ChiNa 10-17-2012 11:47 PM

Quote:

Originally Posted by Donavaz (Post 2373210)
tanx

but please when u want give a post try to use paraphrase and more easy.

@Donavaz, Sure mate, thanks for your advice,, Glad to hear your point of view,, I will consider it next time If I was using more editings.. Thanks

Quote:

Originally Posted by simonhind (Post 2373729)
and yet i haven't said anything about it, i am busy with a project and don't need the
sarcasm

@simonhind. I reported my own thread to the ADMINS and asked them to remove it IF IT WAS A COPY, and since my thread is still here, you still owe me and Fastbirt an apology.. I dont have much to say about you, I know you are a coder on here and because of your work and your age I respect you, but not because of who you are in person!

TheSupportForum 10-18-2012 11:03 AM

Quote:

Originally Posted by ChiNa-Man (Post 2373879)
@Donavaz, Sure mate, thanks for your advice,, Glad to hear your point of view,, I will consider it next time If I was using more editings.. Thanks



@simonhind. I reported my own thread to the ADMINS and asked them to remove it IF IT WAS A COPY, and since my thread is still here, you still owe me and Fastbirt an apology.. I dont have much to say about you, I know you are a coder on here and because of your work and your age I respect you, but not because of who you are in person!

ok ChiNa-Man, yes you deserver an apology, and i do apologize for the accusation saying that this template edit was a copy, when in fact it wasnt


All times are GMT. The time now is 03:12 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01316 seconds
  • Memory Usage 1,856KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (24)bbcode_code_printable
  • (1)bbcode_php_printable
  • (4)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (10)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 

Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete