ClosedNew Thread

 Post Colour per Group
Yog
 Posted: July 5th, 2015, 11:51 AM
Quote
Newbie
Posts:4Group:New MemberJoined:July 5th, 2015
Send Message


This is hopefully solvable with some simple CSS, but no matter which direction I tackle it from, I can't seem to come up with anything. I have had a thorough search around a few different support & skinning board but as close as I can find is changing user-profile styles per group by using variables in the CSS combined with JCink's own profile builder. Unfortunately this will only cover the left column of an individual post. This place seems a bit more knowledgable than most, maybe someone can at least point me in the right direction?

In a nutshell what I'd like to achieve is four different post styles for four different user groups. Say the host group has a white background-color to all of their posts. Meanwhile members of a second group - "Red" all have a pink background color. Blue have some pale blue and Yellow have something appropriate.

I am not sure this is even possible since the styling on posts is covered by these two parts of my sheets;

CODE

.post-normal, .msg-normal {
background-color: #fffde7;
display:block;
padding-bottom:8px;
       border-bottom-left-radius: 10px;
       border-bottom-right-radius: 10px;
margin-bottom: 5px;
}


CODE

.post2, .post1 {
padding:0;
}


Which is obviously nothing to do with member Groups.

However, I was hoping that somehow I might be able to link the user profile to the post's colour maybe?

For example I have a line in the mini-profile like so;
CODE
<div class='member-group-mpcolor-<!-- |g_id| -->' style="padding:5px;"><a href='index.php?showuser=<!-- |id| -->'><!-- |avatar| --></a></div>


Which links back to variables in the CSS for each Group for a simple border per avatar;
CODE
.member-group-mpcolor-4 {
border: 5px solid #03a9f4;
}

.member-group-mpcolor-5 {
border: 5px solid #ff00ff;
}



Even typing that now it seem ridiculous to think that could work for posts too, but I really can't think of any other way to even begin approaching it. I am pretty decent with HTML & CSS but next-to-clueless with scripting or jquery or that end of things.


Can anyone help? Not even a solution, but even any thoughts on how it might be possible would be fantastic.
& some verses
 Posted: July 5th, 2015, 06:38 PM
Quote
Member
Posts:25Group:MemberJoined:November 27th, 2013
Send Message


Hey!

1.) This is totally possible.

2.) The code I am sharing is NOT written by me. I asked a question about something else on JCINK support forum and a member (Kassandra) provided me with a code (but I don't think they wrote it, either).

At any rate, I just toyed around with it on my forum in progress and was able to change the background color. You will probably need to play with it to get it to your liking, but here you go.


CODE
<script>
// Group numbers separated by commas if multiple (4 is admin)
var g_ids = new Array(4);

if(jQuery.inArray( <!-- |g_id| -->, g_ids) != -1) {

document.write("<style>.postcolor {background-color: pink;}</style>");

}
var g_ids2 = new Array(5);

if(jQuery.inArray( <!-- |g_id| -->, g_ids2) != -1) {

document.write("<style>.postcolor {background-color: yellow;}</style>");

}
var g_ids3 = new Array(6);

if(jQuery.inArray( <!-- |g_id| -->, g_ids3) != -1) {

document.write("<style>.postcolor {background-color: red;}</style>");

}
var g_ids4 = new Array(7);

if(jQuery.inArray( <!-- |g_id| -->, g_ids4) != -1) {

document.write("<style>.postcolor {background-color: blue;}</style>");

}
</script>


The number in the new Array(#) parenthesis needs to be the member group number. Make sure to change the g_ids# number on each line of script as well. Hope that helps (and again, I GET NO CREDIT FOR THIS, I definitely didn't write it).

This post has been edited by & some verses: July 5th, 2015, 06:45 PM
Yog
 Posted: July 5th, 2015, 06:52 PM
Quote
Newbie
Posts:4Group:New MemberJoined:July 5th, 2015
Send Message


Oh cool, cheers for your promptness. I am not that hot with scripting but I think looking this over I ought be able to make it work. Will report back!
Yog
 Posted: July 5th, 2015, 08:40 PM
Quote
Newbie
Posts:4Group:New MemberJoined:July 5th, 2015
Send Message


Okay, after playing around with the above a bit, and my rudimentary script knowledge, what the above seems to do is depending on the Group_ID of the user, overides that part of the CSS to change the skin as that user sees it. I can set that up so that the posts appear red to me, but if I log in as a user from a different group, the same posts appear green.

Kinda neat, but not what I am looking for unfortunately :/

What I would like to do, is to in a single thread, see a string of posts from people from different groups, and each post be differently coloured depending on which group the user was in. No matter which group the viewer belongs to, they will see all posts made by members of the Blue Group appear as blue. All posts made by red Group as red. So that a thread might be blue - red - red - blue - green depending who has posted.

Does that make more sense?

This post has been edited by Yog: July 5th, 2015, 08:46 PM
& some verses
 Posted: July 5th, 2015, 10:00 PM
Quote
Member
Posts:25Group:MemberJoined:November 27th, 2013
Send Message


Darn, I was hoping it'd work, but I didn't try switching accounts when I tested it out really quick on my skin.

What you're saying totally makes sense. I'm no javascripting guru either. I'll keep tinkering around but in the meantime, passing the torch on to someone else who (hopefully) knows the correct solution to this. It would be a neat trick!

Best of luck!



Edit: I'm sitting here thinking about it and it seems to me like there has to be a way to anchor the code to the post id (<!-- |pid| -->) and then change color based on the member group of the author of that post? I'm not sure how to explain it really but basically:

If post-id author is in member group X, then .postcolor is background color Y.


This post has been edited by & some verses: July 5th, 2015, 10:27 PM
Yog
 Posted: July 6th, 2015, 09:34 PM
Quote
Newbie
Posts:4Group:New MemberJoined:July 5th, 2015
Send Message


I got sorted out for this. John over at JCink support created some new variables to play with.

Here for info; http://forum.jcink.com/index.php?showtopic=24209


This thread has been archived
Reason: This request has been completed by & some verses. Thanks!

Topic Options ClosedNew Thread


 


 

Latest Shouts In The Shoutbox -- View The Shoutbox · Rules   


's reputation