Request: using premade images as staff banners

[raverracer]

Hi, I have looked in the library and can't really find the type of plugin i'm looking for. I found this one www.proboards.com/library/plugins/item/360

But I would like to upload image banners for the admin, news team, moderators etc rather than just adding a simple one like this. Is it possible?

[Chris]

Mar 7, 2023 5:02:12 GMT -8 raverracer said:

Hi, I have looked in the library and can't really find the type of plugin i'm looking for. I found this one www.proboards.com/library/plugins/item/360

But I would like to upload image banners for the admin, news team, moderators etc rather than just adding a simple one like this. Is it possible?

The plugin you referenced could have accomplished that task using pure CSS, as was pointed out in the support thread. The justification was the color picker was useful for those unfamiliar with hex/RGB color values. If you are using just banner images, then color is no longer a justification.

This can be accomplished by uploading the banner images as custom theme images and then using CSS to target each group you wish to give that banner. Whether a group is a staff depends on how the group was created and configured on your particular forum. The staff member must of course also have that group selected as the primary display group in their profile should they belong to multiple groups in ordered to be associated with the banner designated for that group.

In this example, I used group-0 to target your profile here on this support forum since group-0 is where everybody that is not assigned to a group belongs. If you wish to target only groups considered staff then group-0 would obviously not be one of them but this is just for example purposes.

Example:

• The image used for a banner in this example is
  
  
• The CSS /* Image Banner for group-0 */
.mini-profile:has(.user-link.group-0)::after{
   --image-source: url(https://imgur.com/9syokFY.png);
   --banner-size-height: 71px;
   --image-fit: contain;
   --image-origin: center;

   background: var(--image-source)  var(--image-origin) no-repeat;
   background-size: var(--image-fit);

   height: var(--banner-size-height);
   display:block;
   content: ' ';
}

/* Image Banner for group-1 */
.mini-profile:has(.user-link.group-1)::after{
   --image-source: url(https://imgur.com/9syokFY.png);
   --banner-size-height: 71px;
   --image-fit: contain;
   --image-origin: center;

   background: var(--image-source)  var(--image-origin) no-repeat;
   background-size: var(--image-fit);

   height: var(--banner-size-height);
   display:block;
   content: ' ';
}

/* Image Banner for group-2 */
.mini-profile:has(.user-link.group-2)::after{
   --image-source: url(https://imgur.com/9syokFY.png);
   --banner-size-height: 71px;
   --image-fit: contain;
   --image-origin: center;

   background: var(--image-source)  var(--image-origin) no-repeat;
   background-size: var(--image-fit);

   height: var(--banner-size-height);
   display:block;
   content: ' ';
}

/* Image Banner for group-3 */

/* Image Banner for group-4 */

/* Image Banner for group-11 */

/* Image Banner for group-12 */

/* Image Banner for group-67 */

/* Image Banner for group-68 */

/* Image Banner for group-n+1 */
  
  
• Result...