Add a color + image to a specific group at the top of posts without JavaScript

phpBB2:

All versions
-------------

Find the next part in viewtopic_body template

Code:

<!-- BEGIN displayed -->

replace it with

Code:

 
<!-- BEGIN displayed -->
<div class="conan2000-flower">{postrow.displayed.POSTER_NAME}</div>


Save and publish

Installing the CSS
Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following rules in your stylesheet.

Code:

.conan2000-flower [style="color:؟؟؟؟؟"] {
pointer-events: none;
    cursor: default;
    color: #0000 !important;
    display: block;
    background: ؟؟؟؟؟;
}
 
.conan2000-flower,.conan2000-flower strong {
  pointer-events: none;
    cursor: default;
    color: #0000 !important;
}
.conan2000-flower {
  pointer-events: none;
    background: #bcc2c7;
  color: #0000 !important;
}

Replace question marks in CSS code with group color (HEX color OR color name i.e : red)




CSS: An image of a specific group

Code:

.conan2000-flower [style="color:?????"] strong {
    background: url(https://i.servimg.com/u/f73/11/60/75/36/admini10.png) no-repeat;
}

Replace question marks in CSS code with group color

Hmm interesting.. We can save some loading resources using a simple template edit instead of a JS.

Good job :p

better is use the group as a reference (demo) but it's a good trick

Thanks @YoshiGM and @tikky ^^

tikky wrote:better is use the group as a reference (demo) but it's a good trick

Oh I didn't know about it before but
The trick is in my first post
It is easy to modify and does not require expert programmers
It works on all versions the same way

كونان2000 wrote:

Hello everyone

With this trick, you can add a color to a specific group that appears at the top of posts
and You can also add photos to a specific group,

I know it's a common trick, but it was using JavaScript

Now you don't need to use JavaScript-jQuery

A trick I discovered that I wanted to share with you

----------------------------------------------

phpBB2:

All versions
-------------

Find the next part in viewtopic_body template

Code:

<!-- BEGIN displayed -->

replace it with

Code:

 
<!-- BEGIN displayed -->
<div class="conan2000-flower">{postrow.displayed.POSTER_NAME}</div>


Save and publish

Installing the CSS
Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following rules in your stylesheet.

Code:

* {
    text-decoration: none;
}

.conan2000-flower [style="color:?????"] {
    cursor: default;
    color: #0000 !important;
    display: block;
    background: ?????;
}

.conan2000-flower,.conan2000-flower strong {
    cursor: default;
    color: #0000 !important;
}
.conan2000-flower {
    background: #bcc2c7;
}

Replace question marks in CSS code with group color (HEX color OR color name i.e : red)




CSS: An image of a specific group

Code:

.conan2000-flower [style="color:?????"] strong {
    background: url(https://i.servimg.com/u/f73/11/60/75/36/admini10.png) no-repeat;
}

Replace question marks in CSS code with group color

_____________________________________________________________________

Hello,

my suggestion is to make that color for each group for ModernBB and AwesomeBB for the header, where the title is included for the topic creations - and when someone replys (from the staff ofc, to show the color also... and so on!) - and for members to show default color...

hi @Mihai
ok

: AwesomeBB:

كونان2000 wrote:hi @Mihai
ok

: AwesomeBB:

can you send an screenshot please? Also the tag </span-div> is totally wrong!

hi @Mihai
https://i.servimg.com/u/f30/20/35/61/89/aa_cia11.jpg

Interesting!

Thanks @Beyonder ^^

@كونان2000 ,

For the PhpBB2 version, on my forum have i a problem to add the CSS for multiple group colors i can set only one color for all posts.

I'm testing this in my forum (phpBB3 version) and the username for normal users appears repeated in the background:

Welcome @Joost @YoshiGM

Are you sure you did all the steps correctly?

phpBB3


PhpBB2

كونان2000 wrote:Welcome @Joost @YoshiGM

Are you sure you did all the steps correctly?

Yes, i have followed all the steps.

hi

If you want more than one color, you have to repeat the code and put the new group color in the code.

Code:

.conan2000-flower [style="color:؟؟؟؟؟"] {
pointer-events: none;
    cursor: default;
    color: #0000 !important;
    display: block;
    background: ؟؟؟؟؟;
}

I don't know what happened, it works now.

Great, it's good that things are going well now

Nice idea! With script this is possible also:

Code:

$(document).ready(function() {
    var vf_vs = _userdata["tpl_used"];var isso;var cor;var post_ = $('.post,.post-wrap');
   var classes = {
        'subsilver': 'tr.post .name strong a[href^="/u"] span',
        'prosilver': 'div.postprofile a[href^="/u"] span',
        'invision': '.postprofile-details a[href^="/u"] span',
        'punbb': 'div.user h4.username a[href^="/u"] span',
        'modernbb': 'div.postprofile-name a[href^="/u"] span',
        'awesomebb': '.post-body .post-author a[href^="/u"] span'
    };
    if(classes.hasOwnProperty(vf_vs)) {
      var selector = classes[vf_vs];
      post_.each(function() {
         isso = $(this);
         cor = isso.find(selector).attr('style').replace('color:', '');
         isso.find('div.post-head,div.post,tr.post').css('border-top', '5px solid ' + cor).addClass('st-rank');
      });
    } else {console.error('template no found on "classes". You use ' + vf_vs + ' version.');}
});


CSS:

Code:

.st-rank[style] {
    background-image: url(https://i.servimg.com/u/f21/16/89/96/68/chrome10.png);
    background-repeat: no-repeat;
    background-position: right 50%;
}

@كونان2000, you can suggest this on script also, please?

Shek wrote:@كونان2000, you can suggest this on script also, please?

hi @Shek
I did not understand your request,
do you explain to me what you mean more?

Hello @كونان2000 , yes i checked twice the codes.

Even i changed the name of the div and the username still repeats in the bar

hi @YoshiGM
It seems to me that your CSS codes are different
Here https://www.yoshifansclub.com/t25909-anunciado-un-nintendo-direct-partnershowcase-indie-world-para-el-27-08-24#229908

For this you have to add the code as follows:

Code:

.bak-st-yfc, .bak-st-yfc strong {
    pointer-events: none;
    cursor: default;
    color: #0000 !important;
}

Hmm not worked, sorry

If you pass your cursor in my profile and select the exact point of the username appears as i've showed before

Also, the code for a strange reason ignores the background of the staff bar :S

If you pass your cursor in my profile and select the exact point of the username appears as i've showed before

You can delete names using the following code:

Code:

.bak-st-yfc, .bak-st-yfc strong {
    pointer-events: none;
    cursor: default;
    color: #0000 !important;
    font-size: 0;
    padding: 8px;
}

Also, the code for a strange reason ignores the background of the staff bar :S

If you want more than one color, you have to repeat the code and put the new group color in the code.

Ok for the repeated usernames in the bar.

But the CSS is not adding the staff color that i have in group.



I'm doing anything wrong?

Yes because you changed the codes
You need a method that suits your forum

previous code

Code:

.bak-st-yfc, .bak-st-yfc strong {
    pointer-events: none;
    cursor: default;
    color: #0000 !important;
    font-size: 0;
    padding: 8px;
}

replace

Code: padding: 8px;

Replace it with

Code: height: 15px;

In the following way, set the color of the groups:

Code:

.bak-st-yfc [style="color:#04B50F"] {
    height: 15px;
pointer-events: none;
    cursor: default;
    color: #0000 !important;
    display: block;
    background: #04B50F;
}

Alright!
Now works perfectly!

Thank you

YoshiGM wrote:Alright!
Now works perfectly!

Thank you

You're welcome! I'm glad to hear everything is working well.