[SOLVED] Custom color posts for staff members

[ValoishGraphic Designer]

I noticed that on this forum different staff members have different colored bars on top of their posts
Ex: xxx | xxx | xxx

I know that this is doable using the tutorial/thread that was already posted: Here
This is doable according to Groups (Admin, Mod, Designer, etc) but I was wondering if there's a way to get specific staff members to each have their own colored post.

For example, on my forum (which is version phpBB2), my staff tag is a pink Admin tag and I would like to have a pink bar on my post to match it. But then the other 2 Admins that we have on the forum have a mint Admin tag, and a purple Admin tag and they also want their post colors to match their tags. Would this be doable? Or can it only be done according to groups?

Also posted the thread here

[ValoishGraphic Designer]

@Ange Tuteur, I'd love your help whenever you have the time c:

[SLGrayValued Member]

I see that you read my reply on the support forum.

[ValoishGraphic Designer]

Yup! Thank you for telling me about this forum as well.

[SLGrayValued Member]

You're welcome.  Ange Tuteur exactly helped create the support forum's theme.

[Ange TuteurAdministrator]

Hi @Valoish and welcome to FM Design !

Yes, what you're asking for is absolutely possible. If it's alright with you, I'll write up a script tomorrow to do what you're requesting. I'm going to bed soon, and if I start coding now I probably wont be going to bed at all -- I get carried away like that. xD

Have a good night, and see you tomorrow.

[ValoishGraphic Designer]

Thanks @Ange Tuteur!

Awesome, that's great to hear~ And that's perfectly fine, I don't mind waiting at all. c: I know the feeling about coding LOL. I get that way with Graphic/Web Design and sometimes Web Development so I totally get it.

You too! And thanks again for taking a look at my topic so quickly. ^^

[Ange TuteurAdministrator]

@Valoish good morning,

I put together a script which will add a unique class to each post based on the member's id. To install it, go to Admin Panel > Modules > JavaScript codes management and create a new script with the following settings.

Placement : In the topics
Paste the content below and save the newly created script.

Code:

$(function() {
  for (var a = $('.name'), i = 0, j = a.length, link; i < j; i++) {
    link = $('a[href^="/u"]', a[i])[0];

    if (link) {
      $(a[i]).closest('.post').addClass('u' + link.href.replace(/.*?u(\d+).*/, '$1') + '_post');
    }
  }
});

Once this is installed, all posts should now have a unique class name like this : .u{ID}_post

Where {ID} is the user's id. For example, my user id is "1" so my posts will have the class .u1_post, which allows me to style my post individually with CSS. I'll give you an example rule using your user id on your forum. Add this rule to your stylesheet :
Display > Colors > CSS stylesheet

Code:

.u132_post > td {
  border-top:12px solid pink;
}

It should add a pink border above your post that's 12 pixels solid.

If you don't know where to find a user's id, go to their profile page and look at the address bar. The user's id will be directly after the "u" :

You can also see it in the URL preview in the bottom left ( or right ) when you hover over the direct user link.


If you have any questions let me know.

[ValoishGraphic Designer]

@Ange Tuteur Good morning c:

Gonna give this a try now and let you know if I run into any issues. ^^

Thank you~

[ValoishGraphic Designer]

No changes ; A;
I made a new JS file called "Colored Posts"


Then I added the CSS you provided and pasted it at the bottom of my forum's CSS file but there was no change. I tried pasting the CSS at the very top but still nothing changed ><

[Ange TuteurAdministrator]

I just checked the console on your forum and I noticed an error which may be blocking the new script I gave you. Try editing... "Toolbar BG Test" and see if it has the following content ( or similar to it ) :

Code:

#fa_share{display:none!important}#fa_toolbar,#fa_toolbar_hidden{background:url('http://i.imgur.com/JIAW2JG.png')}

If it does, delete that script and add the contents to the stylesheet, if you want. It's CSS which is why it's causing an error in JS codes management.

[ValoishGraphic Designer]

@Ange Tuteur Deleted that JS page since we didn't need it anymore but still nothing.. :I

[Ange TuteurAdministrator]

@Valoish, sorry for the late reply, but we're getting there ! Unfortunately I found another error. Check the "No Share" script to see if it has this content :

Code:

#fa_share{display:none!important}

If it does, delete that as well, and add it to the stylesheet instead if you want.

Hopefully after that all the errors will be cleared up and the script I gave you will work.

[ValoishGraphic Designer]

@Ange Tuteur No worries~ I tried that as well but still nothing x_x

[Ange TuteurAdministrator]

Getting closer, just a little more it looks like.

Check one of the topic icon scripts for these texts and delete them :

Code:

This will add an extra field below the description field for URLs+it will also parse the icons in the topic list.

I think someone accidentally copied them when pasting a script.

[Pantone]

^ Updated that bit, I am working with @Valoish on our forum.
LOL. I left the text in there from earlier this week. #^_^# Sorry!

Still not seeing pink, sadly. ;.;

[Ange TuteurAdministrator]

@HaeDoesGraphics hey welcome !

I think we're on the final boss, do you have a script like this in JS codes management ?

Code:

$(document).ready(function() {
  $.getScript('https://raw.github.com/lokesh/lightbox2/master/js/lightbox.js')
});
$(function() {
  $('input[name="description"]').change(function() {
    var ValidFileExtension = ['jpg', 'JPG', 'jpeg', 'JPEG', 'png', 'PNG', 'gif', 'GIF', 'bmp', 'BMP'];
    if ($.inArray($(this).val().split('.').pop().toLowerCase(), ValidFileExtension) == -1) {
      alert("Sorry, the allowed file extensions are: '.jpeg','.jpg', '.png', '.gif', '.bmp'")
    }
  })
})

If so, at the very end of the script add a semi-colon : ; because it's missing one and seems to be conflicting with a script after it.

Semi-colons are like periods in a sentence, in programming. If you miss one everything explodes.

[ValoishGraphic Designer]

Hai @HaeDoesGraphics <3
@Ange Tuteur You are honestly a genius! It works now!
Just one tiny last thing before this thread is 100% resolved;
There's a little white line between the member details box and the member post

I have a feeling this can be solved using CSS, but I'd rather not mess with the code before I break something ; A;

[Ange TuteurAdministrator]

HUZZAH ! Debugger XP +50

Those lines are "border-spacing" in the table layout. You can remove them globally with this css rule :

Code:

.forumline { border-spacing:0; }

They can commonly be mistaken for borders when there's a background behind the table cells. So it's a good thing to know when working with tables.

[Pantone]

That worked! YEA!

[ValoishGraphic Designer]

@Ange Tuteur More like Debugger XP +100 LOL.
And it's all perfect now~!

Thank you so much for all your help! Both @HaeDoesGraphics and I really appreciate it. ^^
I'll play around with the colors, and possibly other attributes as well, to see what can and can't be added in.

Edit; That gif is her in real life right now, I'm sure LOL.

[Pantone]

This is me in RL for sure, yes. Just in an office chair. LOL.
Thank you for your extended help with out little forum!

[Ange TuteurAdministrator]

Haha

You're welcome, if you have anymore problems / questions feel free to let me know.

[jessy]

you can do to invision ?

[ValoishGraphic Designer]

@Ange Tuteur Seems like there's more questions for this topic LOL

[Sponsored content]