Javascript for an image?

Hello, I would like to know if I can have a javascript for this photo: https://i.servimg.com/u/f39/18/21/41/30/f6011.png ? I was told by@ange to make a need thread on the support forum!

Thanks Brandon!

Hello @brandon_g,

Create a new rank with the following content, or wrap your current rank with it.

Code:

<span class="staff-rank">YOUR RANK HERE</span>

Next go to Modules > JavaScript codes management > create a new script

Title : Your choice
Placement : In all the pages

Code:

$(function() {
  $('.post:has(.staff-rank)').addClass('staff-post');
});

Then use CSS to style the posts :
Display > Colors > CSS stylesheet

Code:

.post.staff-post {
  background-image:url(http://i39.servimg.com/u/f39/18/21/41/30/f6011.png);
  background-repeat:no-repeat;
  background-position:left bottom;
}

Hello Ange, I did everything you said but it is still not appearing. The only thing I may have messed up on is wrapping the image around the rank. How do I do this? Do I put it as the actual title or the rank image itself. What I am asking really is wrap around a rank?

-Thanks - Brandon

The first part is the rank title.

Why is the code not working? I do not have my gradient I followed Ange's steps precisely!

It could be an incompatibility in your forum version. What is the version of your forum ?
Display > Choose a theme > Version

or post your forum link if you're not sure.

By wrap, I mean wrap these tags around your rank title :

Code:

<span class="staff-rank">YOUR RANK HERE</span>

Where YOUR RANK HERE is, is where your rank name should be.

@Ange I already know what verision my forum operates on: its PHPBB2. And it has been since it was created!

It even says on my username: *has not looked his username in so long he forgot this fact!*

I need to ask, because members profiles are not always true.

Replace your CSS with this :

Code:

.post.staff-post td { background:none }
.post.staff-post { background:url(http://i39.servimg.com/u/f39/18/21/41/30/f6011.png) no-repeat left bottom #1d1d1d }

Edit by brandon_g: Use the above css if your forum version is phpbb2

@ange I know that was my smartmouth at work again!

I have replaced the CSS code with the one you just gave me but the gradient still not showing.

Have you wrapped your rank with the following tags ?

Code:

<span class="staff-rank">YOUR RANK HERE</span>

@ Ange it works now.... but it only covers half of my posts, is it possible to drag all the across.

i wanna post a screen shot, but it would not work. So I will just put the  link to show you what I mean: Click Here

Replace your CSS with this :

Code:

.post.staff-post td { background:none }
.post.staff-post { background:url(http://i39.servimg.com/u/f39/18/21/41/30/f6011.png) no-repeat left bottom / 100% 100% #1d1d1d }

That fixed it! Thanks again Ange! SOLVED .

You're welcome ^^

Topic archived

Happy holidays