Hello! In this tutorial i'm going to show you on how to put a gradient background for staff/selected user, depends on how you'll handle this.

The demo is the same with the forumotion staff member.
Version: All Version

1. Go to Modules > HTML and JS Management > JS Management > Create a new Javascript: (Check in all pages)
- For PunBB:

Code:


jQuery(document).ready(function(){
jQuery(".post:has('.csrank')").css('background','url(http://i48.servimg.com/u/f48/17/48/49/15/photo10.png) repeat-y top left')});


- For Phpbb2:

Code:


jQuery(document).ready(function(){
jQuery("td.row2:has('.csrank')").css('background','url(http://i48.servimg.com/u/f48/17/48/49/15/photo10.png) repeat-y top left')});

jQuery(document).ready(function(){
jQuery("td.row1:has('.csrank')").css('background','url(http://i48.servimg.com/u/f48/17/48/49/15/photo10.png) repeat-y top left')});


- For Phpbb3:

Code:


jQuery(document).ready(function(){
jQuery("div.post:has('.csrank')").css('background','url(http://i48.servimg.com/u/f48/17/48/49/15/photo10.png) repeat-y top left')});


- For Invision:

Code:


jQuery(document).ready(function(){
jQuery(".postprofile:has('.csrank')").css('background','url(http://i48.servimg.com/u/f48/17/48/49/15/photo10.png) repeat-y top left')});


2. Now go to ACP > User and Groups > Ranks > Rank Administration > Add new rank: (Fill up)
- Rank name:

Code:

<span class="csrank">Rank here</span>

- Set as Special Rank: Yes


Then save. Tadaaa!  

hi bro mark, thanks for share new tutorial.

before i done try in phpbb2 version, but doesn't work,

background post still default use hex color. :)

Make sure the variable for the rank is present on your viewtopic_body.  

what is a variable?
whether it should be in a state of default?  

This one:  

Code:

{postrow.displayed.POSTER_RANK_NEW}

oh that code :)
but that code does not exist in my viewtopic_body bro mark  

how? :)

Yep. That's why the code isn't functioning. Just find this one:

Code:

{postrow.displayed.POSTER_AVATAR}

Then place this below it:

Code:

<br/>{postrow.displayed.POSTER_RANK_NEW}


bro mark, work

but i have little problem, gradient BG only work on mozilla browser


http://budokai.indonesianforum.net/t24-sdfsd#121

when i try open with google chrome or other (latest/new version), failed, background still use hex color/default :)

This seems to still have a problem

how?

Ooops, something mistake on the code, can you try to copy it again then place on the JS Management.

this bro mark :)

Code:

jQuery(document).ready(function(){
jQuery("td.row2:has('.nomedorank')").css('background','url(http://i48.servimg.com/u/f48/17/48/49/15/photo10.png) repeat-y top right')});

-----------
bro mark
gradient that only appears in "row2"
can also appear in "row1"?

Codes are working with google chrome too. Nothing to worry about.
But for phpbb2 there is a slight bug, will provide the code tomorrow.  

Done, check now the code for PhpBB2  

ok solved bro mark, not bug again when open in chrome, :)

good tutorial

No problem!