Coding-Spot

You are not connected. Please login or register

 
 

Adding background gradient for staff

Message (Page 1 of 1)


 
Administrator
Administrator

Posted on Fri Aug 09, 2013 11:26 am

 
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! Laugh Wink



Last edited by Mark on Sun Aug 11, 2013 3:40 am; edited 5 times in total



View user profile http://coding-spot.darkbb.com



 
Senior Member

Posted on Fri Aug 09, 2013 2:27 pm

 
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. :)



View user profile



 
Administrator
Administrator

Posted on Fri Aug 09, 2013 2:51 pm

 

*
THANKED

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



View user profile http://coding-spot.darkbb.com



 
Senior Member

Posted on Fri Aug 09, 2013 3:03 pm

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



View user profile



 
Administrator
Administrator

Posted on Fri Aug 09, 2013 3:04 pm

 
This one: Happy 
Code:
{postrow.displayed.POSTER_RANK_NEW}



View user profile http://coding-spot.darkbb.com



 
Senior Member

Posted on Fri Aug 09, 2013 3:19 pm

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

how? :)



View user profile



 
Administrator
Administrator

Posted on Fri Aug 09, 2013 3:22 pm

 
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}



View user profile http://coding-spot.darkbb.com



 
Senior Member

Posted on Fri Aug 09, 2013 3:49 pm

 
bro mark, work Happy

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 Smile

how?



View user profile



 
Administrator
Administrator

Posted on Fri Aug 09, 2013 4:00 pm

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



View user profile http://coding-spot.darkbb.com



 
Senior Member

Posted on Fri Aug 09, 2013 4:15 pm

 
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"? Happy



View user profile



 
Administrator
Administrator

Posted on Fri Aug 09, 2013 4:43 pm

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



View user profile http://coding-spot.darkbb.com



 
Administrator
Administrator

Posted on Sun Aug 11, 2013 3:41 am

 
Done, check now the code for PhpBB2 Happy 



View user profile http://coding-spot.darkbb.com



 
Senior Member

Posted on Sun Aug 11, 2013 5:14 am

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

good tutorial Happy



View user profile



 
Administrator
Administrator

Posted on Mon Aug 12, 2013 2:16 am

 
No problem! Blush Happy 



View user profile http://coding-spot.darkbb.com


#15

Sponsored content


 

Posted Today at 11:47 am

 





Message (Page 1 of 1)

Permissions in this forum:
You cannot reply to topics in this forum

In total there is 0 user online :: 0 Registered, 0 Hidden and 0 Guests

Users browsing this forum: None