Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  

How to make separate author panes Per user group
   (0 reviews)

Morrigan
  • With IPS, unless you have it set to highlight specific groups posts, there is no real way to differentiate the author types save for their icon and group color. As you can see here at the Initiative we are able to accomodate a different look per user group to show off all of our awesome staff members, patrons and contributors.

    Software: Invision Power Services (IPS)

For this guide I'm not going to go super in depth into the how-to to get like our special gears per user group however we will explain the minimum of how to add in a group ID so that you can start to make custom items in your author pane. This won't be super in depth on how to do extra things but they are possible. This does require theme edits to accomplish:

 

So first things first go to edit your theme, I always recommend to edit a test theme to be sure you don't break anything while users are using it. To do this go to Themes > Themes > Click the < / > icon to the right of the theme in question.

 

You'll need to find the postContainer template. It's in forums > front > topics > postContainer

 

In this template you need to find this line:

<article {{if $comment->author()->hasHighlightedReplies()}}data-memberGroup="{$comment->author()->member_group_id}" {{endif}} id='elComment_{$comment->$idField}' class='cPost ipsBox {{if $otherClasses}}{$otherClasses}{{endif}} ipsComment {{if ( settings.reputation_enabled and settings.reputation_highlight and $comment->reactionCount() >= settings.reputation_highlight ) OR $comment->isFeatured()}}ipsComment_popular{{endif}} ipsComment_parent ipsClearfix ipsClear ipsColumns ipsColumns_noSpacing ipsColumns_collapsePhone {{if $comment->author()->hasHighlightedReplies()}}ipsComment_highlighted{{endif}} {{if $comment->isIgnored()}}ipsHide{{endif}} {{if $comment->hidden() OR $item->hidden() === -2}}ipsModerated{{endif}}'>

And replace it with this:

<article {{if $comment->author()->hasHighlightedReplies()}}data-memberGroup="{$comment->author()->member_group_id}" {{endif}} id='elComment_{$comment->$idField}' class='cPost ipsBox group_{$comment->author()->member_group_id} {{if $otherClasses}}{$otherClasses}{{endif}} ipsComment {{if ( settings.reputation_enabled and settings.reputation_highlight and $comment->reactionCount() >= settings.reputation_highlight ) OR $comment->isFeatured()}}ipsComment_popular{{endif}} ipsComment_parent ipsClearfix ipsClear ipsColumns ipsColumns_noSpacing ipsColumns_collapsePhone {{if $comment->author()->hasHighlightedReplies()}}ipsComment_highlighted{{endif}}{{if $comment->isIgnored()}}ipsHide{{endif}} {{if $comment->hidden() OR $item->hidden() === -2}}ipsModerated{{endif}}'>

Note, that the only thing I actually added was this:

group_{$comment->author()->member_group_id} 

What this provides to you is a styling class that identifies the group in question. You can find group IDs in the Members > Groups page by either hovering over the group, editing the group and copying the URL into a text editor or by using your handy dandy inspect element tool.

 

From here make changes to elements to your hearts content.

 

As a quick and added bonus. The way that the Initiative accomplishes it's borders is by adding a class to it's our bit for the avatar. Find this:

<li class='cAuthorPane_photo'>

Change to this:

<li class='cAuthorPane_photo group_{$comment->author()->member_group_id}'>

And using CSS like this:

.cAuthorPane {
  width: 300px;
}

.cAuthorPane_photo {
  width: 265px;
  height: 265px;
  display: flex;
  align-items: center;
  justify-content:center;
  background-size: cover;
}

.cAuthorPane_photo.group_4 {
  background: url({resource="new_av_bg.png" app="core" location="front"}) center center no-repeat;
  background-size: cover;
}

Please note that the authorPane changes do require other moderate changes to make them both responsive and to not overlap your post.


  • Love 1
Sign in to follow this  


User Feedback

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.